diff --git a/.stylelintrc b/.stylelintrc new file mode 100644 index 0000000000..1796dab3a0 --- /dev/null +++ b/.stylelintrc @@ -0,0 +1,6 @@ +{ + "rules": { + "media-feature-name-no-unknown": [true, + "ignoreMediaFeatureNames": ["forced-colors"] ] + } +} diff --git a/aria-practices.html b/aria-practices.html index 666abbf810..f925b4bcdb 100644 --- a/aria-practices.html +++ b/aria-practices.html @@ -710,100 +710,101 @@

WAI-ARIA Roles, States, and Properties

-

Combo Box

+

Combobox

- A combobox is a widget made up of the combination of two distinct elements: - 1) a single-line textbox, and 2) an associated pop-up element for helping users set the value of the textbox. + A combobox is an input widget with an associated popup that enables users to select a value for the combobox from a collection of possible values. + In some implementations, the popup presents allowed values, while in other implementations, the popup presents suggested values, and users may either select one of the suggestions or type a value. The popup may be a listbox, grid, tree, or dialog. - Many implementations also include a third optional element -- a graphical button adjacent to the textbox, indicating the availability of the popup. - Activating the button displays the popup if suggestions are available. + Many implementations also include a third optional element -- a graphical Open button adjacent to the combobox, which indicates availability of the popup. + Activating the Open button displays the popup if suggestions are available.

-

The popup is hidden by default, and the conditions that trigger its display are specific to each implementation. Some possible popup display conditions include:

+

+ The combobox pattern supports several optional behaviors. + The one that most shapes interaction is text input. + Some comboboxes allow users to type and edit text in the combobox and others do not. + If a combobox does not support text input, it is referred to as select-only, meaning the only way users can set a value is by selecting a value in the popup. + For example, in some browsers, an HTML select element with size="1" is presented to assistive technologies as a combobox. + Alternatively, if a combobox supports text input, it is referred to as editable. + An editable combobox may either allow users to input any arbitrary value, or it may restrict its value to a discrete set of allowed values, in which case typing input serves to filter suggestions presented in the popup. +

+

The popup is hidden by default, i.e., the default state is collapsed. The conditions that trigger expansion -- display of the popup --are specific to each implementation. Some possible conditions that trigger expansion include:

-

Combobox widgets are useful for setting the value of a single-line textbox in one of two types of scenarios:

+

Combobox widgets are useful for acquiring user input in either of two scenarios:

  1. - The value for the textbox must be chosen from a predefined set of allowed values, - e.g., a location field must contain a valid location name. + The value must be one of a predefined set of allowed values, e.g., a location field must contain a valid location name. Note that the listbox and menu button patterns are also useful in this scenario; differences between combobox and alternative patterns are described below.
  2. - The textbox may contain any arbitrary value, but it is advantageous to suggest possible values to the user, - e.g., a search field may suggest similar or previous searches to save the user time. + An arbitrary value is allowed, but it is advantageous to suggest possible values to users. + For example, a search field may suggest similar or previous searches to save the user time.

- The nature of the suggested values and the way the suggestions are presented is called the autocomplete behavior. + The nature of possible values presented by a popup and the way they are presented is called the autocomplete behavior. Comboboxes can have one of four forms of autocomplete:

  1. - No autocomplete: When the popup is triggered, the suggested values it contains are the same regardless of the characters typed in the textbox. + No autocomplete: The combobox is editable, and when the popup is triggered, the suggested values it contains are the same regardless of the characters typed in the combobox. For example, the popup suggests a set of recently entered values, and the suggestions do not change as the user types.
  2. - List autocomplete with manual selection: When the popup is triggered, it presents suggested values that complete or logically correspond to the characters typed in the textbox. - The character string the user has typed will become the value of the textbox unless the user selects a value in the popup. + List autocomplete with manual selection: When the popup is triggered, it presents suggested values. If the combobox is editable, the suggested values complete or logically correspond to the characters typed in the combobox. + The character string the user has typed will become the value of the combobox unless the user selects a value in the popup.
  3. - List autocomplete with automatic selection: When the popup is triggered, it presents suggested values that complete or logically correspond to the characters typed in the textbox, + List autocomplete with automatic selection: The combobox is editable, and when the popup is triggered, it presents suggested values that complete or logically correspond to the characters typed in the combobox, and the first suggestion is automatically highlighted as selected. - The automatically selected suggestion becomes the value of the textbox when the combobox loses focus unless the user chooses a different suggestion or changes the character string in the textbox. + The automatically selected suggestion becomes the value of the combobox when the combobox loses focus unless the user chooses a different suggestion or changes the character string in the combobox.
  4. List with inline autocomplete: This is the same as list with automatic selection with one additional feature. - The portion of the selected suggestion that has not been typed by the user, a completion string, appears inline after the input cursor in the textbox. + The portion of the selected suggestion that has not been typed by the user, a completion string, appears inline after the input cursor in the combobox. The inline completion string is visually highlighted and has a selected state.

- With any form of list autocomplete, the popup may appear and disappear as the user types. + If a combobox is editable and has any form of list autocomplete, the popup may appear and disappear as the user types. For example, if the user types a two character string that triggers five suggestions to be displayed but then types a third character that forms a string that does not have any matching suggestions, the popup may close and, if present, the inline completion string disappears.

- When constructing a widget that is both visually compact and enables users to choose one value from a set of discrete values, often either a listbox or menu button is simpler to implement and use. - One feature of combobox that distinguishes it from both listbox and menu button is that the value of the combobox is presented in an edit field. - Thus, the combobox gives users one function that both listbox and menu button lack, namely the ability to select some or all of the value for copying to the clipboard. - One feature that distinguishes both combobox and menu button widgets from listbox widgets is their ability to provide an undo mechanism. - In many implementations, users can navigate the set of allowed values in a combobox or menu and then decide to revert to the value the widget had before navigating by pressing escape. - In contrast, navigating a listbox immediately changes its value, and escape does not provide an undo mechanism. -

-

- The options for a combobox to popup a grid, tree, or dialog were introduced in ARIA 1.1. - Changes made in the ARIA 1.1 specification also add support for a code pattern that enables assistive technologies to present the textbox and popup as separately perceivable elements. - both ARIA 1.0 and 1.1 patterns are described in the following sections. - While using the ARIA 1.1 pattern is recommended as soon as assistive technology support is sufficient, - there are no plans to deprecate the ARIA 1.0 pattern. + Two other widgets that are also visually compact and enable users to make a single choice from a set of discrete choices are listbox and menu button. + One feature that distinguishes combobox from both listbox and menu button is that the user's choice can be presented as a value in an editable field, which gives users the ability to select some or all of the value for copying to the clipboard. + Comboboxes and menu buttons can be implemented so users can explore the set of allowed choices without losing a previously made choice. + That is, users can navigate the set of available choices in a combobox popup or menu and then press escape, which closes the popup or menu without changing previous input. + In contrast, navigating among options in a single-select listbox immediately changes its value, and Escape does not provide an undo mechanism. + Comboboxes and listboxes can be marked as required with aria-required="true", and they have an accessible name that is distinct from their value. + Thus, when assistive technology users focus either a combobox or listbox in its default state, they can perceive both a name and value for the widget. + However, a menu button cannot be marked required, and while it has an accessible name, it does not have a value so is not suitable for conveying the user's choice in its collapsed state.

Examples

Keyboard Interaction

-
Textbox Keyboard Interaction
-

When focus is in the textbox:

+
Combobox Keyboard Interaction
+

When focus is in the combobox:

-

Standard single line text editing keys appropriate for the device platform:

