diff --git a/third_party/aria-practices/src/content/patterns/tabs/examples/tabs-actions.html b/third_party/aria-practices/src/content/patterns/tabs/examples/tabs-actions.html index 3a3780efbdaef..5cc18379d9881 100644 --- a/third_party/aria-practices/src/content/patterns/tabs/examples/tabs-actions.html +++ b/third_party/aria-practices/src/content/patterns/tabs/examples/tabs-actions.html @@ -2,66 +2,14 @@ - Experimental Example of Tabs with Action Buttons - - - - - - - - - -
-

Experimental Example of Tabs with Action Buttons

- -
-

About This Experimental Example

- -

- This is an experimental implementation of the draft specification of the aria-actions attribute. - The aria-actions property enables an element to reference another interactive element that can be activated to perform an action on the referencing element. - In this example, each tab element references a menu button that opens a menu of actions that apply to the referencing tab. - The relationship provided by aria-actions enables an assistive technology to both communicate the availability of the action button and provide a command for activating the button while focus is on the tab. -

-

- The below example demonstrates a tabs widget that implements the Tabs Pattern. - In this example, a panel is displayed when users activate its tab with either Space, Enter, or a mouse click. - So, for keyboard users, activating a tab requires two steps: 1) focus the tab, and 2) activate the tab. - This two-step process is referred to as manual activation. - Manual activation of tabs is recommended unless panels can be displayed instantly, i.e., all the panel content is present in the DOM. - For additional guidance, see Deciding When to Make Selection Automatically Follow Focus. -

-

- This example also demonstrates how to provide buttons that provide contextual actions for the tab. - Each tab has an associated context actions menu button. - The menu button is referenced by aria-actions, which enables it to be activated by an assistive technology user while focus is on the tab. -

-

Similar examples include:

- -
- -
-
-

Experimental Example

-
-

Interesting Sharks

@@ -220,293 +168,5 @@
- -
- -
-

Accessibility Features

- -
- -
-

Keyboard Support

-

Tabs

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KeyFunction
Tab -
    -
  • When focus moves into the tablist, places focus on the active tab.
    • -
  • When focus is on a tab, places focus on its associated menu button.
    • -
  • When focus is on the menu button associated with a tab, moves focus to one of the following depending on which is nearest in the forward tab sequence: -
      -
    • The active tab.
      • -
    • The first focusable element following the tablist. In this example, that is the a element in tabpanel.
      • -
    -
    • -
-
Shift + Tab -
    -
  • When focus moves into the tablist, places focus on the menu button associated with the active tab.
    • -
  • When focus is on the menu button associated with a tab, places focus on that tab.
    • -
  • When focus is on a tab, moves focus to one of the following depending on which is nearest in the backward tab sequence: -
      -
    • The active tab.
      • -
    • The first focusable element preceding the tablist.
      • -
    -
    • -
-
Enter
Space		When a tab has focus, activates the tab, causing its associated panel to be displayed.
Right Arrow - When a tab or its associated menu button have focus: -
    -
  • Moves focus to the next tab.
    • -
  • If focus is on the last tab, moves focus to the first tab.
    • -
-
Left Arrow - When a tab or its associated menu button have focus: -
    -
  • Moves focus to the previous tab.
    • -
  • If focus is on the first tab, moves focus to the last tab.
    • -
-
HomeWhen a tab has focus, moves focus to the first tab.
EndWhen a tab has focus, moves focus to the last tab.
-

Menu Button

-

- Keyboard support for each tab’s associated menu button is documented in Menu Button Pattern. -

-
- -
-

Role, Property, State, and Tabindex Attributes

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
RoleAttributeElementUsage
- tablist - - div - Indicates that the element serves as a container for a set of tabs.
- aria-labelledby="ID_REFERENCE" - - div - Provides a label that describes the purpose of the set of tabs.
- tab - - button - -
    -
  • Indicates the element serves as a tab control.
    • -
  • Provides a title for its associated tabpanel.
    • -
-
- aria-selected="true" - - button - -
    -
  • Indicates the tab control is activated and its associated panel is displayed.
    • -
  • Set when a user activates a tab.
    • -
  • Does not change when focus moves in the tablist.
    • -
-
- aria-selected="false" - - button - -
    -
  • Indicates the tab control is not active and its associated panel is NOT displayed.
    • -
  • Set for all tab elements in the tab set except the active tab; the one associated with the currently displayed panel.
    • -
-
- tabindex="-1" - - button - -
    -
  • Removes the element from the page Tab sequence.
    • -
  • Set when a tab is not selected so that only the selected (active) tab is in the page Tab sequence.
    • -
  • Since an HTML button element is used for the tab, it is not necessary to set tabindex="0" on the selected (active) tab element.
    • -
  • - This approach to managing focus is described in the section on - Managing Focus Within Components Using a Roving tabindex. -
    • -
-
- aria-controls="ID_REFERENCE" - - button - Refers to the tabpanel element associated with the tab.
- aria-actions="ID_REFERENCE" - - button - Refers to the context actions menu button element associated with the tab.
- tabpanel - - div - -
    -
  • Indicates the element serves as a container for tab panel content.
    • -
  • Is hidden unless its associated tab control is activated.
    • -
-
- aria-labelledby="ID_REFERENCE" - - div - -
    -
  • Refers to the tab element that controls the panel.
    • -
  • Provides an accessible name for the tab panel.
    • -
-
-
- -
-

JavaScript and CSS Source Code

- -
- -
-

HTML Source Code

-

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

- -
- - -
-