From fdbb7fcdc67ac6a87814285704d509b624bf5c3f Mon Sep 17 00:00:00 2001 From: Matt King Date: Thu, 12 Sep 2024 07:54:04 -0700 Subject: [PATCH] Add experimental example of tabs with action buttons to demonstrate aria-actions (pull #3071) Resolves issue #3070. Adds a tabs example that is functionally equivalent to the tabs with manual activation example except that it also includes an actions button for each tab. Each tab element includes the `aria-actions` attribute referencing its associated actions button. --------- Co-authored-by: Adam Page Co-authored-by: Adam Page --- .vnurc | 2 + .../coverage-and-quality-report.html | 44 +- .../coverage-and-quality/prop-coverage.csv | 6 +- .../coverage-and-quality/role-coverage.csv | 6 +- content/index/index.html | 9 +- .../examples/js/menu-button-actions.js | 9 +- .../tabs/examples/css/tabs-actions.css | 215 ++++++++ .../patterns/tabs/examples/js/tabs-actions.js | 365 +++++++++++++ .../patterns/tabs/examples/tabs-actions.html | 512 ++++++++++++++++++ cspell.json | 29 +- 10 files changed, 1177 insertions(+), 20 deletions(-) create mode 100644 content/patterns/tabs/examples/css/tabs-actions.css create mode 100644 content/patterns/tabs/examples/js/tabs-actions.js create mode 100644 content/patterns/tabs/examples/tabs-actions.html diff --git a/.vnurc b/.vnurc index e4fd70beb0..0a6175d14b 100644 --- a/.vnurc +++ b/.vnurc @@ -25,3 +25,5 @@ Bad value “none” for attribute “role” on element “svg”. Bad value “presentation” for attribute “role” on element “svg”. # https://github.com/validator/validator/issues/1122 Element “input” is missing required attribute “aria-checked”. +# https://github.com/w3c/aria-practices/issues/3070 +Attribute “aria-actions” not allowed on element “button” at this point. diff --git a/content/about/coverage-and-quality/coverage-and-quality-report.html b/content/about/coverage-and-quality/coverage-and-quality-report.html index 80325c249d..95f9be2669 100644 --- a/content/about/coverage-and-quality/coverage-and-quality-report.html +++ b/content/about/coverage-and-quality/coverage-and-quality-report.html @@ -647,6 +647,7 @@

Roles with More than One Guidance or Exa @@ -667,6 +668,7 @@

Roles with More than One Guidance or Exa @@ -677,6 +679,7 @@

Roles with More than One Guidance or Exa @@ -893,6 +896,7 @@

Properties and States with More than One
  • Actions Menu Button Using aria-activedescendant (HC)
  • Actions Menu Button Using element.focus() (HC)
  • Navigation Menu Button (HC)
    • +
  • Experimental Tabs with Action Buttons (HC)
  • Tabs with Automatic Activation (HC)
  • Tabs with Manual Activation (HC)
  • Toolbar
    • @@ -1063,6 +1067,7 @@

    Properties and States with More than One
  • Vertical Temperature Slider (HC)
  • Date Picker Spin Button
  • Switch Using HTML Button (HC)
    • +
  • Experimental Tabs with Action Buttons (HC)
  • Tabs with Automatic Activation (HC)
  • Tabs with Manual Activation (HC)
  • File Directory Treeview Using Computed Properties
    • @@ -1174,6 +1179,7 @@

    Properties and States with More than One
  • Listbox with Grouped Options
  • Listboxes with Rearrangeable Options
  • Scrollable Listbox
    • +
  • Experimental Tabs with Action Buttons (HC)
  • Tabs with Automatic Activation (HC)
  • Tabs with Manual Activation (HC)
  • File Directory Treeview Using Computed Properties
    • @@ -1272,15 +1278,15 @@

    Coding Summary

    Total Examples - 60 + 61 High Contrast Documentation - 31 + 32 Uses SVG - 34 + 35 Uses forced-colors media query @@ -1288,7 +1294,7 @@

    Coding Summary

    Uses currentColor value - 27 + 28 + + + + + + + + + + + + + + +
    +

    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

    +
    +
    + +
    + + +
    +
    +
    + +
    + + +
    +
    +
    + +
    + + +
    +
    +
    + +
    + + +
    +
    +
    +
    +

    + The nurse + shark (Ginglymostoma cirratum) is an + elasmobranch fish in the family Ginglymostomatidae. The conservation status of + the nurse shark is globally assessed as Vulnerable in the IUCN + List of Threatened Species. They are considered to be a species + of least concern in the United States and in The Bahamas, but + considered to be near threatened in the western Atlantic Ocean + because of their vulnerable status in South America and reported + threats throughout many areas of Central America and the + Caribbean. They are directly targeted in some fisheries and + considered by-catch in others. +

    +
    + + + + +
    +
    + +
    + +
    +

    Accessibility Features

    +
      +
    • + To ensure people who rely on browser or operating system high contrast settings can both distinguish the active (selected) tab from other tabs and perceive keyboard focus: +
        +
      • + The active tab has a 2 pixel border on its left and right sides and a 4 pixel border on top, while the names of inactive tabs have 1 pixel borders. + The active tab is also 4 pixels higher than the inactive tabs. +
        • +
      • + The focus ring is drawn with a CSS border on a child span element of the tab element. + This focus span is separated from the tab border by 2 pixels of space to ensure focus and selection are separately perceivable. + Note that when a tab element is focused, the outline of the tab element itself is set to 0 so that only one focus ring is displayed. +
        • +
      • + Because transparent borders are visible on some systems when high contrast settings are enabled, only the focused span element has a visible border. + When span elements are not indicating focus, they have a 0-width border and additional padding equal in width to the border that is used to indicate focus. +
        • +
      +
      • +
    • + Note that since the first element in every tabpanel is a focusable element (i.e., a link), the tabpanel is not included in the page Tab sequence. + To make it easy for screen reader users to navigate from a tab to the beginning of content in the active tabpanel, it is recommended that all tabpanel elements in a tab set are focusable if there are any panels in the set that contain content where the first element in the panel is not focusable. +
      • +
    • + To ensure the tab content remains visible when the screen is magnified, the width of the tabs and tab panels are defined using a percentage of the screen width. As the page is magnified the height of the tab increases and the tab content re-flows to the new dimensions of the tab. +
      • +
    +
    + +
    +

    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.

    + +
    + + +
    +
    + + diff --git a/cspell.json b/cspell.json index 5bd99d9d17..3841ca274a 100644 --- a/cspell.json +++ b/cspell.json @@ -15,6 +15,7 @@ "AXAPI", "Balusani", "Bellew", + "benthopelagic", "Bijl", "Bocoup", "Bogdan", @@ -30,14 +31,18 @@ "canvastext", "Capitan", "Carron", + "Cetorhinus", "checkmark", "Chjat", + "Chondrichthyes", + "cirratum", "citystate", "Claremont", "Codepen", "codepenbutton", "colheader", "Colom", + "colour", "combobox's", "comboboxes", "commenters", @@ -70,6 +75,7 @@ "dropup", "Dubnium", "Dušek", + "Elasmobranchii", "entrypoints", "EXPANDO", "Fairchild", @@ -89,6 +95,8 @@ "geckodriver", "genstedt", "Geppy", + "Ginglymostoma", + "Ginglymostomatidae", "gridbox", "gridcells", "GUIs", @@ -108,6 +116,7 @@ "imgs", "Iskandar", "issie", + "IUCN", "Jaeun", "jarosewli", "Jemma", @@ -133,19 +142,23 @@ "Malo", "Manish", "Marek", + "maximus", + "megamouth", "Meitnerium", "menubars", "Menubutton", "menubuttons", "menuitems", - "Minard", "Minard's", + "Minard", + "Mitsukurina", + "Mitsukurinidae", "Mobilow", "Mojaisk", "Moloderno", + "Montalvo", "moreaccessible", "Moscovium", - "Montalvo", "MSAA", "Müller", "multithumb", @@ -165,6 +178,7 @@ "onlosecapture", "Orscha", "outdent", + "owstoni", "Paciello", "PAGEDOWN", "PAGEUP", @@ -178,12 +192,17 @@ "Popout", "portlet", "Presentational", + "protrusible", "Pseudocereal", "radiogroups", "rawgit", "Rearrangeable", "refreshable", "respec", + "Rhincodon", + "Rhincodontidae", + "Rhiniodon", + "Rhinodontidae", "roadmap", "Roentgenium", "rowgroups", @@ -215,13 +234,13 @@ "Studienska", "stylelint", "subfolders", - "submenu", "submenu's", + "submenu", "submenus", "Sulaiman", "tabbable", - "tablist", "tablist’s", + "tablist", "tablists", "tabpanels", "Tatiana", @@ -241,9 +260,11 @@ "treeitems", "Treeview", "Tryens", + "typus", "uncheck", "Unchecking", "unchecks", + "Unfocusable", "unimp", "unmanaged", "Vasily",