From 4372458bd85fe4b0450de0e14f146438c79a0940 Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Tue, 21 Sep 2021 13:00:46 -0500 Subject: [PATCH 01/44] updated reference table --- examples/index.html | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/examples/index.html b/examples/index.html index c3a4039ea7..3dfb3547d8 100644 --- a/examples/index.html +++ b/examples/index.html @@ -184,7 +184,7 @@

Examples by Role

  • Editable Combobox With List Autocomplete
  • Editable Combobox without Autocomplete
  • Select-Only Combobox
    • -
  • Collapsible Dropdown Listbox
    • +
  • (Deprecated) Collapsible Dropdown Listbox
  • Listbox with Grouped Options
  • Listboxes with Rearrangeable Options
  • Scrollable Listbox
    • @@ -276,7 +276,7 @@

    Examples by Role

  • Editable Combobox With List Autocomplete
  • Editable Combobox without Autocomplete
  • Select-Only Combobox
    • -
  • Collapsible Dropdown Listbox
    • +
  • (Deprecated) Collapsible Dropdown Listbox
  • Listbox with Grouped Options
  • Listboxes with Rearrangeable Options
  • Scrollable Listbox
    • @@ -443,7 +443,7 @@

    Examples By Properties and States

  • Editable Combobox without Autocomplete
  • Select-Only Combobox
  • Editable Combobox with Grid Popup
    • -
  • Collapsible Dropdown Listbox
    • +
  • (Deprecated) Collapsible Dropdown Listbox
  • Listbox with Grouped Options
  • Listboxes with Rearrangeable Options
  • Scrollable Listbox
    • @@ -569,7 +569,7 @@

    Examples By Properties and States

  • Disclosure (Show/Hide) for Image Description (HC)
  • Disclosure Navigation Menu with Top-Level Links
  • Disclosure Navigation Menu (HC)
    • -
  • Collapsible Dropdown Listbox
    • +
  • (Deprecated) Collapsible Dropdown Listbox
  • Actions Menu Button Using aria-activedescendant (HC)
  • Actions Menu Button Using element.focus() (HC)
  • Navigation Menu Button (HC)
    • @@ -589,7 +589,7 @@

    Examples By Properties and States

    @@ -628,7 +630,6 @@

    Examples By Properties and States

  • Editor Menubar (HC)
  • Navigation Menubar (HC)
  • Date Picker Spin Button
    • -
  • Sortable Table (HC)
  • Table
  • Tabs with Automatic Activation
  • Tabs with Manual Activation
    • diff --git a/examples/table/js/sortable-table.js b/examples/table/js/sortable-table.js index f237554055..7fb6c1e006 100644 --- a/examples/table/js/sortable-table.js +++ b/examples/table/js/sortable-table.js @@ -17,25 +17,19 @@ class SortableTable { this.sortColumns = []; - this.buttonLabelDescending = 'Sort %s column in descending order'; - this.buttonLabelAscending = 'Sort %s column in ascending order'; - for (var i = 0; i < this.columnHeaders.length; i++) { var ch = this.columnHeaders[i]; - var button = ch.querySelector('button'); - if (button) { - var label = this.buttonLabelAscending.replace('%s', button.textContent); - button.setAttribute('aria-label', label); + var buttonNode = ch.querySelector('button'); + if (buttonNode) { + buttonNode.setAttribute('aria-describedby', 'id-sort-descending'); this.sortColumns.push(i); - button.setAttribute('data-column-index', i); - button.addEventListener('click', this.handleClick.bind(this)); + buttonNode.setAttribute('data-column-index', i); + buttonNode.addEventListener('click', this.handleClick.bind(this)); } } } setColumnHeaderSort(columnIndex) { - var label; - if (typeof columnIndex === 'string') { columnIndex = parseInt(columnIndex); } @@ -52,11 +46,7 @@ class SortableTable { 'ascending', ch.classList.contains('num') ); - label = this.buttonLabelAscending.replace( - '%s', - this.cleanTextContent(buttonNode) - ); - buttonNode.setAttribute('aria-label', label); + buttonNode.setAttribute('aria-describedby', 'id-sort-descending'); } else { ch.setAttribute('aria-sort', 'descending'); this.sortColumn( @@ -64,32 +54,17 @@ class SortableTable { 'descending', ch.classList.contains('num') ); - label = this.buttonLabelAscending.replace( - '%s', - this.cleanTextContent(buttonNode) - ); - buttonNode.setAttribute('aria-label', label); + buttonNode.setAttribute('aria-describedby', 'id-sort-ascending'); } } else { if (ch.hasAttribute('aria-sort') && buttonNode) { ch.removeAttribute('aria-sort'); - label = this.buttonLabelDescending.replace( - '%s', - this.cleanTextContent(buttonNode) - ); - buttonNode.setAttribute('aria-label', label); + buttonNode.setAttribute('aria-describedby', 'id-sort-descending'); } } } } - cleanTextContent(node) { - var text = node.textContent; - text = text.replace(/[\n\r]+/g, ''); - text = text.trim(); - return text; - } - sortColumn(columnIndex, sortValue, isNumber) { if (typeof isNumber !== 'boolean') { isNumber = false; diff --git a/examples/table/sortable-table.html b/examples/table/sortable-table.html index 3421637171..c037ad43a5 100644 --- a/examples/table/sortable-table.html +++ b/examples/table/sortable-table.html @@ -31,7 +31,7 @@

    Sortable Table Example

    The example below illustrates an implementation of the WAI-ARIA - table design pattern for a table with sortable rows. The example uses HTML table markup to represent the header and data cells of the table. The aria-sort attribute is added to the column header of column data used to sort the table. A button element in the each sortable column header is used to change the sorting column and order. The data values in the columns are either all text or all numbers. and a class name is used to indicate (e.g "num") which columns should be sorted as a number value. One column (e.g. "address") in the example table cannot be used to sort the table. + table design pattern for a table with sortable rows. The example uses HTML table markup to represent the rows, caption, and header and data cells of the table. The aria-sort attribute is added to the column header of the data used to sort the table. A button element in the each sortable column header is used to change the sorting column and order. The data values in the columns are either all text or all numbers and a class name is used to indicate (e.g "num") which columns should be sorted as a number value. One column (e.g. "address") in the example table is not used to sort the table.

    Similar examples include:

    -

    Sortable Table Example

    -

    - The example below illustrates an implementation of the WAI-ARIA - table design pattern for a table with sortable rows. The example uses HTML table markup to represent the rows, caption, and header and data cells of the table. The aria-sort attribute is added to the column header of the data used to sort the table. A button element in the each sortable column header is used to change the sorting column and order. The data values in the columns are either all text or all numbers and a class name is used to indicate (e.g "num") which columns should be sorted as a number value. One column (e.g. "address") in the example table is not used to sort the table. -

    -

    Similar examples include:

    - +

    Sortable Table Example

    +

    + The example below illustrates an implementation of the table design pattern for a table with sortable rows. + The example uses HTML table markup for all elements of the table structure, e.g., cells, rows, column headers, and caption. + The aria-sort attribute is set on the column header of the currently sorted column, and the header text of sortable columns is wrapped in a button element. + One column, the Address column is not sortable. +

    +

    Similar examples include:

    +
    From 8bd0124f48671b3831a6277b2d7d44c4827e5bd1 Mon Sep 17 00:00:00 2001 From: Matt King Date: Sun, 10 Oct 2021 15:44:07 -0700 Subject: [PATCH 16/44] Editorial revision to keyboard section --- examples/table/sortable-table.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/examples/table/sortable-table.html b/examples/table/sortable-table.html index 7c71d995d8..c98ce3eafd 100644 --- a/examples/table/sortable-table.html +++ b/examples/table/sortable-table.html @@ -150,10 +150,10 @@

    Accessibility Features

    -
    -

    Keyboard Support

    -

    Not Applicable

    -
    +
    +

    Keyboard Support

    +

    Not applicable: The only interactive elements are HTML button elements, and all their keyboard functionality is provided by browsers.

    +

    Role, Property, State, and Tabindex Attributes

    From 00625c38bb27b76f2fe186f1e30aa5c8676d18bb Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Sun, 10 Oct 2021 18:31:35 -0500 Subject: [PATCH 17/44] updated button descriptions --- examples/table/js/sortable-table.js | 12 ++++++++---- examples/table/sortable-table.html | 12 ++++++------ 2 files changed, 14 insertions(+), 10 deletions(-) diff --git a/examples/table/js/sortable-table.js b/examples/table/js/sortable-table.js index b2f9efd895..ad40ea0efb 100644 --- a/examples/table/js/sortable-table.js +++ b/examples/table/js/sortable-table.js @@ -21,7 +21,11 @@ class SortableTable { var ch = this.columnHeaders[i]; var buttonNode = ch.querySelector('button'); if (buttonNode) { - buttonNode.setAttribute('aria-describedby', 'id-sort-descending'); + if (ch.hasAttribute('aria-sort')) { + buttonNode.setAttribute('aria-describedby', 'id-change-sort'); + } else { + buttonNode.setAttribute('aria-describedby', 'id-sort-column'); + } this.sortColumns.push(i); buttonNode.setAttribute('data-column-index', i); buttonNode.addEventListener('click', this.handleClick.bind(this)); @@ -46,7 +50,7 @@ class SortableTable { 'ascending', ch.classList.contains('num') ); - buttonNode.setAttribute('aria-describedby', 'id-sort-descending'); + buttonNode.setAttribute('aria-describedby', 'id-change-sort'); } else { ch.setAttribute('aria-sort', 'descending'); this.sortColumn( @@ -54,12 +58,12 @@ class SortableTable { 'descending', ch.classList.contains('num') ); - buttonNode.setAttribute('aria-describedby', 'id-sort-ascending'); + buttonNode.setAttribute('aria-describedby', 'id-change-sort'); } } else { if (ch.hasAttribute('aria-sort') && buttonNode) { ch.removeAttribute('aria-sort'); - buttonNode.setAttribute('aria-describedby', 'id-sort-descending'); + buttonNode.setAttribute('aria-describedby', 'id-sort-column'); } } } diff --git a/examples/table/sortable-table.html b/examples/table/sortable-table.html index c98ce3eafd..5f4ece9efe 100644 --- a/examples/table/sortable-table.html +++ b/examples/table/sortable-table.html @@ -52,26 +52,26 @@

    Example

    - - - Address - @@ -109,8 +109,8 @@

    Example

    - - + +
    From 9b7e77c469c346259cf0410719e107e2079eb3b8 Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Tue, 12 Oct 2021 13:20:35 -0500 Subject: [PATCH 18/44] Removed aria-label on th for last name --- examples/table/sortable-table.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/table/sortable-table.html b/examples/table/sortable-table.html index 5f4ece9efe..6d6c4733c7 100644 --- a/examples/table/sortable-table.html +++ b/examples/table/sortable-table.html @@ -57,7 +57,7 @@

    Example

    - + - Address + Address - Address + Address