-
    -
  1. include keys for input, cursor movement, selection, and text manipulation.
    2. -
  2. Standard key assignments for editing functions depend on the device operating system.
    3. -
  3. The most robust approach for providing text editing functions is to rely on browsers, which supply them for HTML inputs with type text and for elements with the contenteditable HTML attribute.
    4. -
  4. IMPORTANT: Be sure that JavaScript does not interfere with browser-provided text editing functions by capturing key events for the keys used to perform them.
    5. -
+
+

Standard single line text editing keys appropriate for the device platform:

+
    +
  1. include keys for input, cursor movement, selection, and text manipulation.
    2. +
  2. Standard key assignments for editing functions depend on the device operating system.
    3. +
  3. The most robust approach for providing text editing functions is to rely on browsers, which supply them for HTML inputs with type text and for elements with the contenteditable HTML attribute.
    4. +
  4. IMPORTANT: Ensure JavaScript does not interfere with browser-provided text editing functions by capturing key events for the keys used to perform them.
    5. +
+
Listbox Popup Keyboard Interaction

When focus is in a listbox popup:

    -
  1. DOM Focus is maintained on the combobox textbox and the assistive technology focus is moved within the listbox using aria-activedescendant as described in Managing Focus in Composites Using aria-activedescendant.
    2. -
  2. Selection follows focus in the listbox; the listbox allows only one suggested value to be selected at a time for the textbox value.
    3. +
  3. DOM Focus is maintained on the combobox and the assistive technology focus is moved within the listbox using aria-activedescendant as described in Managing Focus in Composites Using aria-activedescendant.
    4. +
  4. Selection follows focus in the listbox; the listbox allows only one suggested value to be selected at a time for the combobox value.
Grid Popup Keyboard Interaction

@@ -865,28 +878,25 @@

Grid Popup Keyboard Interaction
See notes below for how this aspect of grid design effects the keyboard interaction design and the way that selection moves in response to focus movements.

    -
  1. DOM Focus is maintained on the combobox textbox and the assistive technology focus is moved within the grid using aria-activedescendant as described in Managing Focus in Composites Using aria-activedescendant.
    2. -
  2. The grid allows only one suggested value to be selected at a time for the textbox value.
    3. +
  3. DOM Focus is maintained on the combobox and the assistive technology focus is moved within the grid using aria-activedescendant as described in Managing Focus in Composites Using aria-activedescendant.
    4. +
  4. The grid allows only one suggested value to be selected at a time for the combobox value.
  5. In a grid popup, each suggested value may be represented by either a single cell or an entire row. This aspect of design effects focus and selection movement:
    1. If every cell contains a different suggested value: @@ -940,9 +953,8 @@
      Tree Popup Keyboard Interaction

      When focus is in a vertically oriented tree popup:

        -
      • Enter: Accepts the currently selected suggested value by closing the popup and placing the selected value in the textbox with the input cursor at the end of the value.
        • -
      • Escape: Closes the popup and returns focus to the textbox. Optionally, clears the contents of the textbox.
        • -
      • Any printable character: Returns the focus to the textbox without closing the popup and types the character.
        • +
      • Enter: Accepts the currently selected suggested value by closing the popup, placing the selected value in the combobox, and if the combobox is editable, placing the input cursor at the end of the value.
        • +
      • Escape: Closes the popup and returns focus to the combobox. Optionally, clears the contents of the combobox.
      • Right arrow:
        • When focus is on a closed node, opens the node; focus and selection do not move.
          • @@ -959,12 +971,18 @@
          Tree Popup Keyboard Interaction
        • Down Arrow: Moves focus to the next node that is focusable without opening or closing a node and selects it if it is selectable.
        • Up Arrow: Moves focus to the previous node that is focusable without opening or closing a node and selects it if it is selectable.
          • -
        • Home: Moves focus to the first node in the tree without opening or closing a node and selects it if it is selectable.
          • -
        • End: Moves focus to the last node in the tree that is focusable without opening a node and selects it if it is selectable.
          • +
        • Home: Moves focus to the first focusable node in the tree without opening or closing a node and selects it if it is selectable.
          • +
        • End: Moves focus to the last focusable node in the tree without opening or closing a node and selects it if it is selectable.
          • +
        • Any printable character: +
            +
          • If the combobox is editable, returns the focus to the combobox without closing the popup and types the character.
            • +
          • Otherwise, moves focus to the next suggested value with a name that starts with the characters typed.
            • +
          +
          -
        1. DOM Focus is maintained on the combobox textbox and the assistive technology focus is moved within the tree using aria-activedescendant as described in Managing Focus in Composites Using aria-activedescendant.
          2. -
        2. The tree allows only one suggested value to be selected at a time for the textbox value.
          3. +
        3. DOM Focus is maintained on the combobox and the assistive technology focus is moved within the tree using aria-activedescendant as described in Managing Focus in Composites Using aria-activedescendant.
          4. +
        4. The tree allows only one suggested value to be selected at a time for the combobox value.
        5. In a tree popup, some or all parent nodes may not be selectable values; they may serve as category labels for suggested values. If focus moves to a node that is not a selectable value, either: @@ -974,7 +992,7 @@
          Tree Popup Keyboard Interaction
        6. In either case, focus is visually distinct from selection so users can readily see if a value is selected or not.
      2. -
    2. If the nodes in a tree are arranged horizontally: +
    3. If nodes in the tree are arranged horizontally (aria-orientation is set to horizontal):
      1. Down Arrow performs as Right Arrow is described above, and vice versa.
      2. Up Arrow performs as Left Arrow is described above, and vice versa.
        3. @@ -984,91 +1002,78 @@
        Tree Popup Keyboard Interaction
        Dialog Popup Keyboard Interaction

        When focus is in a dialog popup:

          -
        • There are two ways to close the popup and return focus to the textbox: +
        • There are two ways to close the popup and return focus to the combobox:
            -
          1. Perform an action in the dialog, such as activate a button, that specifies a value for the textbox.
            2. +
          2. Perform an action in the dialog, such as activate a button, that specifies a value for the combobox.
          3. Cancel out of the dialog, e.g., press Escape or activate the cancel button in the dialog. - Canceling either returns focus to the text box without changing the textbox value or returns focus to the textbox and clears the textbox. + Canceling either returns focus to the text box without changing the combobox value or returns focus to the combobox and clears the combobox.
        • The dialog implements the keyboard interaction defined in the modal dialog pattern.

        - Unlike other combobox popups, dialogs do not support aria-activedescendant so DOM focus moves into the dialog from the textbox. + Unlike other combobox popups, dialogs do not support aria-activedescendant so DOM focus moves into the dialog from the combobox.

WAI-ARIA Roles, States, and Properties

-

- The role, state, and property guidance where the ARIA 1.1 and ARIA 1.0 patterns differ is listed first. - The subsequent guidance applies to both patterns. -

-
    -
  1. When referring to the roles, states, and properties documentation for the below list of patterns used for popups, keep in mind that a combobox is a single-select widget where selection always follows focus in the popup.
    2. -
  2. The roles, states, and properties for popup elements are defined in their respective design patterns: - -
    3. -
+
+
    +
  1. + In ARIA 1.0, the combobox referenced its popup with aria-owns instead of aria-controls. + While user agents might support comboboxes with aria-owns for backwards compatibility with legacy content, it is strongly recommended that authors use aria-controls. +
    2. +
  2. When referring to the roles, states, and properties documentation for the below list of patterns used for popups, keep in mind that a combobox is a single-select widget where selection follows focus in the popup.
    3. +
  3. The roles, states, and properties for popup elements are defined in their respective design patterns: + +
    4. +
