From 067c72cfe4673b1de138798d03462f918b496fb6 Mon Sep 17 00:00:00 2001 From: Matt King Date: Tue, 10 Sep 2019 10:53:48 -0700 Subject: [PATCH 01/17] Fix first few paragraphs --- index.html | 33 ++++++++++++++++++++++++++------- 1 file changed, 26 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 097648799..431abdd86 100644 --- a/index.html +++ b/index.html @@ -2058,13 +2058,32 @@

Definition of Roles

combobox
-

A composite widget containing a single-line textbox and another element, such as a listbox or grid, that can dynamically pop up to help the user set the value of the textbox.

-

Authors MUST ensure an element with role combobox contains or owns a text input element with role textbox or searchbox and that the text input has aria-multiline set to false. If the combobox provides autocompletion behavior for the text input as described in aria-autocomplete, authors MUST set aria-autocomplete on the textbox element to the value that corresponds to the provided behavior.

-

Typically, the initial state of a combobox is collapsed. In the collapsed state, only the textbox element of a combobox is visible. A combobox is said to be expanded when both the textbox and a secondary element that serves as its popup are visible. Authors MUST set aria-expanded to true on an element with role combobox when it is expanded and false when it is collapsed.

-

When a combobox is expanded, authors MUST ensure it contains or owns an element that has a role of listbox, tree, grid, or dialog. This element is the combobox popup. When the combobox is expanded, authors MUST set aria-controls on the textbox element to a value that refers to the combobox popup element.

-

Elements with the role combobox have an implicit aria-haspopup value of listbox. If the combobox popup element has a role other than listbox, authors MUST specify a value for aria-haspopup that corresponds to the type of its popup.

-

To be keyboard accessible, authors SHOULD manage focus of descendants for all instances of this role, as described in Managing Focus. When a combobox receives focus, authors SHOULD ensure focus is placed on the textbox element.

-

Authors SHOULD provide keyboard mechanisms for moving focus between the textbox element and the elements contained in the popup. For example, one common convention is that Down Arrow moves focus from the text input to the first focusable descendant of the popup element. If the popup element supports aria-activedescendant, in lieu of moving focus, such keyboard mechanisms can control the value of aria-activedescendant on the textbox element. When a descendant of the popup element is active, authors MAY set aria-activedescendant on the textbox to a value that refers to the active element within the popup while focus remains on the textbox element.

+

An input that controls another element, such as a listbox or grid, that can dynamically pop up to help the user set the value of the input.

+

+ A combobox input MAY be either a single-line text field that supports editing and typing or an element that displays the current value. + If an element with role combobox supports text input, authors MUST ensure that the text input has aria-multiline set to false. + If the combobox supports text input and provides autocompletion behavior as described in aria-autocomplete, authors MUST set aria-autocomplete on the combobox element to the value that corresponds to the provided behavior. +

+

+ Typically, the initial state of a combobox is collapsed. + In the collapsed state, only the element that displays the value is visible. + A combobox is said to be expanded when both the element that displays the value and a secondary element that serves as its popup are visible. + Authors MUST set aria-expanded to true on an element with role combobox when it is expanded and false when it is collapsed. +

+

+ When a combobox is expanded, authors MUST ensure it displays an element that has a role of listbox, tree, grid, or dialog. + This additional element is the combobox popup. + When the combobox is expanded, authors MUST set aria-controls on the combobox element to a value that refers to the combobox popup element. +

+

+ Elements with the role combobox have an implicit aria-haspopup value of listbox. If the combobox popup element has a role other than listbox, authors MUST specify a value for aria-haspopup that corresponds to the type of its popup. +

+

+ To be keyboard accessible, authors SHOULD manage focus of descendants for all instances of this role, as described in Managing Focus. +

+

+ Authors SHOULD provide keyboard mechanisms for moving focus between the textbox element and the elements contained in the popup. For example, one common convention is that Down Arrow moves focus from the text input to the first focusable descendant of the popup element. If the popup element supports aria-activedescendant, in lieu of moving focus, such keyboard mechanisms can control the value of aria-activedescendant on the textbox element. When a descendant of the popup element is active, authors MAY set aria-activedescendant on the textbox to a value that refers to the active element within the popup while focus remains on the textbox element. +

 				  <div aria-label="Tag" role="combobox" aria-expanded="true" aria-owns="owned_listbox" aria-haspopup="listbox">
 				      <input type="text" aria-autocomplete="list" aria-controls="owned_listbox" aria-activedescendant="selected_option">

