diff --git a/third_party/aria-practices/src/content/patterns/listbox/examples/listbox-rearrangeable.html b/third_party/aria-practices/src/content/patterns/listbox/examples/listbox-rearrangeable.html index f138b61e593a6..64445c3498944 100644 --- a/third_party/aria-practices/src/content/patterns/listbox/examples/listbox-rearrangeable.html +++ b/third_party/aria-practices/src/content/patterns/listbox/examples/listbox-rearrangeable.html @@ -2,17 +2,8 @@ - Example Listboxes with Rearrangeable Options - - - - - - - - @@ -20,38 +11,7 @@ - -
-

Example Listboxes with Rearrangeable Options

- -
-

About This Example

- -

- The following two example implementations of the Listbox Pattern demonstrate differences between single-select and multi-select functionality. - In both examples, users can use action buttons to move options from one list to another. - In the first implementation, users can choose a single option and then activate an action button while in the second example, they may select multiple options before activating an action button. -

-

Similar examples include:

- -
- -
-

Examples

-
-
-

Example 1: Single-Select Listbox

-
- -
+

Rank features important to you when choosing where to live. If a feature is unimportant, move it to the unimportant features list. @@ -141,15 +101,8 @@

Last change:
- -
-
-
-

Example 2: Multi-Select Listbox

-
- -
+

Choose upgrades for your transport capsule.

@@ -230,324 +183,5 @@
Last change:
- -
-
- -
-

Accessibility Features

- -
- -
-

Keyboard Support

-

- The example listboxes 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 Listbox Pattern. -

-

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

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KeyFunction
Tab -
    -
  • Moves focus into and out of the listbox.
    • -
  • - When the listbox receives focus, if none of the options are selected, the first option receives focus. - Otherwise, the first selected option receives focus. -
    • -
-
Down Arrow -
    -
  • Moves focus to the next option.
    • -
  • In the example 1 single-select listboxes, also selects the focused option.
    • -
-
Up Arrow -
    -
  • Moves focus to the previous option.
    • -
  • In the example 1 single-select listboxes, also selects the focused option.
    • -
-
Home -
    -
  • Moves focus to the first option.
    • -
  • In the example 1 single-select listboxes, also selects the focused option.
    • -
-
End -
    -
  • Moves focus to the last option.
    • -
  • In the example 1 single-select listboxes, also selects the focused option.
    • -
-
Printable Characters -
    -
  • Type a character: focus moves to the next item with a name that starts with the typed character.
    • -
  • Type multiple characters in rapid succession: focus moves to the next item with a name that starts with the string of characters typed.
    • -
-
-

Multiple selection keys supported in example 2

-

- NOTE: The selection behavior demonstrated differs from the behavior provided by browsers for native HTML <select multiple> elements. - The HTML select element behavior is to alter selection with unmodified up/down arrow keys, requiring the use of modifier keys to select multiple options. - This example demonstrates the multiple selection interaction model recommended in the Keyboard Interaction section of the Listbox Pattern, which does not require the use of modifier keys. -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KeyFunction
Spacechanges the selection state of the focused option .
Shift + Down ArrowMoves focus to and selects the next option.
Shift + Up ArrowMoves focus to and selects the previous option.
Control + Shift + HomeSelects from the focused option to the beginning of the list.
Control + Shift + EndSelects from the focused option to the end of the list.
- Control + A (All Platforms)
- Command-A (macOS) - 		- Selects all options in the list. - If all options are selected, unselects all options. -
-
- -
-

Role, Property, State, and Tabindex Attributes

-

- The example listboxes 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 Listbox Pattern. -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
RoleAttributeElementUsage
listboxulIdentifies the focusable element that has listbox behaviors and contains the listbox options.
aria-labelledby="ID_REF"ulApplied to the element with the listbox role, it refers to the span containing its label.
tabindex="0"ulApplied to the element with the listbox role, it puts the listbox in the tab sequence.
aria-multiselectable="true"ul -
    -
  • Used only in example 2.
    • -
  • Applied to the element with the listbox role, tells assistive technologies that the list supports multiple selection.
    • -
  • The default value is false so it is not specified in example 1.
    • -
-
aria-activedescendant="ID_REF"ul -
    -
  • When an option in the listbox is visually indicated as having keyboard focus, refers to that option.
    • -
  • Enables assistive technologies to know which element the application regards as focused while DOM focus remains on the listbox element.
    • -
  • When navigation keys, such as Down Arrow, are pressed, the JavaScript changes the value.
    • -
  • When the listbox is empty, aria-activedescendant="".
    • -
  • - For more information about this focus management technique, see - Managing Focus in Composites Using aria-activedescendant. -
    • -
-
optionliIdentifies each selectable element containing the name of an option.
aria-selected="true"li -
    -
  • Applied to elements with role option that are visually styled as selected to inform assistive technologies that the options are selected.
    • -
  • In example 1, the option with this attribute is always the same as the option that is referenced by aria-activedescendant because it is a single-select listbox where selection follows focus.
    • -
  • In example 2, more than one option may be selected so the user can move focus among options without effecting which options have this attribute.
    • -
  • Note that in example 2, the focus style and selection styles are distinctly different and independent.
    • -
-
aria-selected="false"li -
    -
  • Used only in example 2.
    • -
  • Applied to elements with role option that are not visually styled as selected to inform assistive technologies that the options are selectable but not selected.
    • -
  • In example 1, this is unnecessary because the selection moves every time the focus moves.
    • -
-
aria-hidden="true"span - Removes the character entities used for the check mark, left arrow and right arrow from the accessibility tree to prevent them from being included in the accessible name of an option or button. -
-
- -
-

JavaScript and CSS Source Code

- -
- -
-

HTML Source Code

-

Example 1: Single-Select Listbox

-

To copy the following HTML code, please open it in CodePen.

- -
- - -

Example 2: Multi-Select Listbox

-

To copy the following HTML code, please open it in CodePen.

- -
- - - - -
-