From 6223a21ce206b36306c86d20c50522222872b304 Mon Sep 17 00:00:00 2001 From: Evan Yamanishi Date: Mon, 21 May 2018 14:21:28 -0400 Subject: [PATCH 01/38] make room for alertdialog.html --- examples/alert/{index.html => alert.html} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename examples/alert/{index.html => alert.html} (100%) diff --git a/examples/alert/index.html b/examples/alert/alert.html similarity index 100% rename from examples/alert/index.html rename to examples/alert/alert.html From 07ba6d6cdced7f2ece516790dc8e6afddbf881a8 Mon Sep 17 00:00:00 2001 From: Evan Yamanishi Date: Mon, 21 May 2018 14:21:56 -0400 Subject: [PATCH 02/38] initial alertdialog --- examples/alert/alert-dialog.html | 73 +++++++++++++++++++++++++++++++ examples/alert/css/alert.css | 24 ++++++++++ examples/alert/js/alert-dialog.js | 51 +++++++++++++++++++++ 3 files changed, 148 insertions(+) create mode 100644 examples/alert/alert-dialog.html create mode 100644 examples/alert/js/alert-dialog.js diff --git a/examples/alert/alert-dialog.html b/examples/alert/alert-dialog.html new file mode 100644 index 0000000000..604d55dcb7 --- /dev/null +++ b/examples/alert/alert-dialog.html @@ -0,0 +1,73 @@ + + + + + Alert and Message Dialogs Example | WAI-ARIA Authoring Practices 1.1 + + + + + + + + + + + + + + + + + +
+

Alert Dialog Example

+

The below example demonstrates the design pattern for an alert dialog. The design pattern for an alert is also demonstrated to allow the user to experience the difference between the two patterns.

+

In this example, the "notes" <textarea> contains editable text that you are encouraged to modify. Pressing the "discard notes" button will trigger a confirmation dialog, but only if the notes field contains text. Clicking "yes" will remove all contents of the notes field, while clicking "no" or pressing escape will simply close the dialog. If the notes field does not contain any text, pressing the "discard nodes" button will trigger an alert notification that there is nothing to discard. This notification appears for 3 seconds, and then disappears, a pattern commonly referred to as a "toast notification."

+
+

Example

+ +
+ +
+ + + +
+ +
+
+
+

Accessibility Features

+

Note that this example uses code from the modal dialog example to handle the behavior of the alertdialog. As such, referencing that example may be useful.

+
    +
  1. The accessible label for the alert dialog is set to its heading ("Confirmation").
    2. +
  2. The dialog's prompt ("Are you sure...?") is referenced via aria-describedby to ensure that the user is immediately aware of the prompt.
    3. +
  3. Focus is automatically set to the first focusable element inside the dialog, which is the "No" button. This is the least destructive action, and will prevent the user from accidentally confirming the dialog.
    4. +
  4. The user can dismiss the dialog with Escape at any time, or by selecting the "No" button.
    5. +
  5. Once the user has removed the contents of the notes textarea, clicking the "discard notes" button cannot do anything. To communicate this to the user, an alert with role="alert" is triggered.
    6. +