+
@@ -1945,7 +1950,7 @@

Keyboard Interaction

  1. Focusable elements, which may have role menuitem, menuitemradio, or menuitemcheckbox, are referred to as items.
  2. If a behavior applies to only certain types of items, e.g., menuitem elements, the specific role name is used.
    3. -
  3. Submenus, also known as pop-up menus, are elements with role menu.
    4. +
  4. Submenus, also known as popup menus, are elements with role menu.
  5. Except where noted, menus opened from a menubutton behave the same as menus opened from a menubar.
- +

Example

Meter Example

@@ -2649,7 +2654,7 @@

Keyboard Interaction

  • Space or Enter: Activates the tab if it was not activated automatically on focus.
  • Home (Optional): Moves focus to the first tab. Optionally, activates the newly focused tab (See note below).
  • End (Optional): Moves focus to the last tab. Optionally, activates the newly focused tab (See note below).
    • -
  • Shift + F10: If the tab has an associated pop-up menu, opens the menu.
    • +
  • Shift + F10: If the tab has an associated popup menu, opens the menu.
  • Delete (Optional): If deletion is allowed, deletes (closes) the current tab element and its associated tab panel, sets focus on the tab following the tab that was closed, and optionally activates the newly focused tab. If there is not a tab that followed the tab that was deleted, @@ -2692,7 +2697,7 @@

    WAI-ARIA Roles, States, and Properties

  • Each element with role tab has the property aria-controls referring to its associated tabpanel element.
  • The active tab element has the state aria-selected set to true and all other tab elements have it set to false.
  • Each element with role tabpanel has the property aria-labelledby referring to its associated tab element.
    • -
  • If a tab element has a pop-up menu, it has the property aria-haspopup set to either menu or true.
    • +
  • If a tab element has a popup menu, it has the property aria-haspopup set to either menu or true.
  • If the tablist element is vertically oriented, it has the property aria-orientation set to vertical. The default value of aria-orientation for a tablist element is horizontal. @@ -4684,7 +4689,7 @@

    Accessible Name Guidance by Role
  • Warning! Using aria-label or aria-labelledby will hide any descendant content from assistive technologies.
  • Ideally named by visible, descendant content.
    • -
  • See the Combo Box Design Pattern.
    • +
  • See the Combobox Design Pattern.
    • @@ -6583,12 +6588,12 @@

    Structural Roles

    These roles express the meaning that is conveyed by the layout and appearance of elements that organize and structure content, such as headings, lists, and tables.

    - some host languages, such as HTML, include elements that express the same semantics as an ARIA role. + some host languages, such as HTML, include elements that express the same semantics as an ARIA role. For instance, the HTML <p> element is mapped to accessibility APIs in exactly the same way as <div role="paragraph">. The ARIA and HTML specifications refer to this mapping of HTML elements to ARIA attributes as implied semantics, i.e., the implied ARIA role of the HTML <p> element is paragraph.

    - When developing HTML, it is important to use native HTML elements where ever possible. + When developing HTML, it is important to use native HTML elements where ever possible. Do not use an ARIA role or property if it is possible to use an HTML element that has equivalent semantics. Circumstances where it is appropriate to use ARIA attributes instead of equivalent HTML are:

    @@ -6645,14 +6650,14 @@

    Structural Roles

    subscriptsub superscriptsup tabletable - termdfn + termdfn timetime toolbarNo equivalent element tooltipNo equivalent element

    • - +

    Indexes

    - +
    - + diff --git a/examples/combobox/aria1.0pattern/css/combobox-1.0.css b/examples/combobox/aria1.0pattern/css/combobox-1.0.css deleted file mode 100644 index 4240f8a17a..0000000000 --- a/examples/combobox/aria1.0pattern/css/combobox-1.0.css +++ /dev/null @@ -1,36 +0,0 @@ -.annotate { - font-style: italic; - color: #366ed4; -} - -.combobox-list { - position: relative; -} - -.combobox-inline label, -.combobox-list label { - margin: 0; - padding: 0; - display: block; -} - -.combobox-list .group input, -.combobox-list .group button { - display: inline; - background-color: #eee; -} - -.combobox-list .group input.focus { - background-color: #d6e8f5; - outline-color: #348ccb; -} - -.combobox-list .group button { - margin: 0; - padding: 0 0.125em 0 0.125em; - position: relative; - top: 1px; - left: -2px; - font-size: 85%; - background-color: #eee; -} diff --git a/examples/combobox/aria1.0pattern/css/listbox.css b/examples/combobox/aria1.0pattern/css/listbox.css deleted file mode 100644 index fb238fc330..0000000000 --- a/examples/combobox/aria1.0pattern/css/listbox.css +++ /dev/null @@ -1,60 +0,0 @@ -ul[role="listbox"] { - margin: 0; - padding: 0; - position: absolute; - top: 3em; - list-style: none; - background-color: #eee; - display: none; - border: 2px #333 solid; - height: 12em; - width: 10em; - overflow: scroll; -} - -ul[role="listbox"] li[role="option"] { - margin: 0; - padding: 0; - padding-left: 0.125em; - border-top: 1px solid transparent; - border-bottom: 1px solid transparent; -} - -[role="listbox"].focus { - border-color: #348ccb; -} - -[role="listbox"] [role="option"] { - display: block; - margin: 0.25em; - padding: 0; - background-color: #eee; - font-size: 100%; -} - -/* focus and hover styling */ - -button:focus, -button:hover, -input:focus, -input:hover { - outline: 2px solid black; -} - -input:focus, -input:hover { - background-color: #eee; -} - -[role="listbox"] [role="option"][aria-selected="true"] { - background-color: #ccc; -} - -[role="listbox"].focus [role="option"][aria-selected="true"] { - background-color: #aed2ea; - border-color: #348ccb; -} - -[role="listbox"] li[role="option"]:hover { - background-color: #c2ddef; -} diff --git a/examples/combobox/aria1.1pattern/imgs/arrow_drop_down_grey_27x27.png b/examples/combobox/aria1.1pattern/imgs/arrow_drop_down_grey_27x27.png deleted file mode 100644 index 7007ef59f0..0000000000 Binary files a/examples/combobox/aria1.1pattern/imgs/arrow_drop_down_grey_27x27.png and /dev/null differ diff --git a/examples/combobox/aria1.1pattern/js/listbox-combo-example.js b/examples/combobox/aria1.1pattern/js/listbox-combo-example.js deleted file mode 100644 index 5882d9901c..0000000000 --- a/examples/combobox/aria1.1pattern/js/listbox-combo-example.js +++ /dev/null @@ -1,139 +0,0 @@ -/* -* This content is licensed according to the W3C Software License at -* https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document -* -* ARIA Combobox Examples -*/ - -var FRUITS_AND_VEGGIES = [ - 'Apple', - 'Artichoke', - 'Asparagus', - 'Banana', - 'Beets', - 'Bell pepper', - 'Broccoli', - 'Brussels sprout', - 'Cabbage', - 'Carrot', - 'Cauliflower', - 'Celery', - 'Chard', - 'Chicory', - 'Corn', - 'Cucumber', - 'Daikon', - 'Date', - 'Edamame', - 'Eggplant', - 'Elderberry', - 'Fennel', - 'Fig', - 'Garlic', - 'Grape', - 'Honeydew melon', - 'Iceberg lettuce', - 'Jerusalem artichoke', - 'Kale', - 'Kiwi', - 'Leek', - 'Lemon', - 'Mango', - 'Mangosteen', - 'Melon', - 'Mushroom', - 'Nectarine', - 'Okra', - 'Olive', - 'Onion', - 'Orange', - 'Parship', - 'Pea', - 'Pear', - 'Pineapple', - 'Potato', - 'Pumpkin', - 'Quince', - 'Radish', - 'Rhubarb', - 'Shallot', - 'Spinach', - 'Squash', - 'Strawberry', - 'Sweet potato', - 'Tomato', - 'Turnip', - 'Ugli fruit', - 'Victoria plum', - 'Watercress', - 'Watermelon', - 'Yam', - 'Zucchini' -]; - -function searchVeggies (searchString) { - var results = []; - - for (var i = 0; i < FRUITS_AND_VEGGIES.length; i++) { - var veggie = FRUITS_AND_VEGGIES[i].toLowerCase(); - if (veggie.indexOf(searchString.toLowerCase()) === 0) { - results.push(FRUITS_AND_VEGGIES[i]); - } - } - - return results; -} - -/** - * @function onload - * @desc Initialize the combobox examples once the page has loaded - */ -window.addEventListener('load', function () { - var ex1Combobox = new aria.ListboxCombobox( - document.getElementById('ex1-combobox'), - document.getElementById('ex1-input'), - document.getElementById('ex1-listbox'), - searchVeggies, - false - ); - - var ex2Combobox = new aria.ListboxCombobox( - document.getElementById('ex2-combobox'), - document.getElementById('ex2-input'), - document.getElementById('ex2-listbox'), - searchVeggies, - true - ); - - var ex3Combobox = new aria.ListboxCombobox( - document.getElementById('ex3-combobox'), - document.getElementById('ex3-input'), - document.getElementById('ex3-listbox'), - searchVeggies, - true, - function () { - // on show - document.getElementById('ex3-combobox-arrow') - .setAttribute('aria-label', 'Hide vegetable options'); - }, - function () { - // on hide - document.getElementById('ex3-combobox-arrow') - .setAttribute('aria-label', 'Show vegetable options'); - } - ); - - document.getElementById('ex3-combobox-arrow').addEventListener( - 'click', - function () { - if (ex3Combobox.shown) { - document.getElementById('ex3-input').focus(); - ex3Combobox.hideListbox(); - } - else { - document.getElementById('ex3-input').focus(); - ex3Combobox.updateResults(true); - } - } - ); -}); diff --git a/examples/combobox/aria1.1pattern/js/listbox-combobox.js b/examples/combobox/aria1.1pattern/js/listbox-combobox.js deleted file mode 100644 index a263c9dcc7..0000000000 --- a/examples/combobox/aria1.1pattern/js/listbox-combobox.js +++ /dev/null @@ -1,259 +0,0 @@ -/* -* This content is licensed according to the W3C Software License at -* https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document -*/ -/** - * @constructor - * - * @desc - * Combobox object representing the state and interactions for a combobox - * widget - * - * @param comboboxNode - * The DOM node pointing to the combobox - * @param input - * The input node - * @param listbox - * The listbox node to load results in - * @param searchFn - * The search function. The function accepts a search string and returns an - * array of results. - */ -aria.ListboxCombobox = function ( - comboboxNode, - input, - listbox, - searchFn, - shouldAutoSelect, - onShow, - onHide -) { - this.combobox = comboboxNode; - this.input = input; - this.listbox = listbox; - this.searchFn = searchFn; - this.shouldAutoSelect = shouldAutoSelect; - this.onShow = onShow || function () {}; - this.onHide = onHide || function () {}; - this.activeIndex = -1; - this.resultsCount = 0; - this.shown = false; - this.hasInlineAutocomplete = - input.getAttribute('aria-autocomplete') === 'both'; - - this.setupEvents(); -}; - -aria.ListboxCombobox.prototype.setupEvents = function () { - document.body.addEventListener('click', this.checkHide.bind(this)); - this.input.addEventListener('keyup', this.checkKey.bind(this)); - this.input.addEventListener('keydown', this.setActiveItem.bind(this)); - this.input.addEventListener('focus', this.checkShow.bind(this)); - this.input.addEventListener('blur', this.checkSelection.bind(this)); - this.listbox.addEventListener('click', this.clickItem.bind(this)); -}; - -aria.ListboxCombobox.prototype.checkKey = function (evt) { - var key = evt.which || evt.keyCode; - - switch (key) { - case aria.KeyCode.UP: - case aria.KeyCode.DOWN: - case aria.KeyCode.ESC: - case aria.KeyCode.RETURN: - evt.preventDefault(); - return; - default: - this.updateResults(false); - } - - if (this.hasInlineAutocomplete) { - switch (key) { - case aria.KeyCode.BACKSPACE: - return; - default: - this.autocompleteItem(); - } - } -}; - -aria.ListboxCombobox.prototype.updateResults = function (shouldShowAll) { - var searchString = this.input.value; - var results = this.searchFn(searchString); - - this.hideListbox(); - - if (!shouldShowAll && !searchString) { - results = []; - } - - if (results.length) { - for (var i = 0; i < results.length; i++) { - var resultItem = document.createElement('li'); - resultItem.className = 'result'; - resultItem.setAttribute('role', 'option'); - resultItem.setAttribute('id', 'result-item-' + i); - resultItem.innerText = results[i]; - if (this.shouldAutoSelect && i === 0) { - resultItem.setAttribute('aria-selected', 'true'); - aria.Utils.addClass(resultItem, 'focused'); - this.activeIndex = 0; - } - this.listbox.appendChild(resultItem); - } - aria.Utils.removeClass(this.listbox, 'hidden'); - this.combobox.setAttribute('aria-expanded', 'true'); - this.resultsCount = results.length; - this.shown = true; - this.onShow(); - } -}; - -aria.ListboxCombobox.prototype.setActiveItem = function (evt) { - var key = evt.which || evt.keyCode; - var activeIndex = this.activeIndex; - - if (key === aria.KeyCode.ESC) { - this.hideListbox(); - setTimeout((function () { - // On Firefox, input does not get cleared here unless wrapped in - // a setTimeout - this.input.value = ''; - }).bind(this), 1); - return; - } - - if (this.resultsCount < 1) { - if (this.hasInlineAutocomplete && (key === aria.KeyCode.DOWN || key === aria.KeyCode.UP)) { - this.updateResults(true); - } - else { - return; - } - } - - var prevActive = this.getItemAt(activeIndex); - var activeItem; - - switch (key) { - case aria.KeyCode.UP: - if (activeIndex <= 0) { - activeIndex = this.resultsCount - 1; - } - else { - activeIndex--; - } - break; - case aria.KeyCode.DOWN: - if (activeIndex === -1 || activeIndex >= this.resultsCount - 1) { - activeIndex = 0; - } - else { - activeIndex++; - } - break; - case aria.KeyCode.RETURN: - activeItem = this.getItemAt(activeIndex); - this.selectItem(activeItem); - return; - case aria.KeyCode.TAB: - this.checkSelection(); - this.hideListbox(); - return; - default: - return; - } - - evt.preventDefault(); - - activeItem = this.getItemAt(activeIndex); - this.activeIndex = activeIndex; - - if (prevActive) { - aria.Utils.removeClass(prevActive, 'focused'); - prevActive.setAttribute('aria-selected', 'false'); - } - - if (activeItem) { - this.input.setAttribute( - 'aria-activedescendant', - 'result-item-' + activeIndex - ); - aria.Utils.addClass(activeItem, 'focused'); - activeItem.setAttribute('aria-selected', 'true'); - if (this.hasInlineAutocomplete) { - this.input.value = activeItem.innerText; - } - } - else { - this.input.setAttribute( - 'aria-activedescendant', - '' - ); - } -}; - -aria.ListboxCombobox.prototype.getItemAt = function (index) { - return document.getElementById('result-item-' + index); -}; - -aria.ListboxCombobox.prototype.clickItem = function (evt) { - if (evt.target && evt.target.nodeName == 'LI') { - this.selectItem(evt.target); - } -}; - -aria.ListboxCombobox.prototype.selectItem = function (item) { - if (item) { - this.input.value = item.innerText; - this.hideListbox(); - } -}; - -aria.ListboxCombobox.prototype.checkShow = function (evt) { - this.updateResults(false); -}; - -aria.ListboxCombobox.prototype.checkHide = function (evt) { - if (evt.target === this.input || this.combobox.contains(evt.target)) { - return; - } - this.hideListbox(); -}; - -aria.ListboxCombobox.prototype.hideListbox = function () { - this.shown = false; - this.activeIndex = -1; - this.listbox.innerHTML = ''; - aria.Utils.addClass(this.listbox, 'hidden'); - this.combobox.setAttribute('aria-expanded', 'false'); - this.resultsCount = 0; - this.input.setAttribute( - 'aria-activedescendant', - '' - ); - this.onHide(); -}; - -aria.ListboxCombobox.prototype.checkSelection = function () { - if (this.activeIndex < 0) { - return; - } - var activeItem = this.getItemAt(this.activeIndex); - this.selectItem(activeItem); -}; - -aria.ListboxCombobox.prototype.autocompleteItem = function () { - var autocompletedItem = this.listbox.querySelector('.focused'); - var inputText = this.input.value; - - if (!autocompletedItem || !inputText) { - return; - } - - var autocomplete = autocompletedItem.innerText; - if (inputText !== autocomplete) { - this.input.value = autocomplete; - this.input.setSelectionRange(inputText.length, autocomplete.length); - } -}; diff --git a/examples/combobox/aria1.1pattern/listbox-combo.html b/examples/combobox/aria1.1pattern/listbox-combo.html deleted file mode 100644 index dbce52ce70..0000000000 --- a/examples/combobox/aria1.1pattern/listbox-combo.html +++ /dev/null @@ -1,579 +0,0 @@ - - - - -ARIA 1.1 Combobox with Listbox Popup Examples | WAI-ARIA Authoring Practices 1.2 - - - - - - - - - - - - - - - - -
    -

    ARIA 1.1 Combobox with Listbox Popup Examples

    -

    - The following three example comboboxes implement the ARIA 1.1 form of the - combobox design pattern - using a listbox popup. - Each of the three comboboxes also demonstrates a different form of the autocomplete behaviors described in the design pattern. -

    -

    - In these examples, users can specify the name of a fruit or vegetable by either typing a value in the box or choosing from the list. - The list becomes available after the textbox contains a character that matches the beginning of the name of one of the items in the list of suggested values. - Users may type any value in the textbox; this implementation does not limit input to values that are in the list of suggested values. -

    -

    Similar examples include:

    - - -
    -

    Examples

    -

    Example 1: List Autocomplete with Manual Selection

    - -
    - -
    - - -
    -
    - -

    Notes

    -

    List autocomplete with manual selection means that:

    -
      -
    1. - When the listbox popup is displayed, it contains suggested values that complete or logically correspond to the characters typed in the textbox. - In this implementation, the values in the listbox have names that start with the characters typed in the textbox. -
      2. -
    2. Users may set the value of the combobox by choosing a value from the list of suggested values.
      3. -
    3. If the user does not choose a value from the listbox before moving focus outside the combobox, the value that the user typed, if any, becomes the value of the combobox.
      4. -
    -

    Example 2: List Autocomplete with Automatic Selection

    - -
    - -
    - - -
    -
    - -

    Notes

    -

    List autocomplete with automatic selection means that:

    -
      -
    1. - When the listbox popup is displayed, it contains suggested values that complete or logically correspond to the characters typed in the textbox. - In this implementation, the values in the listbox have names that start with the characters typed in the textbox. -
      2. -
    2. The first suggestion is automatically highlighted as selected.
      3. -
    3. The automatically selected suggestion becomes the value of the textbox when the combobox loses focus unless the user chooses a different suggestion or changes the character string in the textbox.
      4. -
    -

    Example 3: List with Inline Autocomplete

    - -
    - -
    - - -
    -
    - -

    Notes

    -

    List with inline autocomplete means that:

    -
      -
    1. With the exception of one additional feature, this example has the same autocomplete behavior as the previous example that has list with automatic selection.
      2. -
    2. The additional feature is that the portion of the selected suggestion that has not been typed by the user, a completion string, appears inline after the input cursor in the textbox.
      3. -
    3. The inline completion string is visually highlighted and has a selected state.
      4. -
    -
    - -
    -

    Keyboard Support

    -

    - The example comboboxes on this page implement the following keyboard interface. - Other variations and options for the keyboard interface are described in the - Keyboard Interaction section of the combobox design pattern. -

    -

    Textbox

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    KeyFunction
    Down Arrow -
      -
    • If the listbox is displayed: -
        -
      • Example 1: Moves focus to the first suggested value.
        • -
      • Examples 2 and 3: Moves focus to the second suggested value. Note that the first value is automatically selected.
        • -
      -
      • -
    • If the listbox is not displayed, in example 3 only, opens the listbox and moves focus to the first value.
      • -
    -
    Up Arrow -
      -
    • If the listbox is displayed, moves focus to the last suggested value.
      • -
    • If the listbox is not displayed, in example 3 only, opens the listbox and moves focus to the last value.
      • -
    -
    Enter -
      -
    • Example 1: Does nothing.
      • -
    • Examples 2 and 3: If the listbox is displayed and the first option is automatically selected: -
        -
      • Sets the textbox value to the content of the selected option.
        • -
      • Closes the listbox.
        • -
      -
      • -
    -
    Escape -
      -
    • Clears the textbox
      • -
    • If the listbox is displayed, closes it.
      • -
    -
    Standard single line text editing keys -
      -
    • Keys used for cursor movement and text manipulation, such as Delete and Shift + Right Arrow.
      • -
    • An HTML input with type=text is used for the textbox so the browser will provide platform-specific editing keys.
      • -
    -
    -

    Listbox Popup

    -

    - NOTE: When visual focus is in the listbox, DOM focus remains on the textbox and the value of aria-activedescendant on the textbox is set to a value that refers to the listbox option that is visually indicated as focused. - Where the following descriptions of keyboard commands mention focus, they are referring to the visual focus indicator. - For more information about this focus management technique, see - Using aria-activedescendant to Manage Focus. -

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    KeyFunction
    Enter -
      -
    • Sets the textbox value to the content of the focused option in the listbox.
      • -
    • Closes the listbox.
      • -
    • Sets focus on the textbox.
      • -
    -
    Escape -
      -
    • Closes the listbox.
      • -
    • Sets focus on the textbox.
      • -
    • Clears the textbox.
      • -
    -
    Down Arrow -
      -
    • Moves focus to the next option.
      • -
    • If focus is on the last option, moves focus to the first option.
      • -
    • Note: This wrapping behavior is useful when Home and End move the editing cursor as described below.
      • -
    -
    Up Arrow -
      -
    • Moves focus to the previous option.
      • -
    • If focus is on the first option, moves focus to the last option.
      • -
    • Note: This wrapping behavior is useful when Home and End move the editing cursor as described below.
      • -
    -
    Right ArrowMoves focus to the textbox and moves the editing cursor one character to the right.
    Left ArrowMoves focus to the textbox and moves the editing cursor one character to the left.
    HomeMoves focus to the textbox and places the editing cursor at the beginning of the field.
    EndMoves focus to the textbox and places the editing cursor at the end of the field.
    Printable Characters -
      -
    • Moves focus to the textbox.
      • -
    • Types the character in the textbox.
      • -
    -
    -
    - -
    -

    Role, Property, State, and Tabindex Attributes

    -

    - The example comboboxes on this page implement the following ARIA roles, states, and properties. - Information about other ways of applying ARIA roles, states, and properties is available in the - Roles, States, and Properties section of the combobox design pattern. -

    -

    Combobox Container

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    RoleAttributeElementUsage
    - combobox - div -
      -
    • Identifies the element as a combobox.
      • -
    • Note: -
        -
      • Unlike this ARIA 1.1 combobox, an ARIA 1.0 pattern would have the combobox role on the textbox input instead of a parent container of the textbox.
        • -
      • The ARIA 1.1 pattern demonstrated on this page enables screen reader users to perceive both the input and the popup when using reading mode (see note below about aria-owns).
        • -
      -
      • -
    -
    - aria-haspopup=listbox - div -
      -
    • Indicates that the combobox can popup a listbox to suggest values.
      • -
    • This is the default value for elements with the combobox role.
      • -
    -
    - aria-owns=IDREF - div -
      -
    • Refers to the element that serves as the listbox popup.
      • -
    • Tells browsers to arrange the screen reader reading order so the listbox, when it is visible, immediately follows the other elements inside the combobox, regardless of where the listbox element is in the DOM.
      • -
    -
    - aria-expanded=false - divIndicates that the popup element is not displayed.
    - aria-expanded=true - divIndicates that the popup element is displayed.
    -

    Textbox

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    RoleAttributeElementUsage
    - id="string" - input[type="text"] -
      -
    • Referenced by for attribute of label element to provide an accessible label.
      • -
    • Recommended labeling method for HTML input elements so clicking label focuses input.
      • -
    -
    - aria-autocomplete=list - input[type="text"]Examples 1 and 2: Indicates that the autocomplete behavior of the text input is to suggest a list of possible values in a popup and that the suggestions are related to the string that is present in the textbox.
    - aria-autocomplete=both - input[type="text"]Example 3: Indicates that the autocomplete behavior of the text input is to both show an inline completion string and suggest a list of possible values in a popup where the suggestions are related to the string that is present in the textbox.
    - aria-controls=IDREF - input[type="text"] -
      -
    • Identifies the popup element that lists suggested values.
      • -
    • Note: -
        -
      • In the ARIA 1.0 combobox pattern, the textbox has aria-owns instead of aria-controls.
        • -
      • In this ARIA 1.1 pattern, aria-owns is instead on the parent container so the popup element is a sibling of the textbox instead of a child of the textbox, making it perceivable by screen reader users as an element adjacent to the textbox when using a reading cursor or touch interface.
        • -
      -
      • -
    -
    - aria-activedescendant=IDREF - input[type="text"] -
      -
    • When an option in the listbox is visually indicated as having keyboard focus, refers to that option.
      • -
    • When navigation keys, such as Down Arrow, are pressed, the JavaScript changes the value.
      • -
    • Enables assistive technologies to know which element the application regards as focused while DOM focus remains on the input element.
      • -
    • - For more information about this focus management technique, see - Using aria-activedescendant to Manage Focus. -
      • -
    -
    -

    Listbox Popup

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    RoleAttributeElementUsage
    - listbox - - ul - Identifies the ul element as a listbox.
    - aria-labelledby=IDREF - ulProvides a label for the listbox element of the combobox.
    - option - li -
      -
    • Identifies the element as a listbox option.
      • -
    • The text content of the element provides the accessible name of the option.
      • -
    -
    - aria-selected=true - li -
      -
    • Specified on an option in the listbox when it is visually highlighted as selected.
      • -
    • In example 1, occurs only when an option in the list is referenced by aria-activedescendant.
      • -
    • In examples 2 and 3, also occurs when focus is in the textbox and the first option is automatically selected.
      • -
    -
    -
    - -
    -

    Javascript and CSS Source Code

    - -
    - -
    -

    HTML Source Code

    -

    Example 1

    - -
    - -

    Example 2

    - -
    - -

    Example 3

    - -
    - - -
    -
    - - - diff --git a/examples/combobox/aria1.0pattern/combobox-autocomplete-both.html b/examples/combobox/combobox-autocomplete-both.html similarity index 81% rename from examples/combobox/aria1.0pattern/combobox-autocomplete-both.html rename to examples/combobox/combobox-autocomplete-both.html index 92708ef296..0a4b273c27 100644 --- a/examples/combobox/aria1.0pattern/combobox-autocomplete-both.html +++ b/examples/combobox/combobox-autocomplete-both.html @@ -2,40 +2,35 @@ -Legacy ARIA 1.0 Combobox With Both List and Inline Autocomplete Example | WAI-ARIA Authoring Practices 1.2 +Editable Combobox With Both List and Inline Autocomplete Example | WAI-ARIA Authoring Practices 1.2 - - - - + + + + - - - + +
    -

    Legacy ARIA 1.0 Combobox With Both List and Inline Autocomplete Example

    -

    - NOTE: Please provide feedback in - issue 553. -

    +

    Editable Combobox With Both List and Inline Autocomplete Example

    The below combobox for choosing the name of a US state or territory demonstrates the - ARIA 1.0 design pattern for combobox. + design pattern for combobox. The design pattern describes four types of autocomplete behavior. This example illustrates the autocomplete behavior referred to in the pattern as list with inline completion. If the user types one or more characters in the edit box and the typed characters match the beginning of the name of one or more states or territories, @@ -46,22 +41,20 @@

    Legacy ARIA 1.0 Combobox With Both List and Inline Autocomplete Example

    Similar examples include:

    Example

    -
    - + +
    - + aria-expanded="false" aria-controls="lb1"> +
    • Alabama
      • @@ -131,7 +124,7 @@

      Keyboard Support

      The example combobox on this page implements the following keyboard interface. Other variations and options for the keyboard interface are described in the - Keyboard Interaction section of the combobox design pattern. + Keyboard Interaction section of the combobox design pattern.

      Textbox

      @@ -196,7 +189,7 @@

      Listbox Popup

      NOTE: When visual focus is in the listbox, DOM focus remains on the textbox and the value of aria-activedescendant on the textbox is set to a value that refers to the listbox option that is visually indicated as focused. Where the following descriptions of keyboard commands mention focus, they are referring to the visual focus indicator. For more information about this focus management technique, see - Using aria-activedescendant to Manage Focus. + Using aria-activedescendant to Manage Focus.

      @@ -280,7 +273,7 @@

      Role, Property, State, and Tabindex Attributes

      The example combobox on this page implements the following ARIA roles, states, and properties. Information about other ways of applying ARIA roles, states, and properties is available in the - Roles, States, and Properties section of the combobox design pattern. + Roles, States, and Properties section of the combobox design pattern.

      Textbox

      @@ -299,12 +292,7 @@

      Textbox

      - + @@ -314,26 +302,13 @@

      Textbox

      - + - - - - - - - + @@ -364,7 +339,7 @@

      Textbox

    • Enables assistive technologies to know which element the application regards as focused while DOM focus remains on the input element.
    • For more information about this focus management technique, see - Using aria-activedescendant to Manage Focus. + Using aria-activedescendant to Manage Focus.
      • @@ -432,11 +407,10 @@

      Listbox Popup

      Javascript and CSS Source Code

      -
      • CSS: - combobox-1.0.css + combobox.css
      • CSS: @@ -444,7 +418,7 @@

        Javascript and CSS Source Code

      • Javascript: - combobox-1.0-list.js + combobox-list.js
      • Javascript: @@ -467,7 +441,6 @@

        HTML Source Code

        - - + + + + - - - + +
        -

        Legacy ARIA 1.0 Combobox With List Autocomplete Example

        -

        - NOTE: Please provide feedback on this example page in - issue 554. -

        +

        Editable Combobox With List Autocomplete Example

        The below combobox for choosing the name of a US state or territory demonstrates the - ARIA 1.0 design pattern for combobox. + ARIA design pattern for combobox. The design pattern describes four types of autocomplete behavior. This example illustrates the autocomplete behavior known as list autocomplete with manual selection. If the user types one or more characters in the edit box and the typed characters match the beginning of the name of one or more states or territories, a listbox popup appears containing the matching names. @@ -45,23 +40,21 @@

        Legacy ARIA 1.0 Combobox With List Autocomplete Example

        Similar examples include:

        Example

        -
        - + +
        - + aria-expanded="false" aria-controls="cb1-listbox"> +
      input[type="text"] -
        -
      • Identifies the input as a combobox.
        • -
      • Note: The primary difference between the ARIA 1.0 pattern and the ARIA 1.1 pattern is the placement of the combobox role.
        • -
      -       		Identifies the input as a combobox.
      input[type="text"] Indicates that the autocomplete behavior of the text input is to both show an inline completion string and suggest a list of possible values in a popup where the suggestions are related to the string that is present in the textbox.
      - aria-haspopup="true" + aria-controls="#IDREF" input[type="text"]Indicates that the combobox can popup another element to suggest values.
      - aria-owns="#IDREF" - input[type="text"] -
        -
      • Identifies the element that serves as the popup.
        • -
      • Note: In the ARIA 1.1 combobox pattern, the combobox uses aria-controls instead of aria-owns.
        • -
      -       		Identifies the element that serves as the popup.
      @@ -191,7 +184,7 @@

      Listbox Popup

      NOTE: When visual focus is in the listbox, DOM focus remains on the textbox and the value of aria-activedescendant on the textbox is set to a value that refers to the listbox option that is visually indicated as focused. Where the following descriptions of keyboard commands mention focus, they are referring to the visual focus indicator. For more information about this focus management technique, see - Using aria-activedescendant to Manage Focus. + Using aria-activedescendant to Manage Focus.

      @@ -275,7 +268,7 @@

      Role, Property, State, and Tabindex Attributes

      The example combobox on this page implements the following ARIA roles, states, and properties. Information about other ways of applying ARIA roles, states, and properties is available in the - Roles, States, and Properties section of the combobox design pattern. + Roles, States, and Properties section of the combobox design pattern.

      Textbox

      @@ -294,12 +287,7 @@

      Textbox

      - + @@ -309,26 +297,13 @@

      Textbox

      - + - - - - - - - + @@ -359,7 +334,7 @@

      Textbox

    • Enables assistive technologies to know which element the application regards as focused while DOM focus remains on the input element.
    • For more information about this focus management technique, see - Using aria-activedescendant to Manage Focus. + Using aria-activedescendant to Manage Focus.
      • @@ -430,7 +405,7 @@

      Javascript and CSS Source Code

      input[type="text"] -
        -
      • Identifies the input as a combobox.
        • -
      • Note: The primary difference between the ARIA 1.0 pattern and the ARIA 1.1 pattern is the placement of the combobox role.
        • -
      -       		Identifies the input as a combobox.
      input[type="text"] Indicates that the autocomplete behavior of the text input is to suggest a list of possible values in a popup and that the suggestions are related to the string that is present in the textbox.
      - aria-haspopup="true" + aria-controls="#IDREF" input[type="text"]Indicates that the combobox can popup another element to suggest values.
      - aria-owns="#IDREF" - input[type="text"] -
        -
      • Identifies the element that serves as the popup.
        • -
      • Note: In the ARIA 1.1 combobox pattern, the combobox uses aria-controls instead of aria-owns.
        • -
      -       		Identifies the element that serves as the popup.
      @@ -143,7 +134,7 @@

      Listbox Popup

      NOTE: When visual focus is in the listbox, DOM focus remains on the textbox and the value of aria-activedescendant on the textbox is set to a value that refers to the listbox option that is visually indicated as focused. Where the following descriptions of keyboard commands mention focus, they are referring to the visual focus indicator. For more information about this focus management technique, see - Using aria-activedescendant to Manage Focus. + Using aria-activedescendant to Manage Focus.

      @@ -227,7 +218,7 @@

      Role, Property, State, and Tabindex Attributes

      The example combobox on this page implements the following ARIA roles, states, and properties. Information about other ways of applying ARIA roles, states, and properties is available in the - Roles, States, and Properties section of the combobox design pattern. + Roles, States, and Properties section of the combobox design pattern.

      Textbox

      @@ -246,12 +237,7 @@

      Textbox

      - + @@ -261,26 +247,13 @@

      Textbox

      - - - - - - - + - + @@ -311,7 +284,7 @@

      Textbox

    • Enables assistive technologies to know which element the application regards as focused while DOM focus remains on the input element.
    • For more information about this focus management technique, see - Using aria-activedescendant to Manage Focus. + Using aria-activedescendant to Manage Focus.
      • @@ -382,7 +355,7 @@

      Javascript and CSS Source Code

      • CSS: - combobox-1.0.css + combobox.css
      • CSS: @@ -390,7 +363,7 @@

        Javascript and CSS Source Code

      • Javascript: - combobox-1.0-list.js + combobox-list.js
      • Javascript: @@ -415,7 +388,7 @@

        HTML Source Code

        diff --git a/examples/combobox/css/combobox.css b/examples/combobox/css/combobox.css new file mode 100644 index 0000000000..d437c332ab --- /dev/null +++ b/examples/combobox/css/combobox.css @@ -0,0 +1,86 @@ +.combobox-list { + position: relative; +} + +.combobox .group { + display: inline-flex; +} + +.combobox .group input, +.combobox .group button { + background-color: white; + color: black; + box-sizing: border-box; + height: 1.75rem; + padding: 0; + margin: 0; + vertical-align: bottom; + border: 1px solid gray; +} + +.combobox .group input { + width: 10.75rem; + border-right: none; + outline: none; + font-size: 87.5%; + padding: 0.1em 0.3em; +} + +.combobox .group button { + width: 1.25rem; + border-left: none; + outline: none; + font-size: 70%; +} + +.combobox .group.focus { + outline: 2px solid black; + outline-offset: 1px; +} + +ul[role="listbox"] { + margin: 0; + padding: 0; + position: absolute; + left: 0; + top: 1.75rem; + list-style: none; + background-color: white; + display: none; + box-sizing: border-box; + border: 1px gray solid; + border-top: none; + max-height: 12em; + width: 12rem; + overflow: scroll; + overflow-x: hidden; + font-size: 87.5%; +} + +ul[role="listbox"] li[role="option"] { + border-top: 1px solid transparent; + border-bottom: 1px solid transparent; + display: block; + margin: 0; + padding: 0.1em 0.3em; +} + +/* focus and hover styling */ + +[role="listbox"].focus [role="option"][aria-selected="true"] { + background-color: #DEF; + border-color: #8CCBF2; +} + +@media (forced-colors: active), (-ms-high-contrast: active) { + [role="listbox"].focus [role="option"][aria-selected="true"] { + -ms-high-contrast-adjust: none; /* disable the backgrounds that Edge puts behind text */ + background-color: highlight; + color: highlighttext; + border-color: currentcolor; + } +} + +[role="listbox"] li[role="option"]:hover { + background-color: #DEF; +} diff --git a/examples/combobox/aria1.1pattern/css/combobox-1.1.css b/examples/combobox/css/grid-combo.css similarity index 95% rename from examples/combobox/aria1.1pattern/css/combobox-1.1.css rename to examples/combobox/css/grid-combo.css index 25e9671a3d..29324bea16 100644 --- a/examples/combobox/aria1.1pattern/css/combobox-1.1.css +++ b/examples/combobox/css/grid-combo.css @@ -1,8 +1,3 @@ -.annotate { - font-style: italic; - color: #366ed4; -} - .hidden { display: none; } diff --git a/examples/combobox/aria1.1pattern/grid-combo.html b/examples/combobox/grid-combo.html similarity index 67% rename from examples/combobox/aria1.1pattern/grid-combo.html rename to examples/combobox/grid-combo.html index 51c53bd95a..4f673657e9 100644 --- a/examples/combobox/aria1.1pattern/grid-combo.html +++ b/examples/combobox/grid-combo.html @@ -2,35 +2,35 @@ -ARIA 1.1 Combobox with Grid Popup Example | WAI-ARIA Authoring Practices 1.2 +Editable Combobox with Grid Popup Example | WAI-ARIA Authoring Practices 1.2 - - - - - + + + + + - - + +
        -

        ARIA 1.1 Combobox with Grid Popup Example

        +

        Editable Combobox with Grid Popup Example

        - The following example combobox implements the - combobox design pattern + The following example combobox implements the + combobox design pattern using a grid for the suggested values popup.

        @@ -44,11 +44,11 @@

        ARIA 1.1 Combobox with Grid Popup Example

        Similar examples include:

        +

        Example

        @@ -57,12 +57,11 @@

        Example

        Fruits and vegetables
        -
        - +

        Keyboard Support

        - The example combobox on this page implements the following keyboard interface. - Other variations and options for the keyboard interface are described in the - Keyboard Interaction section of the combobox design pattern. + The example combobox on this page implements the following keyboard interface. + Other variations and options for the keyboard interface are described in the + Keyboard Interaction section of the combobox design pattern.

        Textbox

      input[type="text"] -
        -
      • Identifies the input as a combobox.
        • -
      • Note: The primary difference between the ARIA 1.0 pattern and the ARIA 1.1 pattern is the placement of the combobox role.
        • -
      -       		Identifies the input as a combobox.
      input[type="text"] Indicates that the suggestions in the combobox popup are not values that complete the current textbox input.
      - aria-haspopup="true" - input[type="text"]Indicates that the combobox can popup another element to suggest values.
      - aria-owns="#IDREF" + aria-controls="#IDREF" input[type="text"] -
        -
      • Identifies the element that serves as the popup.
        • -
      • Note: In the ARIA 1.1 combobox pattern, the combobox uses aria-controls instead of aria-owns.
        • -
      -       		Identifies the element that serves as the popup.
      @@ -126,8 +125,8 @@

      Grid Popup

      NOTE: When visual focus is in the grid, DOM focus remains on the textbox and the value of aria-activedescendant on the textbox is set to a value that refers to an element in the grid that is visually indicated as focused. Where the following descriptions of keyboard commands mention focus, they are referring to the visual focus indicator. - For more information about this focus management technique, see - Using aria-activedescendant to Manage Focus. + For more information about this focus management technique, see + Using aria-activedescendant to Manage Focus.

      @@ -217,16 +216,16 @@

      Grid Popup

    - +

    Role, Property, State, and Tabindex Attributes

    - The example comboboxes on this page implement the following ARIA roles, states, and properties. - Information about other ways of applying ARIA roles, states, and properties is available in the - Roles, States, and Properties section of the combobox design pattern. + The example comboboxes on this page implement the following ARIA roles, states, and properties. + Information about other ways of applying ARIA roles, states, and properties is available in the + Roles, States, and Properties section of the combobox design pattern.

    -

    Combobox Container

    - +

    Textbox

    +
    @@ -241,70 +240,34 @@

    Combobox Container

    combobox - - + + - + - - - - - - - + - + - -
    Role div -
      -
    • Identifies the element as a combobox.
      • -
    • Note: -
        -
      • Unlike this ARIA 1.1 combobox, an ARIA 1.0 pattern would have the combobox role on the textbox input instead of a parent container of the textbox.
        • -
      • The ARIA 1.1 pattern demonstrated on this page enables screen reader users to perceive both the input and the popup when using reading mode (see note below about aria-owns).
        • -
      -
      • -
    -     		input[type="text"]Identifies the element as a combobox.
    - aria-haspopup=grid + aria-haspopup="grid" divinput[type="text"] Indicates that the combobox can popup a grid to suggest values.
    - aria-owns=IDREF - div -
      -
    • Refers to the element that serves as the grid popup.
      • -
    • Tells browsers to arrange the screen reader reading order so the grid, when it is visible, immediately follows the other elements inside the combobox, regardless of where the grid element is in the DOM.
      • -
    -
    - aria-expanded=false + aria-expanded="false" divinput[type="text"] Indicates that the popup element is not displayed.
    - aria-expanded=true + aria-expanded="true" divinput[type="text"] Indicates that the popup element is displayed.
    -

    Textbox

    - - - - - - - - - - - + - + - + - + - + - + @@ -387,10 +340,10 @@

    Grid Popup

    - +
    RoleAttributeElementUsage
    id="string" @@ -312,41 +275,31 @@

    Textbox

    		input[type="text"]
      -
    • Referenced by for attribute of label element to provide an accessible label.
      • -
    • Recommended labeling method for HTML input elements so clicking label focuses input.
      • +
    • Referenced by for attribute of label element to provide an accessible name.
      • +
    • Recommended naming method for HTML input elements because clicking label focuses input.
    - aria-autocomplete=list + aria-autocomplete="list" input[type="text"]Indicates that the autocomplete behavior of the text input is to suggest a list of possible values in a popup.Indicates that the autocomplete behavior of the input is to suggest a list of possible values in a popup.
    - aria-controls=IDREF + aria-controls="IDREF" input[type="text"] -
      -
    • Identifies the popup element that lists suggested values.
      • -
    • Note: -
        -
      • In the ARIA 1.0 combobox pattern, the textbox has aria-owns instead of aria-controls.
        • -
      • In this ARIA 1.1 pattern, aria-owns is instead on the parent container so the popup element is a sibling of the textbox instead of a child of the textbox, making it perceivable by screen reader users as an element adjacent to the textbox when using a reading cursor or touch interface.
        • -
      -
      • -
    -     		Identifies the popup element that lists suggested values.
    - aria-activedescendant=IDREF + aria-activedescendant="IDREF" input[type="text"] @@ -355,8 +308,8 @@

    Textbox

  • When navigation keys, such as Down Arrow, are pressed, the JavaScript changes the value.
  • Enables assistive technologies to know which element the application regards as focused while DOM focus remains on the input element.
  • - For more information about this focus management technique, see - Using aria-activedescendant to Manage Focus. + For more information about this focus management technique, see + Using aria-activedescendant to Manage Focus.
    • - aria-labelledby=IDREF + aria-labelledby="IDREF" divProvides a label for the grid element of the combobox.Provides a label for the grid element controlled by the combobox.
    @@ -403,7 +356,7 @@

    Grid Popup

    - aria-selected=true + aria-selected="true" div @@ -422,11 +375,11 @@

    Grid Popup
    - +

    Javascript and CSS Source Code

    @@ -437,11 +390,6 @@

    HTML Source Code

    -