From c6d853a1ea0acdaa60261fe1c151ea40f67f4ee7 Mon Sep 17 00:00:00 2001
From: Matt King 
Date: Tue, 10 Sep 2019 14:44:11 -0700
Subject: [PATCH 02/17] Finish draft 1 of description prose

---
 index.html | 24 +++++++++++++-----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/index.html b/index.html
index 431abdd86..79b24ae29 100644
--- a/index.html
+++ b/index.html
@@ -2060,29 +2060,31 @@ 

Definition of Roles

An input that controls another element, such as a listbox or grid, that can dynamically pop up to help the user set the value of the input.

- A combobox input MAY be either a single-line text field that supports editing and typing or an element that displays the current value. + A combobox functionally combines a named input field with the ability to assist value selection via a supplementary popup element. + A combobox input MAY be either a single-line text field that supports editing and typing or an element that only displays the current value of the combobox. If an element with role combobox supports text input, authors MUST ensure that the text input has aria-multiline set to false. If the combobox supports text input and provides autocompletion behavior as described in aria-autocomplete, authors MUST set aria-autocomplete on the combobox element to the value that corresponds to the provided behavior.

Typically, the initial state of a combobox is collapsed. - In the collapsed state, only the element that displays the value is visible. - A combobox is said to be expanded when both the element that displays the value and a secondary element that serves as its popup are visible. + In the collapsed state, only the combobox element and an optional popup control button are visible. + A combobox is said to be expanded when both the combobox element showing its current value and its associated popup element are visible. Authors MUST set aria-expanded to true on an element with role combobox when it is expanded and false when it is collapsed.

- When a combobox is expanded, authors MUST ensure it displays an element that has a role of listbox, tree, grid, or dialog. - This additional element is the combobox popup. - When the combobox is expanded, authors MUST set aria-controls on the combobox element to a value that refers to the combobox popup element. + Authors MUST ensure the popup element associated with a combobox has a role of listbox, tree, grid, or dialog. + Authors MUST set aria-controls on a combobox element to a value that refers to the combobox popup element.

- Elements with the role combobox have an implicit aria-haspopup value of listbox. If the combobox popup element has a role other than listbox, authors MUST specify a value for aria-haspopup that corresponds to the type of its popup. + Elements with the role combobox have an implicit aria-haspopup value of listbox. + If the combobox popup element has a role other than listbox, authors MUST specify a value for aria-haspopup that corresponds to the type of its popup.

- To be keyboard accessible, authors SHOULD manage focus of descendants for all instances of this role, as described in Managing Focus. -

-

- Authors SHOULD provide keyboard mechanisms for moving focus between the textbox element and the elements contained in the popup. For example, one common convention is that Down Arrow moves focus from the text input to the first focusable descendant of the popup element. If the popup element supports aria-activedescendant, in lieu of moving focus, such keyboard mechanisms can control the value of aria-activedescendant on the textbox element. When a descendant of the popup element is active, authors MAY set aria-activedescendant on the textbox to a value that refers to the active element within the popup while focus remains on the textbox element. + If the user interface includes an additional icon that allows the visibility of the popup to be controlled via pointer and touch events, authors SHOULD ensure that element has role button and that it is focusable but not included in the page Tab sequence. + In addition, to be keyboard accessible, authors SHOULD provide keyboard mechanisms for moving focus between the combobox element and elements contained in the popup. + For example, one common convention is that Down Arrow moves focus from the input to the first focusable descendant of the popup element. + If the popup element supports aria-activedescendant, in lieu of moving focus, such keyboard mechanisms can control the value of aria-activedescendant on the combobox element. + When a descendant of the popup element is active, authors MAY set aria-activedescendant on the combobox to a value that refers to the active element within the popup while focus remains on the combobox element.

 				  <div aria-label="Tag" role="combobox" aria-expanded="true" aria-owns="owned_listbox" aria-haspopup="listbox">

From 2e774ff08bd14014e42b6905549b43eb1873bd77 Mon Sep 17 00:00:00 2001
From: Matt King 
Date: Tue, 10 Sep 2019 15:00:21 -0700
Subject: [PATCH 03/17] Update example code