+
+
+ + diff --git a/examples/alert/css/alert.css b/examples/alert/css/alert.css index b11f1faa42..3669537a79 100644 --- a/examples/alert/css/alert.css +++ b/examples/alert/css/alert.css @@ -8,3 +8,27 @@ [role="alert"]:empty { display: none; } + +/* styling for alert-dialog example */ +.notes { + display: block; + font-size: 1rem; + line-height: 1.3; + min-width: 400px; + max-width: 100%; + width: 33%; +} + +[role="alert"].toast { + background-color: rgba(0, 0, 0, 0.7); + color: #fff; + padding: 1rem; + border: none; + border-radius: 0.25rem; + box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); + + position: absolute; + bottom: 1rem; + left: 50%; + transform: translateX(-50%); +} diff --git a/examples/alert/js/alert-dialog.js b/examples/alert/js/alert-dialog.js new file mode 100644 index 0000000000..8f61437671 --- /dev/null +++ b/examples/alert/js/alert-dialog.js @@ -0,0 +1,51 @@ +function initAlertDialog () { + function discardInput (closeButton, inputId) { + var input = document.getElementById(inputId); + input.value = ''; + closeDialog(closeButton); + } + + function triggerAlert (alertId) { + return new Promise(function (resolve, reject) { + try { + var alert = document.getElementById(alertId); + alert.classList.remove('hidden'); + setTimeout(function () { + alert.classList.add('hidden'); + resolve(); + }, 3000); + } + catch (err) { + reject(err); + } + }); + } + + function openAlertDialog (dialogId, focusAfterClosed, focusFirst) { + var target = document.getElementById(focusAfterClosed.getAttribute('aria-controls')); + if (target && target.value) { + var dialog = document.getElementById(dialogId); + var desc = document.getElementById(dialog.getAttribute('aria-describedby')); + var wordCount = document.getElementById('word_count'); + if (!wordCount) { + wordCount = document.createElement('p'); + wordCount.id = 'word_count'; + desc.appendChild(wordCount); + } + var count = target.value.split(/\s/).length; + var frag = (count > 1) ? 'words' : 'word'; + wordCount.textContent = count + ' ' + frag + ' will be deleted.'; + openDialog(dialogId, focusAfterClosed, focusFirst); + } + else { + triggerAlert('alert_toast').then(function () { + // optionally do something on notification end + }); + } + } + + window.openAlertDialog = openAlertDialog; + window.discardInput = discardInput; +} + +document.addEventListener('DOMContentLoaded', initAlertDialog); From 3c92514ea87384de39285818e37163199b84c611 Mon Sep 17 00:00:00 2001 From: Evan Yamanishi Date: Mon, 21 May 2018 14:22:25 -0400 Subject: [PATCH 03/38] editorial: fix fragment sentence --- examples/dialog-modal/dialog.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/dialog-modal/dialog.html b/examples/dialog-modal/dialog.html index 209fe0ff28..340e9e6444 100644 --- a/examples/dialog-modal/dialog.html +++ b/examples/dialog-modal/dialog.html @@ -316,7 +316,7 @@

Verification Result

  • The larger a focusable element is, the more difficult it is to visually identify the location of focus, especially for users with a narrow field of view.
    • -
  • The dialog has a visual boarder. So creating a clear visual indicator of focus +
  • The dialog has a visual border, so creating a clear visual indicator of focus when the entire dialog has focus is not very feasible.
  • Screen readers read the label and content of focusable elements. The dialog contains its label and a lot of content! If a dialog like this one has focus, the From ac5502f1a484c1fa6a8f604149e4425865c84413 Mon Sep 17 00:00:00 2001 From: Evan Yamanishi Date: Mon, 21 May 2018 14:22:46 -0400 Subject: [PATCH 04/38] target labels directly --- examples/dialog-modal/css/dialog.css | 4 ++-- examples/dialog-modal/dialog.html | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/examples/dialog-modal/css/dialog.css b/examples/dialog-modal/css/dialog.css index d5be27a5c6..35c9490819 100644 --- a/examples/dialog-modal/css/dialog.css +++ b/examples/dialog-modal/css/dialog.css @@ -69,8 +69,8 @@ body:not(.toc-inline) #main_content main, body:not(.toc-inline) #main_content na } } -[role="dialog"] h2:first-of-type { - text-align:center; +.dialog_label { + text-align: center; } .dialog_form { diff --git a/examples/dialog-modal/dialog.html b/examples/dialog-modal/dialog.html index 340e9e6444..ae7fff9578 100644 --- a/examples/dialog-modal/dialog.html +++ b/examples/dialog-modal/dialog.html @@ -234,7 +234,7 @@

    HTML Source Code

  • The accessible label for the alert dialog is set to its heading ("Confirmation").
  • The dialog's prompt ("Are you sure...?") is referenced via aria-describedby to ensure that the user is immediately aware of the prompt.
  • Focus is automatically set to the first focusable element inside the dialog, which is the "No" button. This is the least destructive action, and will prevent the user from accidentally confirming the dialog.
    • -
  • The user can dismiss the dialog with Escape at any time, or by selecting the "No" button.
    • +
  • The user can dismiss the dialog with Escape at any time, or by clicking the "No" button.
  • Once the user has removed the contents of the notes textarea, clicking the "discard notes" button cannot do anything. To communicate this to the user, an alert with role="alert" is triggered.
    • From b2692e09ef005c021d1dcf02a39ee99896ad4616 Mon Sep 17 00:00:00 2001 From: Evan Yamanishi Date: Fri, 1 Jun 2018 16:36:13 -0400 Subject: [PATCH 22/38] be more consistent about gt/lt usage --- examples/dialog-modal/alertdialog.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/dialog-modal/alertdialog.html b/examples/dialog-modal/alertdialog.html index d1bb51a0d4..9f3adb380e 100644 --- a/examples/dialog-modal/alertdialog.html +++ b/examples/dialog-modal/alertdialog.html @@ -30,7 +30,7 @@

    Alert Dialog Example

    The below example demonstrates the design pattern for an alert dialog. The design pattern for an alert is also demonstrated to allow the user to experience the difference between the two patterns.

    -

    In this example, the "notes" <textarea> contains editable text that you are encouraged to modify. Pressing the "discard notes" button will trigger a confirmation dialog, but only if the notes field contains text. Clicking "yes" will remove all contents of the notes field, while clicking "no" or pressing escape will simply close the dialog. If the notes field does not contain any text, pressing the "discard nodes" button will trigger an alert notification that there is nothing to discard. This notification appears for 3 seconds, and then disappears, a pattern commonly referred to as a "toast notification."

    +

    In this example, the "notes" textarea contains editable text that you are encouraged to modify. Pressing the "discard notes" button will trigger a confirmation dialog, but only if the notes field contains text. Clicking "yes" will remove all contents of the notes field, while clicking "no" or pressing escape will simply close the dialog. If the notes field does not contain any text, pressing the "discard nodes" button will trigger an alert notification that there is nothing to discard. This notification appears for 3 seconds, and then disappears, a pattern commonly referred to as a "toast notification."

    Similar examples include:

    • Alert: a basic alert.
      • From 0ba27b065b88d3ac7e8c60ccf69d833376e28a7c Mon Sep 17 00:00:00 2001 From: Evan Yamanishi Date: Fri, 1 Jun 2018 16:53:43 -0400 Subject: [PATCH 23/38] =?UTF-8?q?vnu:=20The=20=E2=80=9Ctype=E2=80=9D=20att?= =?UTF-8?q?ribute=20is=20unnecessary=20for=20JavaScript=20resources.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/dialog-modal/alertdialog.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/examples/dialog-modal/alertdialog.html b/examples/dialog-modal/alertdialog.html index 9f3adb380e..602b75c051 100644 --- a/examples/dialog-modal/alertdialog.html +++ b/examples/dialog-modal/alertdialog.html @@ -10,11 +10,11 @@ - - + + - + From d61ceb0155b2a0ab39ad48d3acae5acef5b2ddec Mon Sep 17 00:00:00 2001 From: Evan Yamanishi Date: Fri, 1 Jun 2018 16:54:27 -0400 Subject: [PATCH 24/38] serialize the interaction features for easier readability --- examples/dialog-modal/alertdialog.html | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/examples/dialog-modal/alertdialog.html b/examples/dialog-modal/alertdialog.html index 602b75c051..06de6720ba 100644 --- a/examples/dialog-modal/alertdialog.html +++ b/examples/dialog-modal/alertdialog.html @@ -30,7 +30,13 @@

      Alert Dialog Example

      The below example demonstrates the design pattern for an alert dialog. The design pattern for an alert is also demonstrated to allow the user to experience the difference between the two patterns.

      -

      In this example, the "notes" textarea contains editable text that you are encouraged to modify. Pressing the "discard notes" button will trigger a confirmation dialog, but only if the notes field contains text. Clicking "yes" will remove all contents of the notes field, while clicking "no" or pressing escape will simply close the dialog. If the notes field does not contain any text, pressing the "discard nodes" button will trigger an alert notification that there is nothing to discard. This notification appears for 3 seconds, and then disappears, a pattern commonly referred to as a "toast notification."

      +

      User interactions for this interactive include:

      +
        +
      • The "notes" textarea contains editable text that you are encouraged to modify.
        • +
      • Pressing the "discard notes" button will trigger a confirmation dialog, but only if the notes field contains text.
        • +
      • Clicking "yes" will remove all contents of the notes field, while clicking "no" or pressing escape will simply close the dialog.
        • +
      • If the notes field does not contain any text, pressing the "discard nodes" button will trigger an alert, notifying the user that there is nothing to discard. This notification appears for 3 seconds, and then disappears, a pattern commonly referred to as a "toast notification."
        • +

      Similar examples include:

      • Alert: a basic alert.
        • From 312fcc752eb4904b1591403d61c7eae8f106e995 Mon Sep 17 00:00:00 2001 From: Evan Yamanishi Date: Fri, 1 Jun 2018 16:58:34 -0400 Subject: [PATCH 25/38] more consistent code highlighting --- examples/dialog-modal/alertdialog.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/examples/dialog-modal/alertdialog.html b/examples/dialog-modal/alertdialog.html index 06de6720ba..a0212eb21c 100644 --- a/examples/dialog-modal/alertdialog.html +++ b/examples/dialog-modal/alertdialog.html @@ -71,9 +71,9 @@

        Accessibility Features

        1. The accessible label for the alert dialog is set to its heading ("Confirmation").
        2. The dialog's prompt ("Are you sure...?") is referenced via aria-describedby to ensure that the user is immediately aware of the prompt.
          3. -
        3. Focus is automatically set to the first focusable element inside the dialog, which is the "No" button. This is the least destructive action, and will prevent the user from accidentally confirming the dialog.
          4. -
        4. The user can dismiss the dialog with Escape at any time, or by clicking the "No" button.
          5. -
        5. Once the user has removed the contents of the notes textarea, clicking the "discard notes" button cannot do anything. To communicate this to the user, an alert with role="alert" is triggered.
          6. +
        6. Focus is automatically set to the first focusable element inside the dialog, which is the "No" button. This is the least destructive action, and will prevent the user from accidentally confirming the dialog.
          7. +
        7. The user can dismiss the dialog with Escape at any time, or by clicking the "No" button.
          8. +
        8. Once the user has removed the contents of the notes textarea, clicking the "discard notes" button cannot do anything. To communicate this to the user, an alert with role="alert" is triggered.
        From f88cf4d4efe2bd9bd11f7981994d9907d7a3914c Mon Sep 17 00:00:00 2001 From: Evan Yamanishi Date: Fri, 1 Jun 2018 16:59:09 -0400 Subject: [PATCH 26/38] add a space --- examples/dialog-modal/alertdialog.html | 2 +- examples/dialog-modal/dialog.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/dialog-modal/alertdialog.html b/examples/dialog-modal/alertdialog.html index a0212eb21c..7fb987941b 100644 --- a/examples/dialog-modal/alertdialog.html +++ b/examples/dialog-modal/alertdialog.html @@ -159,7 +159,7 @@

        Role, Property, State, and Tabindex Attributes

        -

        Notes on aria-modaland aria-hidden

        +

        Notes on aria-modal and aria-hidden

        1. The aria-modal property was introduced in ARIA 1.1. diff --git a/examples/dialog-modal/dialog.html b/examples/dialog-modal/dialog.html index ceb739689d..734e06f5eb 100644 --- a/examples/dialog-modal/dialog.html +++ b/examples/dialog-modal/dialog.html @@ -184,7 +184,7 @@

          Role, Property, State, and Tabindex Attributes

          -

          Notes on aria-modaland aria-hidden

          +

          Notes on aria-modal and aria-hidden

          1. The aria-modal property was introduced in ARIA 1.1. From 9cc53ae827066276b9f501db281c3dda9d805b59 Mon Sep 17 00:00:00 2001 From: Evan Yamanishi Date: Fri, 1 Jun 2018 17:01:40 -0400 Subject: [PATCH 27/38] formatting --- examples/dialog-modal/alertdialog.html | 25 ++++++++++++++++++++----- 1 file changed, 20 insertions(+), 5 deletions(-) diff --git a/examples/dialog-modal/alertdialog.html b/examples/dialog-modal/alertdialog.html index 7fb987941b..d68e75ec16 100644 --- a/examples/dialog-modal/alertdialog.html +++ b/examples/dialog-modal/alertdialog.html @@ -29,13 +29,19 @@

            Alert Dialog Example

            -

            The below example demonstrates the design pattern for an alert dialog. The design pattern for an alert is also demonstrated to allow the user to experience the difference between the two patterns.

            +

            + The below example demonstrates the design pattern for an alert dialog. + The design pattern for an alert is also demonstrated to allow the user to experience the difference between the two patterns. +

            User interactions for this interactive include:

            • The "notes" textarea contains editable text that you are encouraged to modify.
            • Pressing the "discard notes" button will trigger a confirmation dialog, but only if the notes field contains text.
            • Clicking "yes" will remove all contents of the notes field, while clicking "no" or pressing escape will simply close the dialog.
              • -
            • If the notes field does not contain any text, pressing the "discard nodes" button will trigger an alert, notifying the user that there is nothing to discard. This notification appears for 3 seconds, and then disappears, a pattern commonly referred to as a "toast notification."
              • +
            • + If the notes field does not contain any text, pressing the "discard nodes" button will trigger an alert, notifying the user that there is nothing to discard. + This notification appears for 3 seconds, and then disappears, a pattern commonly referred to as a "toast notification." +

            Similar examples include:

              @@ -67,13 +73,22 @@

              Confirmation

        Accessibility Features

        -

        Note that this example uses code from the modal dialog example to handle the behavior of the alertdialog. Referencing that example may also be useful.

        +

        + Note that this example uses code from the modal dialog example to handle the behavior of the alertdialog. + Referencing that example may also be useful. +

        1. The accessible label for the alert dialog is set to its heading ("Confirmation").
        2. The dialog's prompt ("Are you sure...?") is referenced via aria-describedby to ensure that the user is immediately aware of the prompt.
          3. -
        3. Focus is automatically set to the first focusable element inside the dialog, which is the "No" button. This is the least destructive action, and will prevent the user from accidentally confirming the dialog.
          4. +
        4. + Focus is automatically set to the first focusable element inside the dialog, which is the "No" button. + This is the least destructive action, and will prevent the user from accidentally confirming the dialog. +
        5. The user can dismiss the dialog with Escape at any time, or by clicking the "No" button.
          6. -
        6. Once the user has removed the contents of the notes textarea, clicking the "discard notes" button cannot do anything. To communicate this to the user, an alert with role="alert" is triggered.
          7. +
        7. + Once the user has removed the contents of the notes textarea, clicking the "discard notes" button cannot do anything. + To communicate this to the user, an alert with role="alert" is triggered. +
        From 239696f6b91c360fac6da252ea0aadf89c068c90 Mon Sep 17 00:00:00 2001 From: Evan Yamanishi Date: Fri, 1 Jun 2018 17:03:25 -0400 Subject: [PATCH 28/38] more consistent language --- examples/dialog-modal/alertdialog.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/dialog-modal/alertdialog.html b/examples/dialog-modal/alertdialog.html index d68e75ec16..2b57b805a2 100644 --- a/examples/dialog-modal/alertdialog.html +++ b/examples/dialog-modal/alertdialog.html @@ -143,7 +143,7 @@

        Role, Property, State, and Tabindex Attributes

        div - Identifies the element that serves as the alertdialog container. + Identifies the element that serves as the alert dialog container. From 7e1d8add6140289e87cf79e6ba4c9bba0b974ac2 Mon Sep 17 00:00:00 2001 From: Evan Yamanishi Date: Mon, 18 Jun 2018 12:52:07 -0400 Subject: [PATCH 29/38] remove redundant li --- examples/dialog-modal/alertdialog.html | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/examples/dialog-modal/alertdialog.html b/examples/dialog-modal/alertdialog.html index 2b57b805a2..aa9f83d4cb 100644 --- a/examples/dialog-modal/alertdialog.html +++ b/examples/dialog-modal/alertdialog.html @@ -159,9 +159,7 @@

        Role, Property, State, and Tabindex Attributes

        aria-describedby=IDREF div -
          -
        • Gives the alertdialog an accessible description by referring to the dialog content that describes the primary message or purpose of the dialog.
          • -
        + Gives the alertdialog an accessible description by referring to the dialog content that describes the primary message or purpose of the dialog. From 60bca35493034eb81d525bfd9d900562c9e1247c Mon Sep 17 00:00:00 2001 From: Evan Yamanishi Date: Mon, 18 Jun 2018 12:52:53 -0400 Subject: [PATCH 30/38] treat the alert like a notification that slides in on the top right --- examples/dialog-modal/css/dialog.css | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/examples/dialog-modal/css/dialog.css b/examples/dialog-modal/css/dialog.css index d32a7a2449..e27e5e6854 100644 --- a/examples/dialog-modal/css/dialog.css +++ b/examples/dialog-modal/css/dialog.css @@ -151,7 +151,12 @@ box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); position: fixed; - bottom: 50%; - left: 50%; - transform: translate(-50%); + top: 1rem; + right: 1rem; + transform: translateY(-150%); + transition: transform 225ms cubic-bezier(0.4, 0.0, 0.2, 1); +} + +.toast.active { + transform: translateY(0); } From e739b6f009cac504280a2fcd87a074f0cee6d530 Mon Sep 17 00:00:00 2001 From: Evan Yamanishi Date: Mon, 18 Jun 2018 12:59:14 -0400 Subject: [PATCH 31/38] redesign: implement save via local storage; repurpose alert for save --- examples/dialog-modal/alertdialog.html | 46 +++-- examples/dialog-modal/js/alertdialog.js | 219 +++++++++++++++++++----- 2 files changed, 209 insertions(+), 56 deletions(-) diff --git a/examples/dialog-modal/alertdialog.html b/examples/dialog-modal/alertdialog.html index aa9f83d4cb..f125e997dd 100644 --- a/examples/dialog-modal/alertdialog.html +++ b/examples/dialog-modal/alertdialog.html @@ -36,11 +36,20 @@

        Alert Dialog Example

        User interactions for this interactive include:

        • The "notes" textarea contains editable text that you are encouraged to modify.
          • -
        • Pressing the "discard notes" button will trigger a confirmation dialog, but only if the notes field contains text.
          • -
        • Clicking "yes" will remove all contents of the notes field, while clicking "no" or pressing escape will simply close the dialog.
        • - If the notes field does not contain any text, pressing the "discard nodes" button will trigger an alert, notifying the user that there is nothing to discard. - This notification appears for 3 seconds, and then disappears, a pattern commonly referred to as a "toast notification." + The "discard" button triggers a confirmation dialog. +
            +
          • Clicking "yes" will remove all contents of both the notes field and the user's local storage
            • +
          • Clicking "no" or pressing escape will simply close the dialog.
            • +
          • The "discard" button is disabled if the notes field does not contain any text.
            • +
          +
          • +
        • + The "save" button saves the contents of the "notes" textarea to your local storage. +
            +
          • A successful save will trigger a short [role="alert"] to notify you that your notes have been saved.
            • +
          • The "save" button is disabled if the user's local storage value is the same as the textarea value.
            • +

        Similar examples include:

        @@ -54,7 +63,8 @@

        Example

        - + +
        - - + +
        @@ -123,6 +133,14 @@

        Keyboard Support

        Escape Closes the dialog. + + Command + S + (Mac only) Save the contents of the notes textarea when focused. + + + Control + S + (Windows only) Save the contents of the notes textarea when focused. +
        @@ -151,7 +169,7 @@

        Role, Property, State, and Tabindex Attributes

        aria-labelledby=IDREF div - Gives the dialog an accessible name by referring to the element that provides the dialog title. + Gives the alert dialog an accessible name by referring to the element that provides the alert dialog title. @@ -159,7 +177,7 @@

        Role, Property, State, and Tabindex Attributes

        aria-describedby=IDREF div - Gives the alertdialog an accessible description by referring to the dialog content that describes the primary message or purpose of the dialog. + Gives the alert dialog an accessible description by referring to the alert dialog content that describes the primary message or purpose of the alert dialog. @@ -167,9 +185,17 @@

        Role, Property, State, and Tabindex Attributes

        aria-modal=true div - Tells assistive technologies that the windows underneath the current dialog are not available for interaction (inert). + Tells assistive technologies that the windows underneath the current alert dialog are not available for interaction (inert). + + alert + + div + + Identifies the element that serves as the alert notification. + +

        Notes on aria-modal and aria-hidden

        diff --git a/examples/dialog-modal/js/alertdialog.js b/examples/dialog-modal/js/alertdialog.js index 8f61437671..2865595594 100644 --- a/examples/dialog-modal/js/alertdialog.js +++ b/examples/dialog-modal/js/alertdialog.js @@ -1,51 +1,178 @@ -function initAlertDialog () { - function discardInput (closeButton, inputId) { - var input = document.getElementById(inputId); - input.value = ''; - closeDialog(closeButton); - } - - function triggerAlert (alertId) { - return new Promise(function (resolve, reject) { - try { - var alert = document.getElementById(alertId); - alert.classList.remove('hidden'); - setTimeout(function () { - alert.classList.add('hidden'); - resolve(); - }, 3000); - } - catch (err) { - reject(err); - } - }); - } - - function openAlertDialog (dialogId, focusAfterClosed, focusFirst) { - var target = document.getElementById(focusAfterClosed.getAttribute('aria-controls')); - if (target && target.value) { - var dialog = document.getElementById(dialogId); - var desc = document.getElementById(dialog.getAttribute('aria-describedby')); - var wordCount = document.getElementById('word_count'); - if (!wordCount) { - wordCount = document.createElement('p'); - wordCount.id = 'word_count'; - desc.appendChild(wordCount); - } - var count = target.value.split(/\s/).length; - var frag = (count > 1) ? 'words' : 'word'; - wordCount.textContent = count + ' ' + frag + ' will be deleted.'; - openDialog(dialogId, focusAfterClosed, focusFirst); +var aria = aria || {}; + +aria.Utils = aria.Utils || {}; + +aria.Utils.disableCtrl = function (ctrl) { + ctrl.setAttribute('disabled', true); +}; + +aria.Utils.enableCtrl = function (ctrl) { + ctrl.removeAttribute('disabled'); +}; + +aria.Utils.triggerAlert = function (alertEl, content) { + return new Promise(function (resolve, reject) { + try { + alertEl.textContent = content || null; + alertEl.classList.remove('hidden'); + alertEl.addEventListener('transitionend', function (e) { + if (!this.classList.contains('active')) { + this.classList.add('hidden'); + } + }, true); + setTimeout(function () { + alertEl.classList.add('active'); + }, 1); + setTimeout(function () { + alertEl.classList.remove('active'); + resolve(); + }, 3000); + } + catch (err) { + reject(err); + } + }); +}; + +aria.Notes = function Notes (notesId, saveId, discardId, localStorageKey) { + this.notesInput = document.getElementById(notesId); + this.saveBtn = document.getElementById(saveId); + this.discardBtn = document.getElementById(discardId); + this.localStorageKey = localStorageKey || 'alertdialog-notes'; + this.initialized = false; + + Object.defineProperty(this, 'controls', { + get: function () { + return document.querySelectorAll('[aria-controls=' + this.notesInput.id + ']'); + } + }); + Object.defineProperty(this, 'hasContent', { + get: function () { + return this.notesInput.value.length > 0; } - else { - triggerAlert('alert_toast').then(function () { - // optionally do something on notification end - }); + }); + Object.defineProperty(this, 'savedValue', { + get: function () { + return JSON.parse(localStorage.getItem(this.localStorageKey)); + }, + set: function (val) { + this.save(val); } + }); + Object.defineProperty(this, 'isCurrent', { + get: function () { + return this.notesInput.value === this.savedValue; + } + }); + Object.defineProperty(this, 'oninput', { + get: function () { + return this.notesInput.oninput; + }, + set: function (fn) { + if (typeof fn !== 'function') { + throw new TypeError('oninput must be a function'); + } + this.notesInput.addEventListener('input', fn); + } + }); + + if (this.saveBtn && this.discardBtn) { + this.init(); } +}; - window.openAlertDialog = openAlertDialog; - window.discardInput = discardInput; -} +aria.Notes.prototype.save = function (val) { + if (this.alert && !this.isCurrent) { + aria.Utils.triggerAlert(this.alert, 'Saved'); + } + localStorage.setItem(this.localStorageKey, JSON.stringify(val || this.notesInput.value)); + aria.Utils.disableCtrl(this.saveBtn); +}; -document.addEventListener('DOMContentLoaded', initAlertDialog); +aria.Notes.prototype.loadSaved = function () { + if (this.savedValue) { + this.notesInput.value = this.savedValue; + } +}; + +aria.Notes.prototype.discard = function () { + localStorage.clear(); + this.notesInput.value = ''; + this.toggleCtrls(); +}; + +aria.Notes.prototype.disableCtrls = function () { + this.controls.forEach(aria.Utils.disableCtrl); +}; + +aria.Notes.prototype.enableCtrls = function () { + this.controls.forEach(aria.Utils.enableCtrl); +}; + +aria.Notes.prototype.toggleCtrls = function () { + if (this.hasContent) { + this.enableCtrls(); + } + else { + this.disableCtrls(); + } +}; + +aria.Notes.prototype.toggleCurrent = function () { + if (!this.isCurrent) { + this.notesInput.classList.remove('can-save'); + aria.Utils.enableCtrl(this.saveBtn); + } + else { + this.notesInput.classList.add('can-save'); + aria.Utils.disableCtrl(this.saveBtn); + } +}; + +aria.Notes.prototype.keydownHandler = function (e) { + var mod = (navigator.userAgent.includes('Mac')) ? e.metaKey : e.ctrlKey; + if (e.key === 's' & mod) { + e.preventDefault(); + this.save(); + } +}; + +aria.Notes.prototype.init = function () { + if (!this.initialized) { + this.loadSaved(); + this.toggleCurrent(); + this.saveBtn.addEventListener('click', this.save.bind(this, undefined)); + this.discardBtn.addEventListener('click', this.discard.bind(this)); + this.notesInput.addEventListener('input', this.toggleCtrls.bind(this)); + this.notesInput.addEventListener('input', this.toggleCurrent.bind(this)); + this.notesInput.addEventListener('keydown', this.keydownHandler.bind(this)); + this.initialized = true; + } +}; + +/** initialization */ +document.addEventListener('DOMContentLoaded', function initAlertDialog () { + var notes = new aria.Notes('notes', 'notes_save', 'notes_confirm'); + notes.alert = document.getElementById('alert_toast'); + + window.discardInput = function (closeBtn) { + notes.discard.call(notes); + closeDialog(closeBtn); + }; + + window.openAlertDialog = function (dialogId, triggerBtn, focusFirst) { + var target = document.getElementById(triggerBtn.getAttribute('aria-controls')); + var dialog = document.getElementById(dialogId); + var desc = document.getElementById(dialog.getAttribute('aria-describedby')); + var wordCount = document.getElementById('word_count'); + if (!wordCount) { + wordCount = document.createElement('p'); + wordCount.id = 'word_count'; + desc.appendChild(wordCount); + } + var count = target.value.split(/\s/).length; + var frag = (count > 1) ? 'words' : 'word'; + wordCount.textContent = count + ' ' + frag + ' will be deleted.'; + openDialog(dialogId, target, focusFirst); + }; +}); From 739c1ccdaffd489034b3af84a2d9e03fbcc4d68a Mon Sep 17 00:00:00 2001 From: Matt King Date: Sun, 24 Jun 2018 19:03:13 -0700 Subject: [PATCH 32/38] Alert Dialog Example: Fix inconsistencies with example template Modified examples/dialog-modal/alertdialog.html: * Remove header element from related links nav and fix aria-label * remove aria-labelledby from main * remove aria-labeledby from sections that turned them into regions --- examples/dialog-modal/alertdialog.html | 21 ++++++++++----------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/examples/dialog-modal/alertdialog.html b/examples/dialog-modal/alertdialog.html index f125e997dd..80080a8ec0 100644 --- a/examples/dialog-modal/alertdialog.html +++ b/examples/dialog-modal/alertdialog.html @@ -18,8 +18,7 @@ -
      -
      +

      Example

      @@ -81,8 +80,8 @@

      Confirmation

      -
      -

      Accessibility Features

      +
      +

      Accessibility Features

      Note that this example uses code from the modal dialog example to handle the behavior of the alertdialog. Referencing that example may also be useful. @@ -101,7 +100,7 @@

      Accessibility Features

      -
      +

      Keyboard Support

      @@ -144,7 +143,7 @@

      Keyboard Support

      -
      +

      Role, Property, State, and Tabindex Attributes

      @@ -217,14 +216,14 @@

      Notes on aria-modal and aria-hidden

      -
      +

      Javascript and CSS Source Code

      -
      +

      HTML Source Code

      From 07c33a2fbef4787dd4a8ba2c2ede145878ee15de Mon Sep 17 00:00:00 2001 From: Matt King Date: Sun, 24 Jun 2018 19:08:22 -0700 Subject: [PATCH 33/38] Alert Dialog Example: Make title tag consistent with H1 --- examples/dialog-modal/alertdialog.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/dialog-modal/alertdialog.html b/examples/dialog-modal/alertdialog.html index 80080a8ec0..73f6fb1b67 100644 --- a/examples/dialog-modal/alertdialog.html +++ b/examples/dialog-modal/alertdialog.html @@ -2,7 +2,7 @@ - Alert and Message Dialogs Example | WAI-ARIA Authoring Practices 1.1 + Alert Dialog Example | WAI-ARIA Authoring Practices 1.1 From e6de42cd904a3db0cfdd1a01d11d3152cde6b6fe Mon Sep 17 00:00:00 2001 From: Matt King Date: Sun, 24 Jun 2018 19:34:38 -0700 Subject: [PATCH 34/38] Alert Dialog Example: editorial revisions to introduction --- examples/dialog-modal/alertdialog.html | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/examples/dialog-modal/alertdialog.html b/examples/dialog-modal/alertdialog.html index 73f6fb1b67..d5ae98f62e 100644 --- a/examples/dialog-modal/alertdialog.html +++ b/examples/dialog-modal/alertdialog.html @@ -29,27 +29,27 @@

      Alert Dialog Example

      - The below example demonstrates the design pattern for an alert dialog. - The design pattern for an alert is also demonstrated to allow the user to experience the difference between the two patterns. + The below example of a confirmation prompt demonstrates the design pattern for an alert dialog. + It also includes an example of the design pattern for an alert to make comparing the experiences provided by the two patterns easy.

      -

      User interactions for this interactive include:

      +

      To use this example:

        -
      • The "notes" textarea contains editable text that you are encouraged to modify.
      • - The "discard" button triggers a confirmation dialog. + Activate the "discard" button to trigger a confirmation dialog.
          -
        • Clicking "yes" will remove all contents of both the notes field and the user's local storage
          • -
        • Clicking "no" or pressing escape will simply close the dialog.
          • -
        • The "discard" button is disabled if the notes field does not contain any text.
          • +
        • Activating the "yes" button removes the contents of both the "Notes" text area and local storage of the notes .
          • +
        • Activating the "no" button or pressing escape closes the dialog.
          • +
        • The "discard" button is disabled if the notes text area does not contain any text.
      • - The "save" button saves the contents of the "notes" textarea to your local storage. + Activate the "save" button to trigger an alert when it saves the contents of the "Notes" text area to local storage.
          -
        • A successful save will trigger a short [role="alert"] to notify you that your notes have been saved.
          • -
        • The "save" button is disabled if the user's local storage value is the same as the textarea value.
          • +
        • A successful save triggers a short alert to notify the user that the notes have been saved.
          • +
        • The "save" button is disabled if the user's local storage value is the same as the "Notes" field.
        • +
      • Modify the "notes" text area as needed to enable and disable the discard and save functions.

      Similar examples include:

        From 9b46b078b70f15677ea479332e7ee30aaebdea2a Mon Sep 17 00:00:00 2001 From: Matt King Date: Sun, 24 Jun 2018 19:46:13 -0700 Subject: [PATCH 35/38] Alert dialog example: fix URIs of similar examples and adjust link descriptions. --- examples/dialog-modal/alertdialog.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/dialog-modal/alertdialog.html b/examples/dialog-modal/alertdialog.html index d5ae98f62e..dac6825b88 100644 --- a/examples/dialog-modal/alertdialog.html +++ b/examples/dialog-modal/alertdialog.html @@ -53,8 +53,8 @@

        Alert Dialog Example

      Similar examples include:

        -
      • Alert: a basic alert.
        • -
      • Modal Dialog: an example of multiple modal dialogs.
        • +
      • Alert: a basic alert.
        • +
      • Modal Dialog Example: An example demonstrating multiple layers of modal dialogs with both small and large amounts of content.

      Example

      From b45a5e7e18574a50710ccafbb036bcb5ea07c801 Mon Sep 17 00:00:00 2001 From: Matt King Date: Sun, 24 Jun 2018 19:59:40 -0700 Subject: [PATCH 36/38] Alert Dialog Example: editorial revisions to accessibility features. --- examples/dialog-modal/alertdialog.html | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/examples/dialog-modal/alertdialog.html b/examples/dialog-modal/alertdialog.html index dac6825b88..b4ac195d16 100644 --- a/examples/dialog-modal/alertdialog.html +++ b/examples/dialog-modal/alertdialog.html @@ -51,6 +51,9 @@

      Alert Dialog Example

    • Modify the "notes" text area as needed to enable and disable the discard and save functions.
      • +

      + Note: This example uses code from the modal dialog example to create the behaviors of the alertdialog so referencing that example may be useful. +

      Similar examples include:

      • Alert: a basic alert.
        • @@ -82,21 +85,12 @@

        Confirmation

      Accessibility Features

      -

      - Note that this example uses code from the modal dialog example to handle the behavior of the alertdialog. - Referencing that example may also be useful. -

      1. The accessible label for the alert dialog is set to its heading ("Confirmation").
      2. The dialog's prompt ("Are you sure...?") is referenced via aria-describedby to ensure that the user is immediately aware of the prompt.
      3. Focus is automatically set to the first focusable element inside the dialog, which is the "No" button. - This is the least destructive action, and will prevent the user from accidentally confirming the dialog. -
        4. -
      4. The user can dismiss the dialog with Escape at any time, or by clicking the "No" button.
        5. -
      5. - Once the user has removed the contents of the notes textarea, clicking the "discard notes" button cannot do anything. - To communicate this to the user, an alert with role="alert" is triggered. + This is the least destructive action, so focusing "No" helps prevent users from accidentally confirming the destructive "Discard" action, which cannot be undone.
      From 0bc9ae3a5d69386523b37c527aead6f302cfb74d Mon Sep 17 00:00:00 2001 From: Matt King Date: Sun, 24 Jun 2018 20:19:00 -0700 Subject: [PATCH 37/38] Add link to review issue 736 --- examples/dialog-modal/alertdialog.html | 5 +++++ examples/dialog-modal/dialog.html | 4 ++++ 2 files changed, 9 insertions(+) diff --git a/examples/dialog-modal/alertdialog.html b/examples/dialog-modal/alertdialog.html index b4ac195d16..f2256a287e 100644 --- a/examples/dialog-modal/alertdialog.html +++ b/examples/dialog-modal/alertdialog.html @@ -28,6 +28,11 @@

      Alert Dialog Example

      +

      + NOTE: This is a new example. + Please provide feedback in + issue 736. +

      The below example of a confirmation prompt demonstrates the design pattern for an alert dialog. It also includes an example of the design pattern for an alert to make comparing the experiences provided by the two patterns easy. diff --git a/examples/dialog-modal/dialog.html b/examples/dialog-modal/dialog.html index 734e06f5eb..84c461e017 100644 --- a/examples/dialog-modal/dialog.html +++ b/examples/dialog-modal/dialog.html @@ -35,6 +35,10 @@

      Modal Dialog Example

      The below Add Delivery Address button opens a modal dialog that contains two buttons that open other dialogs. The accessibility features section explains the rationale for initial focus placement and use of aria-describedby in each dialog.

      +

      Similar examples include:

      +

      Example

      From 6c8ff4619f460bfc3c5dbffeb37776dd4784c139 Mon Sep 17 00:00:00 2001 From: Matt King Date: Sun, 24 Jun 2018 20:22:41 -0700 Subject: [PATCH 38/38] Alert Example: Add link to alert dialog --- examples/alert/alert.html | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/examples/alert/alert.html b/examples/alert/alert.html index f672c541c1..382cc322f1 100644 --- a/examples/alert/alert.html +++ b/examples/alert/alert.html @@ -30,6 +30,10 @@

      Alert Example

      The below example demonstrates the design pattern for alert. Activating the Trigger Alert button causes a message to be inserted into the example alert element.

      +

      Similar examples include:

      +

      Example