From 59da387c2bdf5fb8e276560ce0fecd4aefab12e4 Mon Sep 17 00:00:00 2001 From: Matt King Date: Sun, 14 Nov 2021 15:56:43 -0800 Subject: [PATCH 1/9] All Example Pages: Update aria-at information in support notice (#2136) In the disclosure with important notices at the top of every example page, provides link to the ARIA and Assistive Technology app home page instead of the aria-at repo and removes 2020 date. --- examples/js/notice.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/js/notice.html b/examples/js/notice.html index a53d688efb..749cd58e8a 100644 --- a/examples/js/notice.html +++ b/examples/js/notice.html @@ -15,8 +15,8 @@ Testing code based on this example with assistive technologies is essential before considering use in production systems.
  • - The ARIA-AT project - plans to provide measurements of this example's assistive technology support by the end of 2020. + The ARIA and Assistive Technologies Project + is developing measurements of assistive technology support for APG examples.
  • Robust accessibility can be further optimized by choosing implementation patterns that From 5f68a35747abf2b821d004ca1c28ceddda869665 Mon Sep 17 00:00:00 2001 From: Matt King Date: Sun, 14 Nov 2021 23:08:11 -0800 Subject: [PATCH 2/9] Editable Combobox Examples: Correct enter key documentation for the autocomplete none and list implementations (pull #2138) For combobox examples with autocomplete set to none or list, when focus is in the textbox, Enter key closes the listbox if it is open. This commit resolves #855 by updatings the documentation for the Enter key to be consistent with that behavior. --- examples/combobox/combobox-autocomplete-list.html | 2 +- examples/combobox/combobox-autocomplete-none.html | 7 +------ 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/examples/combobox/combobox-autocomplete-list.html b/examples/combobox/combobox-autocomplete-list.html index 3263a5faf5..8fc38e76b9 100644 --- a/examples/combobox/combobox-autocomplete-list.html +++ b/examples/combobox/combobox-autocomplete-list.html @@ -203,7 +203,7 @@

    Textbox

    Enter - Closes the listbox. + Closes the listbox if it is displayed. Escape diff --git a/examples/combobox/combobox-autocomplete-none.html b/examples/combobox/combobox-autocomplete-none.html index 21718615e4..a38ba49d2e 100644 --- a/examples/combobox/combobox-autocomplete-none.html +++ b/examples/combobox/combobox-autocomplete-none.html @@ -156,12 +156,7 @@

    Textbox

    Enter - -
      -
    • Sets the textbox value to the content of the selected option.
      • -
    • Closes the listbox if it is displayed.
      • -
    - + Closes the listbox if it is displayed. Standard single line text editing keys From 6d5c4956c7d1ea49e168e66fb8037eb1436f9b3f Mon Sep 17 00:00:00 2001 From: Matt King Date: Sun, 14 Nov 2021 23:31:54 -0800 Subject: [PATCH 3/9] Combobox example with grid popup: Correct documentation of aria-selected (pull #2139) Resolves issue #859 by clarifying that the grid cell is the element that has aria-selected specified. --- examples/combobox/grid-combo.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/combobox/grid-combo.html b/examples/combobox/grid-combo.html index ec3138e52f..1c43d05dce 100644 --- a/examples/combobox/grid-combo.html +++ b/examples/combobox/grid-combo.html @@ -370,7 +370,7 @@

    Grid Popup

    div
      -
    • Specified on a row in the grid when it is visually indicated as selected.
      • +
    • Specified on a cell when the row containing the cell is visually indicated as selected.
    • Occurs only when a cell in the grid is referenced by aria-activedescendant.
    From 0c742385971da18a17ac6db9f52769f4944f1f46 Mon Sep 17 00:00:00 2001 From: Howard Edwards Date: Mon, 15 Nov 2021 12:16:20 -0500 Subject: [PATCH 4/9] Alert Dialog Example: Use icon and button description to reflect save status instead of toast alert (pull #2112) Resolves issue #756 with the following changes to the alert dialog example: * Remove toast alert that appeared when Save is pressed; replace with visual indicator on button that save is successful. * Use an off-screen alert to notify screen reader users of successful save. * Use aria-disabled instead of disabled attribute so save and discard buttons can be focusable when they are disabled, enabling screen reader users to more easily discern the state of the experience. Co-authored-by: Sarah Higley Co-authored-by: Matt King --- examples/dialog-modal/alertdialog.html | 58 ++++++++++------ examples/dialog-modal/css/dialog.css | 56 +++++++++++---- examples/dialog-modal/js/alertdialog.js | 91 ++++++++++++++++--------- examples/index.html | 1 + 4 files changed, 137 insertions(+), 69 deletions(-) diff --git a/examples/dialog-modal/alertdialog.html b/examples/dialog-modal/alertdialog.html index 52931bb8cc..4aab7e6612 100644 --- a/examples/dialog-modal/alertdialog.html +++ b/examples/dialog-modal/alertdialog.html @@ -35,15 +35,14 @@

    Alert Dialog Example

    To use this example:

    • - Activate the "discard" button to trigger a confirmation dialog. + Activate the "discard" button to trigger a confirmation dialog that has the alertdialog role.
        -
      • Activating the "yes" button removes the contents of both the "Notes" text area and local storage of the notes.
        • +
      • Activating the "yes" button in the confirmation dialog 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.
      • -
    • - Activate the "save" button to trigger an alert when it saves the contents of the "Notes" text area to local storage. +
    • Activate the "save" button to trigger an alert when the contents of the "Notes" text area is saved to local storage.
      • 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.
        • @@ -68,9 +67,17 @@

        Example

        - - - + + +
        - +
        @@ -88,14 +95,18 @@

        Confirmation

        Accessibility Features

        -
          -
        1. The accessible label for the alert dialog is set to its heading ("Confirmation").
          2. +
            +
          • The accessible name of 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, so focusing "No" helps prevent users from accidentally confirming the destructive "Discard" action, which cannot be undone.
            • -
        +
      • + When the buttons are disabled, aria-disabled is used instead of the HTML disabled attribute so the buttons will remain in the page Tab sequence. + This makes it easier for screen reader users to discover the buttons and discern how the interface works. +
        • +

      Keyboard Support

      @@ -162,7 +173,7 @@

      Role, Property, State, and Tabindex Attributes

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

      Role, Property, State, and Tabindex Attributes

      - aria-describedby=IDREF + aria-describedby="ID_REFERENCE" div 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. @@ -178,7 +189,7 @@

      Role, Property, State, and Tabindex Attributes

      - aria-modal=true + aria-modal="true" div Tells assistive technologies that the windows underneath the current alert dialog are not available for interaction (inert). @@ -192,26 +203,31 @@

      Role, Property, State, and Tabindex Attributes

      Identifies the element that serves as the alert notification. + + + aria-disabled="true" + button + Tells assistive technology users the button cannot be activated. +

      Notes on aria-modal and aria-hidden

      -
        +
        • The aria-modal property was introduced in ARIA 1.1. - As a new property, screen reader users may experience varying degrees of support for it. + As a relatively new property, screen reader users may experience varying degrees of support for it.
        • - Applying the aria-modal property to the dialog element - replaces the technique of using aria-hidden on the background for informing assistive technologies that content outside a dialog is inert. + Applying the aria-modal property to the dialog element replaces the technique of using aria-hidden on the background for informing assistive technologies that content outside a dialog is inert.
        • In legacy dialog implementations where aria-hidden is used to make content outside a dialog inert for assistive technology users, it is important that: -
            +
            • aria-hidden is set to true on each element containing a portion of the inert layer.
            • The dialog element is not a descendant of any element that has aria-hidden set to true.
              • -
          +
        -
      +

    Javascript and CSS Source Code

    diff --git a/examples/dialog-modal/css/dialog.css b/examples/dialog-modal/css/dialog.css index bf079d8a1a..3275283510 100644 --- a/examples/dialog-modal/css/dialog.css +++ b/examples/dialog-modal/css/dialog.css @@ -146,20 +146,48 @@ width: 33%; } -.toast { - background-color: rgb(0 0 0 / 90%); - color: #fff; - padding: 1rem; - border: none; - border-radius: 0.25rem; - box-shadow: 0 3px 6px rgb(0 0 0 / 16%), 0 3px 6px rgb(0 0 0 / 23%); - position: fixed; - top: 1rem; - right: 1rem; - transform: translateY(-150%); - transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1); +.visually-hidden { + border: 0; + clip: rect(0 0 0 0); + height: auto; + margin: 0; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + white-space: nowrap; +} + +#notes_save { + display: inline-flex; + align-items: center; + gap: 0.5rem; } -.toast.active { - transform: translateY(0); +#notes_save svg { + display: block; + width: 0.75rem; +} + +#notes_save .icon { + display: none; +} + +@keyframes rotate { + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(360deg); + } +} + +#notes_save.loading .spinner { + display: block; + animation: rotate 2s linear infinite; +} + +#notes_save.saved .check { + display: block; } diff --git a/examples/dialog-modal/js/alertdialog.js b/examples/dialog-modal/js/alertdialog.js index 42723f3970..72f3e752f5 100644 --- a/examples/dialog-modal/js/alertdialog.js +++ b/examples/dialog-modal/js/alertdialog.js @@ -7,43 +7,45 @@ var aria = aria || {}; aria.Utils = aria.Utils || {}; aria.Utils.disableCtrl = function (ctrl) { - ctrl.setAttribute('disabled', true); + ctrl.setAttribute('aria-disabled', 'true'); }; aria.Utils.enableCtrl = function (ctrl) { - ctrl.removeAttribute('disabled'); + ctrl.removeAttribute('aria-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 () { - 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.Utils.setLoading = function (saveBtn, saveStatusView) { + saveBtn.classList.add('loading'); + this.disableCtrl(saveBtn); + + // use a timeout for the loading message + // if the saved state happens very quickly, + // we don't need to explicitly announce the intermediate loading state + const loadingTimeout = window.setTimeout(() => { + saveStatusView.textContent = 'Loading'; + }, 200); + + // set timeout for saved state, to mimic loading + const fakeLoadingTimeout = Math.random() * 2000; + window.setTimeout(() => { + saveBtn.classList.remove('loading'); + saveBtn.classList.add('saved'); + + window.clearTimeout(loadingTimeout); + saveStatusView.textContent = 'Saved successfully'; + }, fakeLoadingTimeout); }; -aria.Notes = function Notes(notesId, saveId, discardId, localStorageKey) { +aria.Notes = function Notes( + notesId, + saveId, + saveStatusId, + discardId, + localStorageKey +) { this.notesInput = document.getElementById(notesId); this.saveBtn = document.getElementById(saveId); + this.saveStatusView = document.getElementById(saveStatusId); this.discardBtn = document.getElementById(discardId); this.localStorageKey = localStorageKey || 'alertdialog-notes'; this.initialized = false; @@ -51,7 +53,7 @@ aria.Notes = function Notes(notesId, saveId, discardId, localStorageKey) { Object.defineProperty(this, 'controls', { get: function () { return document.querySelectorAll( - '[aria-controls=' + this.notesInput.id + ']' + '[data-textbox=' + this.notesInput.id + ']' ); }, }); @@ -91,14 +93,16 @@ aria.Notes = function Notes(notesId, saveId, discardId, localStorageKey) { }; aria.Notes.prototype.save = function (val) { - if (this.alert && !this.isCurrent) { - aria.Utils.triggerAlert(this.alert, 'Saved'); + const isDisabled = this.saveBtn.getAttribute('aria-disabled') === 'true'; + if (isDisabled) { + return; } localStorage.setItem( this.localStorageKey, JSON.stringify(val || this.notesInput.value) ); aria.Utils.disableCtrl(this.saveBtn); + aria.Utils.setLoading(this.saveBtn, this.saveStatusView); }; aria.Notes.prototype.loadSaved = function () { @@ -107,10 +111,19 @@ aria.Notes.prototype.loadSaved = function () { } }; +aria.Notes.prototype.restoreSaveBtn = function () { + this.saveBtn.classList.remove('loading'); + this.saveBtn.classList.remove('saved'); + this.saveBtn.removeAttribute('aria-disabled'); + + this.saveStatusView.textContent = ''; +}; + aria.Notes.prototype.discard = function () { localStorage.clear(); this.notesInput.value = ''; this.toggleControls(); + this.restoreSaveBtn(); }; aria.Notes.prototype.disableControls = function () { @@ -133,6 +146,7 @@ aria.Notes.prototype.toggleCurrent = function () { if (!this.isCurrent) { this.notesInput.classList.remove('can-save'); aria.Utils.enableCtrl(this.saveBtn); + this.restoreSaveBtn(); } else { this.notesInput.classList.add('can-save'); aria.Utils.disableCtrl(this.saveBtn); @@ -162,8 +176,12 @@ aria.Notes.prototype.init = function () { /** initialization */ document.addEventListener('DOMContentLoaded', function initAlertDialog() { - var notes = new aria.Notes('notes', 'notes_save', 'notes_confirm'); - notes.alert = document.getElementById('alert_toast'); + var notes = new aria.Notes( + 'notes', + 'notes_save', + 'notes_save_status', + 'notes_confirm' + ); window.discardInput = function (closeBtn) { notes.discard.call(notes); @@ -171,8 +189,13 @@ document.addEventListener('DOMContentLoaded', function initAlertDialog() { }; window.openAlertDialog = function (dialogId, triggerBtn, focusFirst) { + // do not proceed if the trigger button is disabled + if (triggerBtn.getAttribute('aria-disabled') === 'true') { + return; + } + var target = document.getElementById( - triggerBtn.getAttribute('aria-controls') + triggerBtn.getAttribute('data-textbox') ); var dialog = document.getElementById(dialogId); var desc = document.getElementById(dialog.getAttribute('aria-describedby')); diff --git a/examples/index.html b/examples/index.html index 6ee05ca274..2852c949da 100644 --- a/examples/index.html +++ b/examples/index.html @@ -567,6 +567,7 @@

    Examples By Properties and States

    aria-disabled From c3c91de6cab9aa107d586b281f6cffbbe398198a Mon Sep 17 00:00:00 2001 From: Matt King Date: Mon, 15 Nov 2021 12:16:27 -0800 Subject: [PATCH 5/9] Checkbox Examples: Update links and descriptions (pull #2144) Fixes broken links from main document to checkbox example pages and updates the descriptions of the links. --- aria-practices.html | 6 +++--- examples/checkbox/checkbox-mixed.html | 2 +- examples/checkbox/checkbox.html | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/aria-practices.html b/aria-practices.html index 6da9f30226..00122df577 100644 --- a/aria-practices.html +++ b/aria-practices.html @@ -675,11 +675,11 @@

    Checkbox

    Examples

    diff --git a/examples/checkbox/checkbox-mixed.html b/examples/checkbox/checkbox-mixed.html index 925b12e5de..118df68f91 100644 --- a/examples/checkbox/checkbox-mixed.html +++ b/examples/checkbox/checkbox-mixed.html @@ -34,7 +34,7 @@

    Checkbox Example (Mixed-State)

    Similar examples include:

    diff --git a/examples/checkbox/checkbox.html b/examples/checkbox/checkbox.html index c264a125e5..6f7fb7774a 100644 --- a/examples/checkbox/checkbox.html +++ b/examples/checkbox/checkbox.html @@ -29,7 +29,7 @@

    Checkbox Example (Two State)

    Similar examples include:

      -
    • Checkbox (Mixed-State): Mixed state checkbox controlling standard input checkboxes.
      • +
    • Checkbox (Mixed-State): Demonstrates a checkbox that uses the mixed value for aria-checked to reflect and control checked states within a group of two-state HTML checkboxes contained in an HTML fieldset.
    From 1c89267e78f37067b61d412c0e10742f74987a2a Mon Sep 17 00:00:00 2001 From: Kim Doberstein Date: Mon, 15 Nov 2021 14:33:19 -0600 Subject: [PATCH 6/9] File Viewer Tree Examples: Add aria-selected (pull #1869) Resolves #1680 with the following changes to the two file viewer tree examples: * Sets aria-selected to true when enter or space key is pressed or when the item is clicked. * Removes enter and space key behavior of expanding and collapsing parent nodes. * Sets aria-selected to false for all other nodes. * Improves visual indication of focus and selection. * Change name of tree to "My Documents" to make a bit more realistic. * Updates introduction, keyboard documentation, and states and properties documentation. Co-authored-by: Simon Pieters Co-authored-by: Howard Edwards Co-authored-by: Matt King --- examples/index.html | 2 + examples/treeview/treeview-1/css/tree.css | 22 +- examples/treeview/treeview-1/js/tree.js | 9 + examples/treeview/treeview-1/js/treeitem.js | 27 +- examples/treeview/treeview-1/treeview-1a.html | 191 ++-- examples/treeview/treeview-1/treeview-1b.html | 858 ++++++++++-------- test/tests/treeview_treeview-1a.js | 150 ++- test/tests/treeview_treeview-1b.js | 152 ++-- 8 files changed, 828 insertions(+), 583 deletions(-) diff --git a/examples/index.html b/examples/index.html index 2852c949da..efa8784972 100644 --- a/examples/index.html +++ b/examples/index.html @@ -818,6 +818,8 @@

    Examples By Properties and States

  • Scrollable Listbox
  • Tabs with Automatic Activation
  • Tabs with Manual Activation
    • +
  • File Directory Treeview Using Computed Properties
    • +
  • File Directory Treeview Using Declared Properties
    • diff --git a/examples/treeview/treeview-1/css/tree.css b/examples/treeview/treeview-1/css/tree.css index b615369e17..19fe295dd0 100644 --- a/examples/treeview/treeview-1/css/tree.css +++ b/examples/treeview/treeview-1/css/tree.css @@ -5,6 +5,20 @@ ul[role="tree"] { font-size: 120%; } +ul[role="tree"] li { + margin: 0; + padding: 0; + list-style: none; +} + +[role="treeitem"][aria-expanded="false"] + [role="group"] { + display: none; +} + +[role="treeitem"][aria-expanded="true"] + [role="group"] { + display: block; +} + [role="treeitem"].doc::before { font-family: "Font Awesome 5 Free"; content: "\f15c"; @@ -45,7 +59,6 @@ ul[role="tree"] { width: 9em; margin: 0; padding: 0.125em; - border: 2px transparent solid; display: block; } @@ -55,6 +68,11 @@ ul[role="tree"] { outline: 0; } +[role="treeitem"][aria-selected="true"] { + padding-left: 4px; + border-left: 5px solid #005a9c; +} + [role="treeitem"].focus, [role="treeitem"] span.focus { border-color: black; @@ -63,5 +81,7 @@ ul[role="tree"] { [role="treeitem"].hover, [role="treeitem"] span:hover { + padding-left: 4px; background-color: #ddd; + border-left: 5px solid #333; } diff --git a/examples/treeview/treeview-1/js/tree.js b/examples/treeview/treeview-1/js/tree.js index e1caec4d06..7609da941d 100644 --- a/examples/treeview/treeview-1/js/tree.js +++ b/examples/treeview/treeview-1/js/tree.js @@ -52,6 +52,7 @@ var Tree = function (node) { this.firstTreeitem = null; this.lastTreeitem = null; + this.selectedItem = null; }; Tree.prototype.init = function () { @@ -87,6 +88,14 @@ Tree.prototype.init = function () { this.firstTreeitem.domNode.tabIndex = 0; }; +Tree.prototype.setSelectedToItem = function (treeitem) { + if (this.selectedItem) { + this.selectedItem.domNode.setAttribute('aria-selected', 'false'); + } + treeitem.domNode.setAttribute('aria-selected', 'true'); + this.selectedItem = treeitem; +}; + Tree.prototype.setFocusToItem = function (treeitem) { for (var i = 0; i < this.treeitems.length; i++) { var ti = this.treeitems[i]; diff --git a/examples/treeview/treeview-1/js/treeitem.js b/examples/treeview/treeview-1/js/treeitem.js index 1f1a348b65..4a8f7564d6 100644 --- a/examples/treeview/treeview-1/js/treeitem.js +++ b/examples/treeview/treeview-1/js/treeitem.js @@ -100,10 +100,8 @@ Treeitem.prototype.isExpanded = function () { /* EVENT HANDLERS */ Treeitem.prototype.handleKeydown = function (event) { - var tgt = event.currentTarget, - flag = false, - char = event.key, - clickEvent; + var flag = false, + char = event.key; function isPrintableCharacter(str) { return str.length === 1 && str.match(/\S/); @@ -131,16 +129,18 @@ Treeitem.prototype.handleKeydown = function (event) { } } else { switch (event.keyCode) { - case this.keyCode.SPACE: case this.keyCode.RETURN: - // Create simulated mouse event to mimic the behavior of ATs - // and let the event handler handleClick do the housekeeping. - clickEvent = new MouseEvent('click', { - view: window, - bubbles: true, - cancelable: true, - }); - tgt.dispatchEvent(clickEvent); + case this.keyCode.SPACE: + var treeitem = event.currentTarget; + var label = treeitem.getAttribute('aria-label'); + if (!label) { + var child = treeitem.firstElementChild; + label = child ? child.innerText : treeitem.innerText; + } + document.getElementById('last_action').value = label.trim(); + + if (!this.isExpandable) this.tree.setFocusToItem(this); + this.tree.setSelectedToItem(this); flag = true; break; @@ -212,6 +212,7 @@ Treeitem.prototype.handleClick = function (event) { } else { this.tree.setFocusToItem(this); } + this.tree.setSelectedToItem(this); }; Treeitem.prototype.handleFocus = function () { diff --git a/examples/treeview/treeview-1/treeview-1a.html b/examples/treeview/treeview-1/treeview-1a.html index df94dc2a0d..bcc379c240 100644 --- a/examples/treeview/treeview-1/treeview-1a.html +++ b/examples/treeview/treeview-1/treeview-1a.html @@ -33,87 +33,92 @@

    File Directory Treeview Example Using Computed Properties

    - The below example implements the - Treeview Design Pattern - to simulate a file selector. - When users activate an item that represents a file name in the below tree, the name of the selected file appears in the read-only edit field next to the tree. + The following example implementation of the + Tree View Design Pattern + simulates a widget for selecting a file or folder from within a hierarchical file system for viewing in a file viewer. + In the My Documents tree, each parent node represents a folder and each end node represents a file. + Activating a node selects the node and puts the name of the folder or file in the read-only edit field that represents the file viewer.

    This example relies on the browser to compute values for aria-setsize, aria-posinset, and aria-level. - The ARIA 1.0 specification for these properties states that browsers can, but are not required to, compute their values. + The ARIA specification for these properties states that browsers can, but are not required to, compute their values. So, some browser and assistive technology combinations may not compute or report correct position and level information if it is not explicitly declared. If testing reveals gaps in support for these properties, override automatic computation by explicitly declaring their values as demonstrated in the example of a File Directory Treeview using declared properties. -

    +

    Similar examples include:

    -
    -
    -

    Example

    -
    + +
    +
    +

    Example

    +
    -

    - File Viewer +

    + My Documents

    - +

    @@ -260,7 +273,7 @@

    Accessibility Features

    - To make the focus indicator easier to see, nodes in the tree have a custom focus and hover styling created using CSS focus and hover pseudo-classes. + To make the focus indicator easier to see, nodes in the tree have custom focus and hover styling created using CSS focus and hover pseudo-classes.

    @@ -277,6 +290,11 @@

    Terms Used to Describe Trees

    Keyboard Support

    +

    + Note that in this example, selection and focus are distinct; moving focus does not change which node is selected. + Because selection does not follow focus, keyboard and screen reader users can navigate and explore the tree without changing the content of the file viewer. + To learn more about this aspect of the design, read the guidance section about Deciding When to Make Selection Automatically Follow Focus. +

    @@ -285,14 +303,13 @@

    Keyboard Support

    - - - + + + + + + + @@ -363,7 +380,7 @@

    Keyboard Support
    Enter
    or Space    		 -
      -
    • Performs the default action (e.g. onclick event) for the focused node.
      • -
    • In this example, the default action is to update the File or Folder Selected textbox.
      • -
    -
    EnterPerforms the default action, which is to select the node, causing the name of the node to appear in the File or Folder Selected textbox.
    SpacePerforms the default action, which is to select the node, causing the name of the node to appear in the File or Folder Selected textbox.
    Down arrow
    -
    +

    Role, Property, State, and Tabindex Attributes

    @@ -394,7 +411,7 @@

    Role, Property, State, and Tabindex Attributes

    - aria-labelledby="IDREF" + aria-labelledby="ID_REFERENCE" ul Refers to the heading element that contains the label that identifies the purpose of the tree. @@ -406,7 +423,7 @@

    Role, Property, State, and Tabindex Attributes

    - tabindex="-1" + tabindex="-1" li
      @@ -417,12 +434,12 @@

      Role, Property, State, and Tabindex Attributes

      - tabindex="0" + tabindex="0" li
      • Includes the treeitem element in the tab sequence.
        • -
      • Only one treeitem in the tree has tabindex="0".
        • +
      • Only one treeitem in the tree has tabindex="0".
      • In this implementation, the first treeitem in the tree is included in the tab sequence when the page loads.
      • When the user moves focus in the tree, the element included in the tab sequence changes to the element with focus as described in the section on @@ -433,7 +450,7 @@

        Role, Property, State, and Tabindex Attributes

        - aria-expanded="false" + aria-expanded="false" li
          @@ -445,7 +462,7 @@

          Role, Property, State, and Tabindex Attributes

          - aria-expanded="true" + aria-expanded="true" li
            @@ -455,6 +472,28 @@

            Role, Property, State, and Tabindex Attributes

          + + + aria-selected="false" + li + +
            +
          • Applied to treeitem elements.
            • +
          • Indicates the file or folder for the item is not currently selected.
            • +
          + + + + + aria-selected="true" + li + +
            +
          • Applied to treeitem elements.
            • +
          • Indicates the file or folder for the item is currently selected.
            • +
          + + group @@ -464,15 +503,15 @@

          Role, Property, State, and Tabindex Attributes

        • Identifies the ul element as a container of treeitem elements that form a branch of the tree.
        • The group is contained in the element that serves as the parent treeitem.
        • Browsers use the grouping to compute aria-level, aria-setsize and aria-posinset values for the nodes contained in the branch.
          • +
        • The grouping also prevents browsers from including the content of the nodes in the group in the accessible name for the parent node.
        -
    -
    +

    Javascript and CSS Source Code

    • diff --git a/examples/treeview/treeview-1/treeview-1b.html b/examples/treeview/treeview-1/treeview-1b.html index 4cc681a4fd..36e2b55fcc 100644 --- a/examples/treeview/treeview-1/treeview-1b.html +++ b/examples/treeview/treeview-1/treeview-1b.html @@ -12,6 +12,9 @@ + + @@ -28,15 +31,16 @@

      File Directory Treeview Example Using Declared Properties

      - The below example implements the - Treeview Design Pattern - to simulate a file selector. - When users activate an item that represents a file name in the below tree, the name of the selected file appears in the read-only edit field next to the tree. + The following example implementation of the + Tree View Design Pattern + simulates a widget for selecting a file or folder from within a hierarchical file system for viewing in a file viewer. + In the My Documents tree, each parent node represents a folder and each end node represents a file. + Activating a node selects the node and puts the name of the folder or file in the read-only edit field that represents the file viewer.

      The code in this example explicitly declares values for aria-setsize, aria-posinset and aria-level, which overrides browser computation of values for these properties. - The ARIA 1.0 specification for these properties states that browsers can, but are not required to, compute these values. -

      + The ARIA specification for these properties states that browsers can, but are not required to, compute these values. +

      Similar examples include:

    -

    File Viewer

    -
      - - - -
    -

    +

    My Documents

    +
      + + + +
    +

    @@ -418,7 +467,7 @@

    File Viewer

    Accessibility Features

    - To make the focus indicator easier to see, nodes in the tree have a custom focus and hover styling created using CSS focus and hover pseudo-classes. + To make the focus indicator easier to see, nodes in the tree have custom focus and hover styling created using CSS focus and hover pseudo-classes.

    @@ -435,6 +484,11 @@

    Terms Used to Describe Trees

    Keyboard Support

    +

    + Note that in this example, selection and focus are distinct; moving focus does not change which node is selected. + Because selection does not follow focus, keyboard and screen reader users can navigate and explore the tree without changing the content of the file viewer. + To learn more about this aspect of the design, read the guidance section about Deciding When to Make Selection Automatically Follow Focus. +

    @@ -443,14 +497,13 @@

    Keyboard Support

    - - - + + + + + + + @@ -552,7 +605,7 @@

    Role, Property, State, and Tabindex Attributes

    - + @@ -564,7 +617,7 @@

    Role, Property, State, and Tabindex Attributes

    - + - + - + - + + + + + + + + + + + + + - + - + - + @@ -650,16 +725,16 @@

    Role, Property, State, and Tabindex Attributes

    • Identifies the ul element as a container of treeitem elements that form a branch of the tree.
    • The group is contained in the element that serves as the parent treeitem.
      • -
    • Browsers use the grouping to compute aria-level, aria-setsize and aria-posinset values for the nodes contained in the branch.
      • +
    • Browsers use the grouping to compute aria-level, aria-setsize and aria-posinset values for the nodes contained in the branch if those properties are not specified explicitly in the code.
      • +
    • The grouping also prevents browsers from including the content of the nodes in the group in the accessible name for the parent node.
    Enter
    or Space    		 -
      -
    • Performs the default action (e.g. onclick event) for the focused node.
      • -
    • In this example, the default action is to update the File or Folder Selected textbox.
      • -
    -
    EnterPerforms the default action, which is to select the node, causing the name of the node to appear in the File or Folder Selected textbox.
    SpacePerforms the default action, which is to select the node, causing the name of the node to appear in the File or Folder Selected textbox.
    Down arrow
    aria-labelledby="IDREF"aria-labelledby="ID_REFERENCE" ul Refers to the heading element that contains the label that identifies the purpose of the tree.
    tabindex="-1"tabindex="-1" li
      @@ -575,12 +628,12 @@

      Role, Property, State, and Tabindex Attributes

    tabindex="0"tabindex="0" li
    • Includes the treeitem element in the tab sequence.
      • -
    • Only one treeitem in the tree has tabindex="0".
      • +
    • Only one treeitem in the tree has tabindex="0".
    • In this implementation, the first treeitem in the tree is included in the tab sequence when the page loads.
    • When the user moves focus in the tree, the element included in the tab sequence changes to the element with focus as described in the section on @@ -591,7 +644,7 @@

      Role, Property, State, and Tabindex Attributes

    aria-expanded="false"aria-expanded="false" li
      @@ -603,7 +656,7 @@

      Role, Property, State, and Tabindex Attributes

    aria-expanded="true"aria-expanded="true" li
      @@ -613,15 +666,37 @@

      Role, Property, State, and Tabindex Attributes
    aria-selected="false"li +
      +
    • Applied to treeitem elements.
      • +
    • Indicates the file or folder for the item is not currently selected.
      • +
    +
    aria-selected="true"li +
      +
    • Applied to treeitem elements.
      • +
    • Indicates the file or folder for the item is currently selected.
      • +
    +
    aria-setsize="number"aria-setsize="number" li Defines the number of treeitem elements in the set of treeitem elements that are in the same branch and at the same level within the hierarchy.
    aria-posinset="number"aria-posinset="number" li
      @@ -632,13 +707,13 @@

      Role, Property, State, and Tabindex Attributes

    aria-level="number"aria-level="number" li
    • Defines the level of the treeitem in the hierarchical tree structure.
    • Counting is one-based.
      • -
    • Root treeitem elements have aria-level=1.
      • +
    • Root treeitem elements have aria-level="1".
    -
    -
    +

    Javascript and CSS Source Code

    • @@ -686,7 +761,6 @@

      HTML Source Code

      - - - - - - - - - -
    -

    Editor Menubar Example

    -

    - The following example demonstrates using the - menubar design pattern - to provide access to sets of actions. - Each item in the below menubar identifies a category of text formatting actions that can be executed from its submenu. - The submenus also demonstrate menuitemradio and menuitemcheckbox elements. -

    -

    Similar examples include:

    - +

    Editor Menubar Example

    +

    + The following example demonstrates using the + menubar design pattern + to provide access to editing actions for a text area. + Each item in the menubar identifies a category of text formatting actions that can be executed from its submenu. + The submenus demonstrate menuitemradio and menuitemcheckbox elements. +

    +

    Similar examples include:

    +
      +
    • Toolbar Example: A text formatting toolbar that uses roving tabindex to manage focus and contains several types of controls, including toggle buttons, radio buttons, a menu button, a spin button, a checkbox, and a link.
      • +
    • Navigation Menubar Example: A menubar that presents site navigation menus.
      • +
    -

    Example

    +
    +

    Example

    +
    • - +
        -
      • Sans-serif
        • -
      • Serif
        • -
      • Monospace
        • -
      • Fantasy
        • +
      • Sans-serif
        • +
      • Serif
        • +
      • Monospace
        • +
      • Fantasy
    • - +
        • -
        • Bold
          • -
        • Italic
          • +
        • Bold
          • +
        • Italic
        • -
        • Black
          • -
        • Blue
          • -
        • Red
          • -
        • Green
          • +
        • Black
          • +
        • Blue
          • +
        • Red
          • +
        • Green
        • -
        • None
          • -
        • Overline
          • -
        • Line-through
          • -
        • Underline
          • +
        • None
          • +
        • Overline
          • +
        • Line-through
          • +
        • Underline
    • - +
        -
      • Left
        • -
      • Center
        • -
      • Right
        • -
      • Justify
        • +
      • Left
        • +
      • Center
        • +
      • Right
        • +
      • Justify
    • - +
      • Smaller
      • Larger
        • -
        • X-Small
          • -
        • Small
          • -
        • Medium
          • -
        • Large
          • -
        • X-Large
          • +
        • X-Small
          • +
        • Small
          • +
        • Medium
          • +
        • Large
          • +
        • X-Large
      @@ -144,26 +138,30 @@

      Example

      Accessibility Features

      -
        -
      1. Users of assistive technologies can identify which format settings are selected because they are represented by menu item radio and menu item checkbox elements that have a checked state.
        2. -
      2. Disabled menu items are demonstrated in the font size menu, which includes two disabled menuitems.
        3. +
          +
        • + Disabled menu items are demonstrated in the font size menu. + If the font is set to its smallest size, the Smaller menu item is disabled. + Similarly, if the font is set to its largest size, the Larger menu item is disabled. +
          • +
        • Users of assistive technologies can identify the currently active format options because they are represented by menu item radio and menu item checkbox elements that have a checked state.
          • +
        • To prevent the character entities that visually represent The down arrow and checked icons from being announced by screen readers, they are hidden from the accessible name computation with the aria-hidden attribute.
        • To help communicate that the arrow keys are available for directional navigation within the menubar and its submenus, a border is added to the menubar container when focus is within the menubar.
          • -
        • To support operating system high contrast settings, focus is highlighted by adding and removing a border around the menu item with focus.
          • -
        • The down arrow and checked icons are made compatible with operating system high contrast settings and hidden from screen readers by using the CSS content property to render images.
        • - Like desktop menubars, submenus open on mouse hover over a parent item in the menubar only if another submenu is already open. + Like most desktop menubars, submenus open on mouse hover over a parent item in the menubar only if another submenu is already open. That is, if all submenus are closed, a click on a parent menu item is required to display a submenu. - Minimizing automatic popups makes exploring with a screen magnifier easier. + Minimizing automatic popups triggered by hover makes exploring with a screen magnifier easier.
        • In general, moving focus in response to mouse hover is avoided in accessible widgets; it causes unexpected context changes for keyboard users. However, like desktop menubars, there are two conditions in this example menubar where focus moves in response to hover in order to help maintain context for users who use both keyboard and mouse: -
            +
            • After a parent menu item in the menubar has been activated and the user hovers over a different parent item in the menubar, focus will follow hover.
            • When a submenu is open and the user hovers over an item in the submenu, focus follows hover.
              • -
          +
        -
      +
    • To support operating system high contrast settings, focus is highlighted by adding and removing a border around the menu item with focus.
      • +
    @@ -415,7 +413,7 @@

    Menubar

    - tabindex="-1" + tabindex="-1" span @@ -428,7 +426,7 @@

    Menubar

    - tabindex="0" + tabindex="0" span @@ -440,10 +438,10 @@

    Menubar

    part of the tab sequence of the page.
  • - Only one menuitem in the menubar has tabindex="0". + Only one menuitem in the menubar has tabindex="0".
  • - When the page loads, the first item in the menubar has tabindex="0". + When the page loads, the first item in the menubar has tabindex="0".
  • Focus is managed using roving tabindex. @@ -454,7 +452,7 @@

    Menubar

    - aria-haspopup="true" + aria-haspopup="true" span @@ -466,299 +464,349 @@

    Menubar

    - aria-expanded="true" + aria-expanded="true" span - Indicates the menu is open. + + + - aria-expanded="false" + aria-expanded="false" + + + span + + + + + + + + + aria-hidden="true" span - Indicates the submenu is closed. + + Removes the character entities used to represent the down arrow icons for parent menu items from the accessibility tree to prevent them from being included in the accessible name of the menu item. +

    Submenu

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    RoleAttributeElementUsage
    - menu - - ul - -
      -
    • Identifies the element as a menu container for a set of menu items.
      • -
    • Is not focusable because focus is managed using roving tabindex.
      • -
    -
    - aria-label="string" - - ul - - Defines an accessible name for the menu. -
    - menuitem - - li - -
      -
    • Identifies the element as an item in the submenu.
      • -
    • Accessible name comes from the text content.
      • -
    -
    - tabindex="-1" - - li - - Makes the item focusable but not part of the page tab sequence. -
    - aria-disabled="false" - - li - - Used on the font size "Smaller" and "Larger" options to indicate they are active. -
    - aria-disabled="true" - - li - - Used on the font size "Smaller" and "Larger" options to indicate one of the options is not active because the largest or smallest font has been selected. -
    - menuitemcheckbox - - li - -
      -
    • Identifies the element as a menuitemcheckbox.
      • -
    • Accessible name comes from the text content.
      • -
    -
    - tabindex="-1" - - li - - Makes the menuitemcheckbox focusable but not part of the page tab sequence. -
    - aria-checked="true" - - li - -
      -
    • - Indicates that the menuitemcheckbox is checked. -
      • -
    • - The visual appearance of the selected state is synchronized with the aria-checked value using CSS attribute selectors. -
      • -
    -
    - aria-checked="false" - - li - -
      -
    • - Indicates that the menuitemcheckbox is NOT checked. -
      • -
    • - The visual appearance of the selected state is synchronized with the aria-checked value using CSS attribute selectors. -
      • -
    -
    - separator - - li - -
      -
    • Identifies the element as a visual separator between groups of items within a menu, such as groups of menuitemradio or menuitemcheckbox elements.
      • -
    • Is not focusable but may be perceivable by a screen reader user when using a reading cursor that does not depend on focus.
      • -
    -
    - group - - ul - -
      -
    • - Identifies the element as a container for a set of menuitemradio elements. -
      • -
    • - Enables browsers to compute values of aria-setsize and aria-posinset. -
      • -
    -
    - aria-label="string" - - ul - - Provides an accessible name for the group of menu items. -
    - menuitemradio - - li - -
      -
    • - Identifies the element as a menuitemradio element. -
      • -
    • - When all items in a submenu are members of the same radio group, - the group is defined by the menu element; a group element is not necessary. -
      • -
    • - Accessible name is computed from the text content. -
      • -
    -
    - tabindex="-1" - - li - - Makes the menuitemradio focusable but not part of the page tab sequence. -
    - aria-checked="true" - - li - -
      -
    • - Indicates the menuitemradio is checked. -
      • -
    • - The visual appearance of the selected state is synchronized with the aria-checked value using CSS attribute selectors. -
      • -
    -
    - aria-checked="false" - - li - -
      -
    • - Indicates that the menuitemradio is NOT checked. -
      • -
    • - The visual appearance of the selected state is synchronized with the aria-checked value using CSS attribute selectors. -
      • -
    -
    RoleAttributeElementUsage
    + menu + + ul + +
      +
    • Identifies the element as a menu container for a set of menu items.
      • +
    • Is not focusable because focus is managed using roving tabindex.
      • +
    +
    + aria-label="string" + + ul + + Defines an accessible name for the menu. +
    + menuitem + + li + +
      +
    • Identifies the element as an item in the submenu.
      • +
    • Accessible name comes from the text content.
      • +
    +
    + tabindex="-1" + + li + + Makes the item focusable but not part of the page tab sequence. +
    + aria-disabled="false" + + li + + Used on the font size "Smaller" and "Larger" options to indicate they are active. +
    + aria-disabled="true" + + li + + Used on the font size "Smaller" and "Larger" options to indicate one of the options is not active because the largest or smallest font has been selected. +
    + menuitemcheckbox + + li + +
      +
    • Identifies the element as a menuitemcheckbox.
      • +
    • Accessible name comes from the text content.
      • +
    +
    + tabindex="-1" + + li + + Makes the menuitemcheckbox focusable but not part of the page tab sequence. +
    + aria-checked="true" + + li + +
      +
    • + Indicates that the menuitemcheckbox is checked. +
      • +
    • + The visual appearance of the selected state is synchronized with the aria-checked value using CSS attribute selectors and hidden from screen readers with aria-hidden="true". +
      • +
    +
    + aria-checked="false" + + li + +
      +
    • + Indicates that the menuitemcheckbox is NOT checked. +
      • +
    • + The visual appearance of the selected state is synchronized with the aria-checked value using CSS attribute selectors and hidden from screen readers with aria-hidden="true". +
      • +
    +
    + aria-hidden="true" + + span + + Removes the character entities that visually represent the checked state of menuitemcheckbox elements from the accessibility tree to prevent them from being included in the accessible name of the menu item. +
    + separator + + li + +
      +
    • Identifies the element as a visual separator between groups of items within a menu, such as groups of menuitemradio or menuitemcheckbox elements.
      • +
    • Is not focusable but may be perceivable by a screen reader user when using a reading cursor that does not depend on focus.
      • +
    +
    + group + + ul + +
      +
    • + Identifies the element as a container for a set of menuitemradio elements. +
      • +
    • + Enables browsers to compute values of aria-setsize and aria-posinset. +
      • +
    +
    + aria-label="string" + + ul + + Provides an accessible name for the group of menu items. +
    + menuitemradio + + li + +
      +
    • + Identifies the element as a menuitemradio element. +
      • +
    • + When all items in a submenu are members of the same radio group, + the group is defined by the menu element; a group element is not necessary. +
      • +
    • + Accessible name is computed from the text content. +
      • +
    +
    + tabindex="-1" + + li + + Makes the menuitemradio focusable but not part of the page tab sequence. +
    + aria-checked="true" + + li + +
      +
    • + Indicates the menuitemradio is checked. +
      • +
    • + The visual appearance of the selected state is synchronized with the aria-checked value using CSS attribute selectors and hidden from screen readers with aria-hidden="true". +
      • +
    +
    + aria-checked="false" + + li + +
      +
    • + Indicates that the menuitemradio is NOT checked. +
      • +
    • + The visual appearance of the selected state is synchronized with the aria-checked value using CSS attribute selectors and hidden from screen readers with aria-hidden="true". +
      • +
    +
    + aria-hidden="true" + + span + + Removes the character entities that visually represent the checked state of menuitemradio elements from the accessibility tree to prevent them from being included in the accessible name of the menu item. +

    Textarea

    @@ -774,7 +822,7 @@

    Textarea

    - aria-label="string" + aria-label="string" textarea @@ -789,7 +837,7 @@

    Textarea

    Javascript and CSS Source Code

    -
      +
      • CSS: menubar-editor.css @@ -809,12 +857,9 @@

        HTML Source Code

        - - + sourceCode.add('sc1', 'ex1', 'ex1_label', 'css_js_files'); + sourceCode.make(); +