---
 index.html | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index 79b24ae29..c9aabfe08 100644
--- a/index.html
+++ b/index.html
@@ -2087,12 +2087,10 @@ 

Definition of Roles

When a descendant of the popup element is active, authors MAY set aria-activedescendant on the combobox to a value that refers to the active element within the popup while focus remains on the combobox element.

-				  <div aria-label="Tag" role="combobox" aria-expanded="true" aria-owns="owned_listbox" aria-haspopup="listbox">
-				      <input type="text" aria-autocomplete="list" aria-controls="owned_listbox" aria-activedescendant="selected_option">
-				  </div>
-				  <ul role="listbox" id="owned_listbox">
-				      <li role="option">Zebra</li>
-				      <li role="option" id="selected_option">Zoom</li>
+		      <input type="text" aria-label="Tag" role="combobox" aria-autocomplete="list" aria-haspopup="listbox" aria-expanded="true" aria-controls="popup_listbox" aria-activedescendant="selected_option">
+				  <ul role="listbox" id="popup_listbox">
+			      <li role="option">Zebra</li>
+			      <li role="option" id="selected_option">Zoom</li>
 				  </ul>
 				

The ARIA 1.0 specification describes a combobox pattern where a text input element has the combobox role and owns a listbox element. User agents, assistive technologies, and conformance checkers SHOULD continue to support the ARIA 1.0 pattern so that existing implementations of the ARIA 1.0 pattern remain functional.

From 8fda6d62869b97f6e82cd905d5f6acc1723eec7e Mon Sep 17 00:00:00 2001 From: Matt King Date: Tue, 10 Sep 2019 16:22:41 -0700 Subject: [PATCH 04/17] Adjust characteristics table --- index.html | 13 +++---------- 1 file changed, 3 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index c9aabfe08..16d815b27 100644 --- a/index.html +++ b/index.html @@ -2111,7 +2111,7 @@

Definition of Roles

Superclass Role: - select + input Subclass Roles: @@ -2133,15 +2133,7 @@

Definition of Roles

Required Owned Elements: - - textbox and, when expanded, one of: -
    -
  • listbox
  • -
  • tree
  • -
  • grid
  • -
  • dialog
  • -
- + Required States and Properties: @@ -2156,6 +2148,7 @@

Definition of Roles

Supported States and Properties:
    +
  • aria-activedescendant
  • aria-autocomplete
  • aria-readonly
  • aria-required
  • From ef6ea6070a62dc95fbd5a1010afd3f26245b8b68 Mon Sep 17 00:00:00 2001 From: Matt King Date: Tue, 10 Sep 2019 16:47:43 -0700 Subject: [PATCH 05/17] Revise example formatting and notes --- index.html | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 16d815b27..712ebab9e 100644 --- a/index.html +++ b/index.html @@ -2087,13 +2087,21 @@

    Definition of Roles

    When a descendant of the popup element is active, authors MAY set aria-activedescendant on the combobox to a value that refers to the active element within the popup while focus remains on the combobox element.

    -		      <input type="text" aria-label="Tag" role="combobox" aria-autocomplete="list" aria-haspopup="listbox" aria-expanded="true" aria-controls="popup_listbox" aria-activedescendant="selected_option">
    +		      <input type="text" aria-label="Tag"
    +            role="combobox" aria-autocomplete="list"
    +            aria-haspopup="listbox" aria-expanded="true"
    +            aria-controls="popup_listbox" aria-activedescendant="selected_option">
     				  <ul role="listbox" id="popup_listbox">
     			      <li role="option">Zebra</li>
     			      <li role="option" id="selected_option">Zoom</li>
     				  </ul>
     				
    -

    The ARIA 1.0 specification describes a combobox pattern where a text input element has the combobox role and owns a listbox element. User agents, assistive technologies, and conformance checkers SHOULD continue to support the ARIA 1.0 pattern so that existing implementations of the ARIA 1.0 pattern remain functional.

    +

    + The ARIA 1.0 specification describes a combobox pattern where the input element with the combobox role references the popup element with aria-owns instead of aria-controls. + User agents, assistive technologies, and conformance checkers SHOULD continue to support the ARIA 1.0 pattern so that existing implementations of the ARIA 1.0 pattern remain functional. + The ARIA 1.1 specification describes a combobox pattern where the element with role combobox is a composite container instead of a focusable input. + User agents and assistive technologies did not adequately support the ARIA 1.1 pattern, and this pattern supersedes the ARIA 1.1 pattern, which authors SHOULD abandon. +

    The features and behaviors of combobox implementations vary widely. Consequently, there are many important authoring considerations. See the WAI-ARIA Authoring Practices Guide [[WAI-ARIA-PRACTICES-1.1]] for additional details on implementing combobox design patterns.

