diff --git a/examples/combobox/aria1.1pattern/grid-combo.html b/examples/combobox/aria1.1pattern/grid-combo.html index 303c74fa95..9c63e9247e 100644 --- a/examples/combobox/aria1.1pattern/grid-combo.html +++ b/examples/combobox/aria1.1pattern/grid-combo.html @@ -2,7 +2,7 @@ -Example of ARIA 1.1 Combobox with Grid Popup | WAI-ARIA Authoring Practices 1.1 +ARIA 1.1 Combobox with Grid Popup Example | WAI-ARIA Authoring Practices 1.1 @@ -19,20 +19,22 @@
-

Example of ARIA 1.1 Combobox with Grid Popup

+

ARIA 1.1 Combobox with Grid Popup Example

- NOTE: This page is work in progress; it is not ready for review. - This work is tracked by issue 100. + NOTE: Please provide feedback on this example in + This work is tracked by issue 500.

- The following example demonstrates an implementation of the + The following example combobox implements the combobox design pattern - that uses the option to popup a grid containing suggested values. + using a grid for the suggested values popup. + In this example, users can choose a fruit or vegetable. + Each row of the two-column grid represents one suggestion; column one contains the name of the fruit or vegetable and column two identifies whether it is a fruit or vegetable.

Similar examples include:

@@ -51,7 +53,6 @@

Example

@@ -66,32 +67,16 @@

Example

- -
-

Accessibility Features

-

Optional section: If appropriate, please replace this content with a list of any special or noteworthy accessibility features - demonstrated in this implementation, such as:

-
    -
  1. What distinguishes this example from related examples.
    2. -
  2. Keyboard chortcuts, live regions, unusual event handling, or other ancillary best practices that are employed.
    3. -
  3. Do not include information that would be repeated in the following keyboard and attribute sections.
    4. -
  4. Delete this section if not needed.
    5. -
-
- +

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. +

+

Textbox

+
@@ -100,32 +85,132 @@

Keyboard Support

- + + + + + + + + + - + + + +
Key
KeyNameDown ArrowIf the grid is displayed, moves focus to the first suggested value.
Up ArrowIf the grid is displayed, moves focus to the last suggested value.
Escape - Description of key function. - +
    +
  • Clears the textbox
    • +
  • If the grid is displayed, closes it.
    • +
KeyName
  • Standard single line text editing keys
    		•
      -
    • If condition 1, performs function 1.
      • -
    • If condition 2, performs function 2.
      • -
    • Only use a list if multiple statements are needed.
      • +
    • 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.
      • +
    +
    +

    Grid Popup

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    KeyFunction
    Enter +
      +
    • Sets the textbox value to the content of the first cell in the row containing focus.
      • +
    • Closes the grid popup.
      • +
    • Sets focus on the textbox.
      • +
    +
    Escape +
      +
    • Closes the grid popup.
      • +
    • Sets focus on the textbox.
      • +
    • Clears the textbox.
      • +
    +
    Down Arrow +
      +
    • Moves focus to the next row.
      • +
    • If focus is in the last row, moves focus to the first row.
      • +
    • Note: This wrapping behavior is useful when Home and End move the editing cursor as described below.
      • +
    +
    Up Arrow +
      +
    • Moves focus to the previous row.
      • +
    • If focus is in the first row, moves focus to the last row.
      • +
    • Note: This wrapping behavior is useful when Home and End move the editing cursor as described below.
      • +
    +
    Right Arrow +
      +
    • Moves focus to the next cell.
      • +
    • If focus is in the last cell in a row, moves focus to the first cell in the next row.
      • +
    • If focus is in the last cell in the last row, moves focus to the first cell in the first row.
      • +
    +
    Left Arrow +
      +
    • Moves focus to the previous cell.
      • +
    • If focus is in the first cell in a row, moves focus to the last cell in the previous row.
      • +
    • If focus is in the first cell in the first row, moves focus to the last cell in the last row.
      • +
    +
    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

    - - +

    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

    +
    @@ -136,45 +221,178 @@

    Role, Property, State, and Tabindex Attributes

    - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Role
    RoleNameHTML_ELEMENT + combobox + div +
      +
    • Identifies the element 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.
      • +
    +
    + aria-haspopup=grid + divIndicates that the combobox can popup a grid to suggest values.
    + aria-owns=IDREF + divIdentifies the element that serves as the grid popup.
    + aria-expanded=false + divIndicates that the popup element is not displayed.
    + aria-expanded=true + divIndicates that the popup element is displayed.
    +

    Textbox

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - + + +
    RoleAttributeElementUsage
    + aria-labelledby=IDREF + input[type="text"]Provides a label for the textbox element of the combobox.
    + 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.
    + aria-controls=IDREF + input[type="text"] - Describe usage/purpose, e.g., indicates the focusable element that serves as the ... +
      +
    • Identifies the popup element that lists suggested values.
      • +
    • Note: In the ARIA 1.0 combobox pattern, the textbox uses aria-owns instead of aria-controls.
      • +
    + aria-activedescendant=IDREF + input[type="text"] - +
      +
    • When a cell in the grid is visually indicated as having keyboard focus, refers to that cell.
      • +
    • 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. +
      • +
    		AttributeName=AttributeValueHTML_ELEMENT
    +

    Grid Popup

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    RoleAttributeElementUsage
    + grid + + div + Identifies the element as a grid.
    + aria-labelledby=IDREF + divProvides a label for the grid element of the combobox.
    + row + divIdentifies the element containing all the cells for a row.
    + aria-selected=true + div
      -
    • explanation of usage, purpose, benefit, and/or guidance relevant to this implementation.
      • -
    • If making multiple statements, use list for brevity and clarity
      • -
    • Do not make a single item list.
      • +
    • Specified on a row in the grid when it is visually indicated as selected.
      • +
    • Occurs only when a cell in the grid is referenced by aria-activedescendant.
    gridcelldivIdentifies the element containing the content for a single cell.
    - +

    Javascript and CSS Source Code

    -
    @@ -195,8 +413,6 @@

    HTML Source Code