From 5daaa3ee9852a2b1c96244e170fd8f5454545195 Mon Sep 17 00:00:00 2001 From: Matt King Date: Tue, 10 Sep 2019 17:10:32 -0700 Subject: [PATCH 06/17] Revise description of user agent responsibilities for aria-activedescendant --- index.html | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 712ebab9e..5c642f256 100644 --- a/index.html +++ b/index.html @@ -309,7 +309,13 @@

Managing Focus and Supporting Keyboard Navigation

When using standard HTML interactive elements and simple WAI-ARIA widgets, application developers can manipulate the tab order or associate keyboard shortcuts with elements in the document.

WAI-ARIA includes a number of "managing container" widgets, also known as "composite" widgets. When appropriate, the container is responsible for tracking the last descendant that was active (the default is usually the first item in the container). It is essential that a container maintain a usable and consistent strategy when focus leaves a container and is then later refocused. While there may be exceptions, it is recommended that when a previously focused container is refocused, the active descendant be the same element as the active descendant when the container was last focused. Exceptions include cases where the contents of a container widget have changed, and widgets like a menubar where the user expects to always return to the first item when focus leaves the menu bar. For example, if the second item of a tree group was the active descendant when the user tabbed out of the tree group, then the second item of the tree group remains the active descendant when the tree group gets focus again. The user may also activate the container by clicking on one of the descendants within it. When the container or its active descendant has focus, the user may navigate through the container by pressing additional keys, such as the arrow keys, to change the currently active descendant. Any additional press of the main navigation key (generally the TAB key) will move out of the container to the next widget.

Usable keyboard navigation in a rich internet application is different from the tabbing paradigm among interactive elements, such as links and form controls, in a static document. In rich internet applications, the user tabs to significantly complex widgets, such as a menu or spreadsheet, and uses the arrow keys to navigate within the widget. The changes that WAI-ARIA introduces to keyboard navigation make this enhanced accessibility possible. In WAI-ARIA, any element can be keyboard focusable. In addition to host language mechanisms such as tabindex, aria-activedescendant provides another mechanism for keyboard operation. Most other aspects of WAI-ARIA widget development depend on keyboard navigation functioning properly.

-

When implementing aria-activedescendant as described below, the user agent keeps the DOM focus on the container element but communicates desktop focus events and states to the assistive technology as if the active descendant has focus. User agents are not expected to validate that the active descendant is a descendant of the focused container. It is the responsibility of the user agent to ensure that keyboard events are processed at the container element that has DOM focus. Any keyboard events directed at the active descendant bubble up to the DOM container element with focus for processing.

+

+ When implementing aria-activedescendant as described below, the user agent keeps the DOM focus on the container element or on an input element that controls the container element. + However, the user agent communicates desktop focus events and states to the assistive technology as if the element referenced by aria-activedescendant has focus. + User agents are not expected to validate that the active descendant is a descendant of the container element. + It is the responsibility of the user agent to ensure that keyboard events are processed at the element that has DOM focus. + Any keyboard events directed at the active descendant bubble up to the DOM element with focus for processing. +

Information for Authors

If the author removes the element with focus, the author SHOULD move focus to a logical element. Similarly, authors SHOULD not scroll the element with focus off screen unless the user performed a scrolling action.

From fb576c271e949ec9ce35797f7b6f667589b6bb20 Mon Sep 17 00:00:00 2001 From: Matt King Date: Tue, 10 Sep 2019 17:13:18 -0700 Subject: [PATCH 07/17] Remove combobox from list of composites for which authors must manage focus in section with id managingfocus_authors --- index.html | 1 - 1 file changed, 1 deletion(-) diff --git a/index.html b/index.html index 5c642f256..282b105aa 100644 --- a/index.html +++ b/index.html @@ -322,7 +322,6 @@

Information for Authors

Authors SHOULD ensure that all interactive elements are focusable and that all parts of composite widgets are either focusable or have a documented alternative method to achieve their function.

Authors MUST manage focus on the following container roles:

    -
  • combobox
  • grid
  • listbox
  • menu
  • From 6b51c447479fd99ac18db59f0b846efa8126b51e Mon Sep 17 00:00:00 2001 From: Matt King Date: Tue, 10 Sep 2019 18:06:27 -0700 Subject: [PATCH 08/17] Revise prose of section managingfocus_authors to remove implications that the active descendant is always a DOM descendant of the element with DOM focus. --- index.html | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 282b105aa..d1058816f 100644 --- a/index.html +++ b/index.html @@ -332,8 +332,11 @@

    Information for Authors

  • tablist

User agents that support WAI-ARIA expand the usage of host language mechanisms such as tabindex, focus, and blur to allow them on all elements. Where the host language supports it, authors MAY add any element such as a div, span, or img to the default tab order by setting tabindex="0". In addition, any item with tabindex equal to a negative integer is focusable via script or a mouse click, but is not part of the default tab order. This is supported in both [[HTML]] and [[SVG2]].

-

Authors MAY use aria-activedescendant to enable keyboard accessibility on elements whose role supports this property. It is often a more convenient way of creating container widget keyboard navigation (where the entire widget is in the tab order just once, but the user can use other keys, typically arrow keys, to navigate to descendant items of the container).

-

Typically, the author will use host language semantics to put the container element in the sequential tab order (e.g., tabindex="0" in HTML) and aria-activedescendant to point to the ID of the currently active descendant. The author, not the user agent, is responsible for styling the currently active descendant to show it has keyboard focus. The author cannot use :focus to style the currently active descendant since the actual focus is on the container.

+

+ Authors MAY use aria-activedescendant to inform assistive technologies which descendant of a widget element is treated as having keyboard focus in the user interface if the role of the widget element supports aria-activedescendant. + This is often a more convenient way of providing keyboard navigation within widgets, such as a listbox, where the widget occupies only one stop in the page Tab sequence and other keys, typically arrow keys, are used to focus elements inside the widget. +

+

Typically, the author will use host language semantics to put the widget in the Tab sequence (e.g., tabindex="0" in HTML) and aria-activedescendant to point to the ID of the currently active descendant. The author, not the user agent, is responsible for styling the currently active descendant to show it has keyboard focus. The author cannot use :focus to style the currently active descendant since the actual focus is on the container.

More information on managing focus can be found in the Developing a Keyboard Interface section of the WAI-ARIA Authoring Practices [[WAI-ARIA-PRACTICES-1.1]].

From e0f746662dc4fa1244dee40fb2b18dcccc65d4f0 Mon Sep 17 00:00:00 2001 From: Matt King Date: Tue, 10 Sep 2019 19:21:31 -0700 Subject: [PATCH 09/17] Minor editorial revision to UA active descendant requirements --- index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index d1058816f..72d299df9 100644 --- a/index.html +++ b/index.html @@ -343,9 +343,9 @@

Information for Authors

Information for User Agents

The user agent MUST do the following to implement aria-activedescendant:

    -
  1. Implement the host language method for keyboard navigation so that the container widget may be included in the tab order.
  2. +
  3. Implement the host language method for keyboard navigation so that widgets that support aria-activedescendant may be included in the tab order.
  4. For platforms that expose desktop focus or accessibility API focus separately from DOM focus, do not expose the focused state in the accessibility API for any element when it has DOM focus and also has aria-activedescendant which points to a valid ID reference.
  5. -
  6. When the aria-activedescendant attribute changes on an element that currently has DOM focus, remove the focused state from the previously focused object and fire an accessibility API desktop focus event on the new active descendant. If aria-activedescendant is cleared or does not point to an element in the current document, fire a desktop focus event for the container object that had the attribute change.
  7. +
  8. When the aria-activedescendant attribute changes on an element that currently has DOM focus, remove the focused state from the previously focused object and fire an accessibility API desktop focus event on the new element referenced by aria-activedescendant. If aria-activedescendant is cleared or does not point to an element in the current document, fire a desktop focus event for the object that had the attribute change.
  9. For any element with an ID attribute, where the element is a descendant of an element with the aria-activedescendant attribute, apply the following accessibility API states to the target to ensure the object is accessible:
    1. Focusable, if the element also has a WAI-ARIA role, because the aria-activedescendant of the container can potentially point to it. It is not absolutely necessary to check this when there is no role, because elements that would be focusable would already have the focusable state.
    2. From 719b4ba784f3325a5b35e67b835f247e9ebc0dbc Mon Sep 17 00:00:00 2001 From: Matt King Date: Tue, 10 Sep 2019 21:12:40 -0700 Subject: [PATCH 10/17] Revise combobox example in aria-activedescendant definition so it does not describe textbox as contained by a combobox --- index.html | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 72d299df9..6dfb9bbbe 100644 --- a/index.html +++ b/index.html @@ -9914,12 +9914,15 @@

      Definitions of States and Properties (all aria-* attributes)

      aria-activedescendant
      -

      Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.

      +

      Identifies the currently active element when DOM focus is on a composite widget, combobox, textbox, group, or application.

      The aria-activedescendant property provides an alternative method of managing focus for interactive elements that may contain multiple focusable descendants, such as menus, grids, and toolbars. Instead of moving DOM focus among descendant elements, authors MAY set DOM focus on an element that supports aria-activedescendant and then use aria-activedescendant to refer to the element that is active.

      Authors MUST ensure that one of the following two sets of conditions is met when setting the value of aria-activedescendant on an element with DOM focus:

      1. The value of aria-activedescendant refers to an element that is either a descendant of the element with DOM focus or is a logical descendant as indicated by the aria-owns attribute.
      2. -
      3. The element with DOM focus is a textbox with aria-controls referring to an element that supports aria-activedescendant, and the value of aria-activedescendant specified for the textbox refers to either a descendant of the element controlled by the textbox or is a logical descendant of that controlled element as indicated by the aria-owns attribute. For example, in a combobox, focus may remain on the textbox while the value of aria-activedescendant on the textbox element refers to a descendant of a popup listbox that is controlled by the textbox.
      4. +
      5. + The element with DOM focus is a combobox or textbox with aria-controls referring to an element that supports aria-activedescendant, and the value of aria-activedescendant refers to either a descendant of the controlled element or is a logical descendant of that controlled element as indicated by the aria-owns attribute. + For example, in a combobox, focus may remain on the combobox while the value of aria-activedescendant on the combobox element refers to a descendant of a popup listbox that is controlled by the combobox. +

      Authors SHOULD also ensure that the currently active descendant is visible and in view (or scrolls into view) when focused.

      From 1bcb20c111d5b5306ca1b1d731d939d424e6188e Mon Sep 17 00:00:00 2001 From: Matt King Date: Mon, 21 Oct 2019 17:29:00 -0700 Subject: [PATCH 11/17] Editorial suggestion from @carmacleod: type > role --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 6dfb9bbbe..f722385e9 100644 --- a/index.html +++ b/index.html @@ -2085,7 +2085,7 @@

      Definition of Roles

      Elements with the role combobox have an implicit aria-haspopup value of listbox. - If the combobox popup element has a role other than listbox, authors MUST specify a value for aria-haspopup that corresponds to the type of its popup. + If the combobox popup element has a role other than listbox, authors MUST specify a value for aria-haspopup that corresponds to the role of its popup.

      If the user interface includes an additional icon that allows the visibility of the popup to be controlled via pointer and touch events, authors SHOULD ensure that element has role button and that it is focusable but not included in the page Tab sequence. From 03e147abb0932666c9913fda26d6ef9b01db1de9 Mon Sep 17 00:00:00 2001 From: Matt King Date: Mon, 21 Oct 2019 18:08:34 -0700 Subject: [PATCH 12/17] Change example to use label element --- index.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index f722385e9..a468deed0 100644 --- a/index.html +++ b/index.html @@ -2095,7 +2095,8 @@

      Definition of Roles

      When a descendant of the popup element is active, authors MAY set aria-activedescendant on the combobox to a value that refers to the active element within the popup while focus remains on the combobox element.

      -		      <input type="text" aria-label="Tag"
      +          <label for="tag_combo">Tag</label>
      +		      <input type="text" id="tag_combo"
                   role="combobox" aria-autocomplete="list"
                   aria-haspopup="listbox" aria-expanded="true"
                   aria-controls="popup_listbox" aria-activedescendant="selected_option">
      
      From a9713588cc8e80e1a39846d79f48c01ac7c570d3 Mon Sep 17 00:00:00 2001
      From: Matt King 
      Date: Mon, 21 Oct 2019 18:28:08 -0700
      Subject: [PATCH 13/17] Revise note per feedback from @carmacleod
      
      ---
       index.html | 2 +-
       1 file changed, 1 insertion(+), 1 deletion(-)
      
      diff --git a/index.html b/index.html
      index a468deed0..0732c2e12 100644
      --- a/index.html
      +++ b/index.html
      @@ -2109,7 +2109,7 @@ 

      Definition of Roles

      The ARIA 1.0 specification describes a combobox pattern where the input element with the combobox role references the popup element with aria-owns instead of aria-controls. User agents, assistive technologies, and conformance checkers SHOULD continue to support the ARIA 1.0 pattern so that existing implementations of the ARIA 1.0 pattern remain functional. The ARIA 1.1 specification describes a combobox pattern where the element with role combobox is a composite container instead of a focusable input. - User agents and assistive technologies did not adequately support the ARIA 1.1 pattern, and this pattern supersedes the ARIA 1.1 pattern, which authors SHOULD abandon. + User agents and assistive technologies did not adequately support the ARIA 1.1 pattern, so the ARIA 1.2 pattern supersedes the ARIA 1.1 pattern, which authors SHOULD abandon.

      The features and behaviors of combobox implementations vary widely. Consequently, there are many important authoring considerations. See the WAI-ARIA Authoring Practices Guide [[WAI-ARIA-PRACTICES-1.1]] for additional details on implementing combobox design patterns.

      From 974189ce62ee5fb0ac173026ef53f4cf98f9dbd5 Mon Sep 17 00:00:00 2001 From: James Nurthen Date: Mon, 28 Oct 2019 14:50:34 -0700 Subject: [PATCH 14/17] Add editor's note --- index.html | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/index.html b/index.html index 0732c2e12..e9c7bed18 100644 --- a/index.html +++ b/index.html @@ -2067,6 +2067,10 @@

      Definition of Roles

      combobox

      An input that controls another element, such as a listbox or grid, that can dynamically pop up to help the user set the value of the input.

      +

      + The Guidance for combobox has changed significantly in ARIA 1.2 due to problems with implementation of the previous patterns. + Authors and User Agents, Assitive Technologies and Conformance Checkers are advised to review this section carefully to understand the changes. +

      A combobox functionally combines a named input field with the ability to assist value selection via a supplementary popup element. A combobox input MAY be either a single-line text field that supports editing and typing or an element that only displays the current value of the combobox. From eb682db798079baa1ac60a1ce88328290faf8a34 Mon Sep 17 00:00:00 2001 From: Matt King Date: Mon, 28 Oct 2019 15:26:25 -0700 Subject: [PATCH 15/17] Revise aria-autocomplete description to match new combobox structure --- index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index e9c7bed18..b1346abff 100644 --- a/index.html +++ b/index.html @@ -10022,14 +10022,14 @@

      Definitions of States and Properties (all aria-* attributes)

      aria-autocomplete
      -

      Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made.

      +

      Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for a combobox, searchbox, or textbox and specifies how predictions would be presented if they were made.

      The aria-autocomplete property describes the type of interaction model a textbox, searchbox, or combobox employs when dynamically helping users complete text input. It distinguishes between two models: the inline model (aria-autocomplete="inline") that presents a value completion prediction inside the text input and the list model (aria-autocomplete="list") that presents a collection of possible values in a separate element that pops up adjacent to the text input. It is possible for an input to offer both models at the same time (aria-autocomplete="both").

      The aria-autocomplete property is limited to describing predictive behaviors of an input element. Authors SHOULD either omit specifying a value for aria-autocomplete or set aria-autocomplete to none if an input element provides one or more input proposals where none of the proposals are dependent on the specific input provided by the user. For instance, a combobox where the value of aria-autocomplete would be none is a search field that displays suggested values by listing the 5 most recently used search terms without any filtering of the list based on the user's input. Elements with a role that supports aria-autocomplete have a default value for aria-autocomplete of none.

      When an inline suggestion is made as a user types in an input, suggested text for completing the value of the field dynamically appears in the field after the input cursor, and the suggested value is accepted as the value of the input if the user performs an action that causes focus to leave the field. When an element has aria-autocomplete set to inline or both, authors SHOULD ensure that the automatically suggested portion of the text is presented as selected text. This enables assistive technologies to distinguish between a user's input and the automatic suggestion and, in the event that the suggestion is not the desired value, enables the user to easily delete the suggestion or replace it by continuing to type.

      If an element has aria-autocomplete set to list or both, authors MUST ensure both of the following conditions are met:

      1. The element has a value specified for aria-controls that refers to the element that contains the collection of suggested values.
      2. -
      3. Either the element or a containing element with role combobox has a value for aria-haspopup that matches the role of the element that contains the collection of suggested values.
      4. +
      5. The element has a value for aria-haspopup that matches the role of the element that contains the collection of suggested values.

      Some implementations of the list model require the user to perform an action, such as moving focus to the suggestion with the Down Arrow or clicking on the suggestion, in order to choose the suggestion. In such implementations, authors MAY manage focus by either using aria-activedescendant if the collection container supports it or by moving DOM focus to the suggestion. However, other implementations of the list model automatically highlight one suggestion as the selected value that will be accepted when the field loses focus, e.g., when the user presses the Tab key or clicks on a different field. If an element has aria-autocomplete set to list or both, and if a suggestion is automatically selected as the user provides input, authors MUST ensure all the following conditions are met:

        From 25c83148fcf6c02f1e4154a7b400d41e26a2b6d5 Mon Sep 17 00:00:00 2001 From: Matt King Date: Mon, 28 Oct 2019 15:33:25 -0700 Subject: [PATCH 16/17] Revise editor's note --- index.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index b1346abff..baba5754c 100644 --- a/index.html +++ b/index.html @@ -2069,7 +2069,8 @@

        Definition of Roles

        An input that controls another element, such as a listbox or grid, that can dynamically pop up to help the user set the value of the input.

        The Guidance for combobox has changed significantly in ARIA 1.2 due to problems with implementation of the previous patterns. - Authors and User Agents, Assitive Technologies and Conformance Checkers are advised to review this section carefully to understand the changes. + Authors and developers of User Agents, Assistive Technologies, and Conformance Checkers are advised to review this section carefully to understand the changes. + Explanation of the changes is available in the ARIA repository wiki.

        A combobox functionally combines a named input field with the ability to assist value selection via a supplementary popup element. From 6e381691cba067428f255b6763111ad15f9a8ca4 Mon Sep 17 00:00:00 2001 From: James Nurthen Date: Thu, 31 Oct 2019 15:51:34 -0700 Subject: [PATCH 17/17] Add extra combobox warning --- index.html | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index baba5754c..e426dc26a 100644 --- a/index.html +++ b/index.html @@ -2110,12 +2110,15 @@

        Definition of Roles

        <li role="option" id="selected_option">Zoom</li> </ul> -

        - The ARIA 1.0 specification describes a combobox pattern where the input element with the combobox role references the popup element with aria-owns instead of aria-controls. - User agents, assistive technologies, and conformance checkers SHOULD continue to support the ARIA 1.0 pattern so that existing implementations of the ARIA 1.0 pattern remain functional. - The ARIA 1.1 specification describes a combobox pattern where the element with role combobox is a composite container instead of a focusable input. - User agents and assistive technologies did not adequately support the ARIA 1.1 pattern, so the ARIA 1.2 pattern supersedes the ARIA 1.1 pattern, which authors SHOULD abandon. -

        +

        + Please review the following carefully. As a result of these changes a combobox following the ARIA 1.1 combobox specification will no longer conform with the ARIA specification. +

        +

        + The ARIA 1.0 specification describes a combobox pattern where the input element with the combobox role references the popup element with aria-owns instead of aria-controls. + User agents, assistive technologies, and conformance checkers SHOULD continue to support the ARIA 1.0 pattern so that existing implementations of the ARIA 1.0 pattern remain functional. + The ARIA 1.1 specification describes a combobox pattern where the element with role combobox is a composite container instead of a focusable input. + User agents and assistive technologies did not adequately support the ARIA 1.1 pattern, so the ARIA 1.2 pattern supersedes the ARIA 1.1 pattern, which authors SHOULD abandon. +

        The features and behaviors of combobox implementations vary widely. Consequently, there are many important authoring considerations. See the WAI-ARIA Authoring Practices Guide [[WAI-ARIA-PRACTICES-1.1]] for additional details on implementing combobox design patterns.