From 754b240c1adc7b836c73123f8b4c8642b4f2a5d3 Mon Sep 17 00:00:00 2001 From: alflennik Date: Wed, 27 Mar 2024 18:02:45 -0400 Subject: [PATCH 01/10] Add experimental content (issue 2836) --- .github/workflows/examples.yml | 4 +- .../coverage-and-quality-report.html | 51 +- .../coverage-and-quality/prop-coverage.csv | 12 +- .../coverage-and-quality/role-coverage.csv | 6 +- content/index/index.html | 7 + .../treeview/examples/treeview-1c.html | 1052 +++++++++++++++++ content/shared/js/app.js | 14 +- .../experimental-example-usage-warning.html | 30 + package.json | 2 +- scripts/reference-tables.js | 23 +- scripts/reference-tables.template | 8 + 11 files changed, 1184 insertions(+), 25 deletions(-) create mode 100644 content/patterns/treeview/examples/treeview-1c.html create mode 100644 content/shared/templates/experimental-example-usage-warning.html diff --git a/.github/workflows/examples.yml b/.github/workflows/examples.yml index e7e993e92a..c570c54592 100644 --- a/.github/workflows/examples.yml +++ b/.github/workflows/examples.yml @@ -10,7 +10,7 @@ on: - "content/**/examples/**" - "scripts/reference-tables.*" - "scripts/coverage-report.*" - - "coverage/**" + - "content/about/coverage-and-quality/**" pull_request: paths: - "package*.json" @@ -18,7 +18,7 @@ on: - "content/**/examples/**" - "scripts/reference-tables.*" - "scripts/coverage-report.*" - - "coverage/**" + - "content/about/coverage-and-quality/**" jobs: examples: 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 d64352d9a3..a632cd3b6b 100644 --- a/content/about/coverage-and-quality/coverage-and-quality-report.html +++ b/content/about/coverage-and-quality/coverage-and-quality-report.html @@ -17,7 +17,7 @@

Coverage and Quality Reports

-

Page last updated: February 13, 2024

+

Page last updated: March 27, 2024

About These Reports

@@ -369,6 +369,7 @@

Roles with More than One Guidance or Exa
  • Switch Using HTML Button (HC)
  • File Directory Treeview Using Computed Properties
  • File Directory Treeview Using Declared Properties
    • +
  • [Experimental] File Directory Treeview Using Declared Properties
  • Navigation Treeview (HC)
    • @@ -703,6 +704,7 @@

    Roles with More than One Guidance or Exa @@ -713,6 +715,7 @@

    Roles with More than One Guidance or Exa @@ -960,6 +963,7 @@

    Properties and States with More than One
  • Treegrid Email Inbox
  • File Directory Treeview Using Computed Properties
  • File Directory Treeview Using Declared Properties
    • +
  • [Experimental] File Directory Treeview Using Declared Properties
  • Navigation Treeview (HC)
    • @@ -1067,6 +1071,7 @@

    Properties and States with More than One
  • Tabs with Manual Activation (HC)
  • File Directory Treeview Using Computed Properties
  • File Directory Treeview Using Declared Properties
    • +
  • [Experimental] File Directory Treeview Using Declared Properties
  • Navigation Treeview (HC)
  • Complementary Landmark
  • Form Landmark
    • @@ -1083,6 +1088,7 @@

    Properties and States with More than One @@ -1116,6 +1122,7 @@

    Properties and States with More than One
  • Feed
  • Treegrid Email Inbox
  • File Directory Treeview Using Declared Properties
    • +
  • [Experimental] File Directory Treeview Using Declared Properties
    • @@ -1178,6 +1185,7 @@

    Properties and States with More than One
  • Tabs with Manual Activation (HC)
  • File Directory Treeview Using Computed Properties
  • File Directory Treeview Using Declared Properties
    • +
  • [Experimental] File Directory Treeview Using Declared Properties
    • @@ -1188,6 +1196,7 @@

    Properties and States with More than One
  • Feed
  • Treegrid Email Inbox
  • File Directory Treeview Using Declared Properties
    • +
  • [Experimental] File Directory Treeview Using Declared Properties
    • @@ -1272,7 +1281,7 @@

    Coding Summary

    Total Examples - 60 + 61 High Contrast Documentation @@ -1288,11 +1297,11 @@

    Coding Summary

    Uses event.KeyCode - 16 + 17 Uses event.which - 60 + 61 Use Class @@ -1300,15 +1309,15 @@

    Coding Summary

    Use Prototype - 60 + 61 Mouse Events - 15 + 16 Pointer Events - 59 + 60 @@ -2098,6 +2107,19 @@

    Coding Practices

    6 heading,aria-busy,aria-describedby,aria-errormessage,aria-hidden,aria-label,aria-roledescription + + [Experimental] File Directory Treeview Using Declared Properties + prototype + Yes + Yes + + ex1 + 4 + 3 + 12 + 6 + heading,aria-busy,aria-describedby,aria-errormessage,aria-hidden,aria-label,aria-roledescription + Navigation Treeview class, prototype @@ -2608,6 +2630,16 @@

    Graphics Techniques

    Yes + + [Experimental] File Directory Treeview Using Declared Properties + + + + + Yes + + Yes + Navigation Treeview Yes @@ -2920,6 +2952,11 @@

    Mouse and Pointer Events

    Yes Yes + + [Experimental] File Directory Treeview Using Declared Properties + Yes + Yes + Navigation Treeview Yes diff --git a/content/about/coverage-and-quality/prop-coverage.csv b/content/about/coverage-and-quality/prop-coverage.csv index ed19b10250..b23a21a550 100644 --- a/content/about/coverage-and-quality/prop-coverage.csv +++ b/content/about/coverage-and-quality/prop-coverage.csv @@ -14,7 +14,7 @@ "aria-disabled","0","3","Example: Alert Dialog","Example: Editor Menubar","Example: Toolbar" "aria-dropeffect","0","0" "aria-errormessage","0","0" -"aria-expanded","0","22","Example: Accordion","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Disclosure (Show/Hide) for Answers to Frequently Asked Questions","Example: Disclosure (Show/Hide) for Image Description","Example: Disclosure Navigation Menu with Top-Level Links","Example: Disclosure Navigation Menu","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Actions Menu Button Using aria-activedescendant","Example: Actions Menu Button Using element.focus()","Example: Navigation Menu Button","Example: Editor Menubar","Example: Navigation Menubar","Example: Toolbar","Example: Treegrid Email Inbox","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: Navigation Treeview" +"aria-expanded","0","23","Example: Accordion","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Disclosure (Show/Hide) for Answers to Frequently Asked Questions","Example: Disclosure (Show/Hide) for Image Description","Example: Disclosure Navigation Menu with Top-Level Links","Example: Disclosure Navigation Menu","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Actions Menu Button Using aria-activedescendant","Example: Actions Menu Button Using element.focus()","Example: Navigation Menu Button","Example: Editor Menubar","Example: Navigation Menubar","Example: Toolbar","Example: Treegrid Email Inbox","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: [Experimental] File Directory Treeview Using Declared Properties","Example: Navigation Treeview" "aria-flowto","0","0" "aria-grabbed","0","0" "aria-haspopup","0","9","Example: Date Picker Combobox","Example: Editable Combobox with Grid Popup","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Actions Menu Button Using aria-activedescendant","Example: Actions Menu Button Using element.focus()","Example: Navigation Menu Button","Example: Editor Menubar","Example: Navigation Menubar","Example: Toolbar" @@ -22,8 +22,8 @@ "aria-invalid","0","0" "aria-keyshortcuts","0","0" "aria-label","1","18","Guidance: Naming with a String Attribute Via aria-label","Example: Breadcrumb","Example: Auto-Rotating Image Carousel with Buttons for Slide Control","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Date Picker Dialog","Example: Link","Example: Editor Menubar","Example: Navigation Menubar","Example: Rating Radio Group","Example: Horizontal Multi-Thumb Slider","Example: Date Picker Spin Button","Example: Table","Example: Toolbar","Example: Treegrid Email Inbox","Example: Navigation Treeview" -"aria-labelledby","1","40","Guidance: Naming with Referenced Content Via aria-labelledby","Example: Accordion","Example: Alert Dialog","Example: Checkbox (Two State)","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Date Picker Dialog","Example: Modal Dialog","Example: Feed","Example: Data Grid","Example: Layout Grid","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Listbox with Grouped Options","Example: Listboxes with Rearrangeable Options","Example: Scrollable Listbox","Example: Actions Menu Button Using aria-activedescendant","Example: Actions Menu Button Using element.focus()","Example: Navigation Menu Button","Example: Navigation Menubar","Example: Meter","Example: Radio Group Using aria-activedescendant","Example: Rating Radio Group","Example: Radio Group Using Roving tabindex","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Date Picker Spin Button","Example: Switch Using HTML Button","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: Navigation Treeview","Example: Complementary Landmark","Example: Form Landmark","Example: Main Landmark","Example: Navigation Landmark","Example: Region Landmark","Example: Search Landmark" -"aria-level","0","2","Example: Treegrid Email Inbox","Example: File Directory Treeview Using Declared Properties" +"aria-labelledby","1","41","Guidance: Naming with Referenced Content Via aria-labelledby","Example: Accordion","Example: Alert Dialog","Example: Checkbox (Two State)","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Date Picker Dialog","Example: Modal Dialog","Example: Feed","Example: Data Grid","Example: Layout Grid","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Listbox with Grouped Options","Example: Listboxes with Rearrangeable Options","Example: Scrollable Listbox","Example: Actions Menu Button Using aria-activedescendant","Example: Actions Menu Button Using element.focus()","Example: Navigation Menu Button","Example: Navigation Menubar","Example: Meter","Example: Radio Group Using aria-activedescendant","Example: Rating Radio Group","Example: Radio Group Using Roving tabindex","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Date Picker Spin Button","Example: Switch Using HTML Button","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: [Experimental] File Directory Treeview Using Declared Properties","Example: Navigation Treeview","Example: Complementary Landmark","Example: Form Landmark","Example: Main Landmark","Example: Navigation Landmark","Example: Region Landmark","Example: Search Landmark" +"aria-level","0","3","Example: Treegrid Email Inbox","Example: File Directory Treeview Using Declared Properties","Example: [Experimental] File Directory Treeview Using Declared Properties" "aria-live","0","5","Example: Alert","Example: Auto-Rotating Image Carousel with Buttons for Slide Control","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Date Picker Combobox","Example: Date Picker Dialog" "aria-modal","0","4","Example: Alert Dialog","Example: Date Picker Combobox","Example: Date Picker Dialog","Example: Modal Dialog" "aria-multiline","0","0" @@ -31,7 +31,7 @@ "aria-orientation","0","1","Example: Vertical Temperature Slider" "aria-owns","0","1","Example: Navigation Treeview" "aria-placeholder","0","0" -"aria-posinset","0","3","Example: Feed","Example: Treegrid Email Inbox","Example: File Directory Treeview Using Declared Properties" +"aria-posinset","0","4","Example: Feed","Example: Treegrid Email Inbox","Example: File Directory Treeview Using Declared Properties","Example: [Experimental] File Directory Treeview Using Declared Properties" "aria-pressed","0","3","Example: Button (IDL Version)","Example: Button","Example: Toolbar" "aria-readonly","0","0" "aria-relevant","0","0" @@ -40,8 +40,8 @@ "aria-rowcount","1","2","Guidance: Using aria-rowcount and aria-rowindex","Example: Data Grid","Example: Layout Grid" "aria-rowindex","1","2","Guidance: Using aria-rowcount and aria-rowindex","Example: Data Grid","Example: Layout Grid" "aria-rowspan","1","0","Guidance: Defining cell spans using aria-colspan and aria-rowspan" -"aria-selected","0","16","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Date Picker Dialog","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Listbox with Grouped Options","Example: Listboxes with Rearrangeable Options","Example: Scrollable Listbox","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties" -"aria-setsize","0","3","Example: Feed","Example: Treegrid Email Inbox","Example: File Directory Treeview Using Declared Properties" +"aria-selected","0","17","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Date Picker Dialog","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Listbox with Grouped Options","Example: Listboxes with Rearrangeable Options","Example: Scrollable Listbox","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: [Experimental] File Directory Treeview Using Declared Properties" +"aria-setsize","0","4","Example: Feed","Example: Treegrid Email Inbox","Example: File Directory Treeview Using Declared Properties","Example: [Experimental] File Directory Treeview Using Declared Properties" "aria-sort","1","2","Guidance: Indicating sort order with aria-sort","Example: Data Grid","Example: Sortable Table" "aria-valuemax","1","8","Guidance: Using aria-valuemin, aria-valuemax and aria-valuenow","Example: Meter","Example: Horizontal Multi-Thumb Slider","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Date Picker Spin Button","Example: Toolbar" "aria-valuemin","0","8","Example: Meter","Example: Horizontal Multi-Thumb Slider","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Date Picker Spin Button","Example: Toolbar" diff --git a/content/about/coverage-and-quality/role-coverage.csv b/content/about/coverage-and-quality/role-coverage.csv index 104fad9ec2..c9f893361b 100644 --- a/content/about/coverage-and-quality/role-coverage.csv +++ b/content/about/coverage-and-quality/role-coverage.csv @@ -25,7 +25,7 @@ "generic","0","0" "grid","3","5","Guidance: Grid Popup Keyboard Interaction","Guidance: Grid (Interactive Tabular Data and Layout Containers) Pattern","Guidance: Grid and Table Properties","Example: Date Picker Combobox","Example: Editable Combobox with Grid Popup","Example: Date Picker Dialog","Example: Data Grid","Example: Layout Grid" "gridcell","0","3","Example: Editable Combobox with Grid Popup","Example: Layout Grid","Example: Treegrid Email Inbox" -"group","2","10","Guidance: Radio Group Pattern","Guidance: For Radio Group Contained in a Toolbar","Example: Auto-Rotating Image Carousel with Buttons for Slide Control","Example: Checkbox (Two State)","Example: Listbox with Grouped Options","Example: Editor Menubar","Example: Color Viewer Slider","Example: Date Picker Spin Button","Example: Switch Using HTML Button","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: Navigation Treeview" +"group","2","11","Guidance: Radio Group Pattern","Guidance: For Radio Group Contained in a Toolbar","Example: Auto-Rotating Image Carousel with Buttons for Slide Control","Example: Checkbox (Two State)","Example: Listbox with Grouped Options","Example: Editor Menubar","Example: Color Viewer Slider","Example: Date Picker Spin Button","Example: Switch Using HTML Button","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: [Experimental] File Directory Treeview Using Declared Properties","Example: Navigation Treeview" "heading","0","0" "img","0","0" "input","0","0" @@ -74,6 +74,6 @@ "timer","0","0" "toolbar","3","1","Guidance: For Radio Groups Not Contained in a Toolbar","Guidance: For Radio Group Contained in a Toolbar","Guidance: Toolbar Pattern","Example: Toolbar" "tooltip","1","0","Guidance: Tooltip Pattern" -"tree","2","3","Guidance: Tree Popup Keyboard Interaction","Guidance: Tree View Pattern","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: Navigation Treeview" +"tree","2","4","Guidance: Tree Popup Keyboard Interaction","Guidance: Tree View Pattern","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: [Experimental] File Directory Treeview Using Declared Properties","Example: Navigation Treeview" "treegrid","1","1","Guidance: Treegrid Pattern","Example: Treegrid Email Inbox" -"treeitem","0","3","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: Navigation Treeview" +"treeitem","0","4","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: [Experimental] File Directory Treeview Using Declared Properties","Example: Navigation Treeview" diff --git a/content/index/index.html b/content/index/index.html index b004007e85..d239f5f4ea 100644 --- a/content/index/index.html +++ b/content/index/index.html @@ -21,6 +21,7 @@

    About the Index

    Examples by Role

    @@ -903,6 +904,12 @@

    Examples By Properties and States

    +
    +

    Experimental Examples

    +
    NOTE: The HC abbreviation means example has High Contrast support.
    + +
    diff --git a/content/patterns/treeview/examples/treeview-1c.html b/content/patterns/treeview/examples/treeview-1c.html new file mode 100644 index 0000000000..83d134dd23 --- /dev/null +++ b/content/patterns/treeview/examples/treeview-1c.html @@ -0,0 +1,1052 @@ + + + + + + + [Experimental] File Directory Treeview Example Using Declared Properties + + + + + + + + + + + + + + + + + + + + +
    +

    + [Experimental] File Directory Treeview Example Using Declared Properties +

    +
    +

    About This Experimental Example

    + +

    + This experimental version of the File Directory Treeview Example Using + Declared Properties example is not intended to ever be released or + shown to the public. It exists merely to ensure that experimental + content support can be adequately developed and tested. When support + is fully implemented, this example can be deleted. +

    +

    + The following example implementation of the + Tree View Pattern simulates a + widget for selecting a file or folder from within a hierarchical file + system for viewing in a file viewer. In the My Documents tree, + each parent node represents a folder and each end node represents a + file. Activating a node selects the node and puts the name of the + folder or file in the read-only edit field that represents the file + viewer. +

    +

    + The code in this example explicitly declares values for + aria-setsize, aria-posinset and + aria-level, which overrides browser computation of values + for these properties. The ARIA specification for these properties + states that browsers can, but are not required to, compute these + values. +

    +

    Similar examples include:

    + +
    + +
    +
    +

    Experimental Example

    +
    + +
    +

    My Documents

    +
      + + + +
    +

    + +

    +
    + +
    + +
    +

    Accessibility Features

    +

    + To make the focus indicator easier to see, nodes in the tree have + custom focus and hover styling created using CSS focus and hover + pseudo-classes. +

    +
    + +
    +

    Terms Used to Describe Trees

    +

    + A tree item that can be expanded to reveal child items is called a + parent node. It is a closed node when the children are hidden and an + open node when it is expanded. An end node does not have any children. + For a complete list of terms and definitions, see the + Tree View Pattern. +

    +
    + +
    +

    Keyboard Support

    +

    + Note that in this example, selection and focus are distinct; moving + focus does not change which node is selected. Because selection does + not follow focus, keyboard and screen reader users can navigate and + explore the tree without changing the content of the file viewer. To + learn more about this aspect of the design, read the guidance section + about + Deciding When to Make Selection Automatically Follow Focus. +

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    KeyFunction
    Enter + Performs the default action, which is to select the node, + causing the name of the node to appear in the + File or Folder Selected textbox. +
    Space + Performs the default action, which is to select the node, + causing the name of the node to appear in the + File or Folder Selected textbox. +
    Down arrow +
      +
    • + Moves focus to the next node that is focusable without + opening or closing a node. +
      • +
    • If focus is on the last node, does nothing.
      • +
    +
    Up arrow +
      +
    • + Moves focus to the previous node that is focusable without + opening or closing a node. +
      • +
    • If focus is on the first node, does nothing.
      • +
    +
    Right Arrow +
      +
    • + When focus is on a closed node, opens the node; focus does + not move. +
      • +
    • + When focus is on a open node, moves focus to the first child + node. +
      • +
    • When focus is on an end node, does nothing.
      • +
    +
    Left Arrow +
      +
    • When focus is on an open node, closes the node.
      • +
    • + When focus is on a child node that is also either an end + node or a closed node, moves focus to its parent node. +
      • +
    • + When focus is on a root node that is also either an end node + or a closed node, does nothing. +
      • +
    +
    Home + Moves focus to first node without opening or closing a node. +
    End + Moves focus to the last node that can be focused without + expanding any nodes that are closed. +
    a-z, A-Z +
      +
    • + Focus moves to the next node with a name that starts with + the typed character. +
      • +
    • + Search wraps to first node if a matching name is not found + among the nodes that follow the focused node. +
      • +
    • + Search ignores nodes that are descendants of closed nodes. +
      • +
    +
    * (asterisk) +
      +
    • + Expands all closed sibling nodes that are at the same level + as the focused node. +
      • +
    • Focus does not move.
      • +
    +
    +
    + +
    +

    Role, Property, State, and Tabindex Attributes

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    RoleAttributeElementUsage
    treeul + +
    aria-labelledby="ID_REFERENCE"ul + Refers to the heading element that contains the label that + identifies the purpose of the tree. +
    treeitemliIdentifies the element as a treeitem.
    tabindex="-1"li +
      +
    • + Makes the treeitem element focusable without + including it in the tab sequence of the page. +
      • +
    • + All treeitem elements are focusable, but only + one is included in the tab sequence. +
      • +
    +
    tabindex="0"li +
      +
    • + Includes the treeitem element in the tab + sequence. +
      • +
    • + Only one treeitem in the tree has + tabindex="0". +
      • +
    • + In this implementation, the first treeitem in + the tree is included in the tab sequence when + the page loads. +
      • +
    • + When the user moves focus in the tree, the + element included in the tab sequence changes to the element + with focus as described in + Managing Focus Within Components Using a Roving + tabindex. +
      • +
    +
    aria-expanded="false"li +
      +
    • + Applied only to treeitem elements that are + parent nodes, i.e., they contain a ul with the + group role. +
      • +
    • + Indicates the parent node is closed, i.e., the descendant + elements are not visible. +
      • +
    • + The visual indication of the collapsed state is synchronized + by a CSS attribute selector. +
      • +
    +
    aria-expanded="true"li +
      +
    • + Applied only to treeitem elements that are + parent nodes, i.e., they contain a ul with the + group role. +
      • +
    • + Indicates the parent node is open, i.e., the descendant + elements are visible. +
      • +
    • + The visual indication of the expanded state is synchronized + by a CSS attribute selector. +
      • +
    +
    aria-selected="false"li +
      +
    • Applied to treeitem elements.
      • +
    • + Indicates the file or folder for the item is not currently + selected. +
      • +
    +
    aria-selected="true"li +
      +
    • Applied to treeitem elements.
      • +
    • + Indicates the file or folder for the item is currently + selected. +
      • +
    +
    aria-setsize="number"li + Defines the number of treeitem elements in the set + of treeitem elements that are in the same branch + and at the same level within the hierarchy. +
    aria-posinset="number"li +
      +
    • + Defines the position of the element within the set of other + treeitem elements that are in the same branch + and at the same level within the hierarchy. +
      • +
    • Counting is one-based, not zero-based.
      • +
    +
    aria-level="number"li +
      +
    • + Defines the level of the treeitem in the + hierarchical tree structure. +
      • +
    • Counting is one-based.
      • +
    • + Root treeitem elements have + aria-level="1". +
      • +
    +
    groupul +
      +
    • + Identifies the ul element as a container of + treeitem elements that form a branch of the + tree. +
      • +
    • + The group is contained in the element that serves as the + parent treeitem. +
      • +
    • + Browsers use the grouping to compute + aria-level, aria-setsize and + aria-posinset values for the nodes contained in + the branch if those properties are not specified explicitly + in the code. +
      • +
    • + The grouping also prevents browsers from including the + content of the nodes in the group in the accessible name for + the parent node. +
      • +
    +
    +
    + +
    +

    JavaScript and CSS Source Code

    + +
    + +
    +

    HTML Source Code

    + +
    + + +
    +
    + + diff --git a/content/shared/js/app.js b/content/shared/js/app.js index 7612696db6..c1e7675966 100644 --- a/content/shared/js/app.js +++ b/content/shared/js/app.js @@ -20,14 +20,20 @@ // Determine we are on an example page if (!document.location.href.match(/examples\/[^/]+\.html/)) return; + const isExperimental = + document.querySelector('main')?.getAttribute('data-content-phase') === + 'experimental'; + + const usageWarningLink = isExperimental + ? '/templates/experimental-example-usage-warning.html' + : '/templates/example-usage-warning.html'; + // Generate the usage warning link using app.js link as a starting point const scriptSource = document .querySelector('[src$="app.js"]') .getAttribute('src'); - const fetchSource = scriptSource.replace( - '/js/app.js', - '/templates/example-usage-warning.html' - ); + + const fetchSource = scriptSource.replace('/js/app.js', usageWarningLink); // Load and parse the usage warning and insert it before the h1 const html = await (await fetch(fetchSource)).text(); diff --git a/content/shared/templates/experimental-example-usage-warning.html b/content/shared/templates/experimental-example-usage-warning.html new file mode 100644 index 0000000000..d275eabed8 --- /dev/null +++ b/content/shared/templates/experimental-example-usage-warning.html @@ -0,0 +1,30 @@ + + + + Support Notice (Template) + +

    Read This First

    +
    + + The code in this example is experimental and should therefore be considered incomplete, potentially unreliable and subject to change without notice. + Please read below to understand why. + +

    This is an experimental example of one way of using ARIA that may or may not conform with the current ARIA specification.

    + +
    + + diff --git a/package.json b/package.json index de39f188dc..3d38024fa1 100644 --- a/package.json +++ b/package.json @@ -72,7 +72,7 @@ "npm run reference-tables", "git add content/index/index.html", "npm run coverage-report", - "git add coverage/" + "git add content/about/coverage-and-quality/" ] }, "ava": { diff --git a/scripts/reference-tables.js b/scripts/reference-tables.js index 109773938f..128c22cee5 100644 --- a/scripts/reference-tables.js +++ b/scripts/reference-tables.js @@ -161,6 +161,7 @@ const ariaPropertiesAndStates = [ let indexOfRoles = {}; let indexOfPropertiesAndStates = {}; +const indexOfExperimentalContent = []; console.log('Generating index...'); @@ -209,6 +210,10 @@ function getPropertiesAndStates(html) { return propertiesAndStates; } +function addExampleToExperimentalContent(example) { + indexOfExperimentalContent.push(example); +} + function addExampleToRoles(roles, example) { for (let i = 0; i < roles.length; i++) { let role = roles[i]; @@ -268,6 +273,10 @@ glob let html = HTMLParser.parse(data); + const isExperimental = + html.querySelector('main')?.getAttribute('data-content-phase') === + 'experimental'; + let ref = file.replace('content', '..'); let title = html .querySelector('title') @@ -283,8 +292,12 @@ glob highContrast: data.toLowerCase().indexOf('high contrast') > 0, }; - addExampleToRoles(getRoles(html), example); - addExampleToPropertiesAndStates(getPropertiesAndStates(html), example); + if (isExperimental) { + addExampleToExperimentalContent(example); + } else { + addExampleToRoles(getRoles(html), example); + addExampleToPropertiesAndStates(getPropertiesAndStates(html), example); + } }); // Add landmark examples, since they are a different format @@ -390,8 +403,14 @@ let examplesByProps = sortedPropertiesAndStates.reduce(function (set, prop) { `; }, ''); +const examplesExperimental = indexOfExperimentalContent + .map(exampleListItem) + .join(''); + $('#examples_by_props_tbody').html(examplesByProps); +$('#examples_experimental_ul').html(examplesExperimental); + // cheerio seems to fold the doctype lines despite the template const result = $.html() .replace('', '\n') diff --git a/scripts/reference-tables.template b/scripts/reference-tables.template index 6e60f2b680..8f6945ca75 100644 --- a/scripts/reference-tables.template +++ b/scripts/reference-tables.template @@ -22,6 +22,7 @@

    Examples by Role

    @@ -52,6 +53,13 @@
    +
    +

    Experimental Examples

    +
    NOTE: The HC abbreviation means example has High Contrast support.
    + +
    From 7f418ef5bf0f6f043932cde614f43cb538b633b7 Mon Sep 17 00:00:00 2001 From: alflennik Date: Wed, 27 Mar 2024 18:15:26 -0400 Subject: [PATCH 02/10] Fix formatting for sample experimental content --- .../coverage-and-quality-report.html | 25 +- .../coverage-and-quality/prop-coverage.csv | 12 +- .../coverage-and-quality/role-coverage.csv | 6 +- content/index/index.html | 9 +- .../treeview/examples/treeview-1c.html | 868 +++--------------- 5 files changed, 151 insertions(+), 769 deletions(-) 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 a632cd3b6b..4301184eb0 100644 --- a/content/about/coverage-and-quality/coverage-and-quality-report.html +++ b/content/about/coverage-and-quality/coverage-and-quality-report.html @@ -369,7 +369,7 @@

    Roles with More than One Guidance or Exa
  • Switch Using HTML Button (HC)
  • File Directory Treeview Using Computed Properties
  • File Directory Treeview Using Declared Properties
    • -
  • [Experimental] File Directory Treeview Using Declared Properties
    • +
  • [Experimental] File Directory Treeview Using Computed Properties
  • Navigation Treeview (HC)
    • @@ -704,7 +704,7 @@

    Roles with More than One Guidance or Exa @@ -715,7 +715,7 @@

    Roles with More than One Guidance or Exa @@ -963,7 +963,7 @@

    Properties and States with More than One
  • Treegrid Email Inbox
  • File Directory Treeview Using Computed Properties
  • File Directory Treeview Using Declared Properties
    • -
  • [Experimental] File Directory Treeview Using Declared Properties
    • +
  • [Experimental] File Directory Treeview Using Computed Properties
  • Navigation Treeview (HC)
    • @@ -1071,7 +1071,7 @@

    Properties and States with More than One
  • Tabs with Manual Activation (HC)
  • File Directory Treeview Using Computed Properties
  • File Directory Treeview Using Declared Properties
    • -
  • [Experimental] File Directory Treeview Using Declared Properties
    • +
  • [Experimental] File Directory Treeview Using Computed Properties
  • Navigation Treeview (HC)
  • Complementary Landmark
  • Form Landmark
    • @@ -1088,7 +1088,6 @@

    Properties and States with More than One @@ -1122,7 +1121,6 @@

    Properties and States with More than One
  • Feed
  • Treegrid Email Inbox
  • File Directory Treeview Using Declared Properties
    • -
  • [Experimental] File Directory Treeview Using Declared Properties
    • @@ -1185,7 +1183,7 @@

    Properties and States with More than One
  • Tabs with Manual Activation (HC)
  • File Directory Treeview Using Computed Properties
  • File Directory Treeview Using Declared Properties
    • -
  • [Experimental] File Directory Treeview Using Declared Properties
    • +
  • [Experimental] File Directory Treeview Using Computed Properties
    • @@ -1196,7 +1194,6 @@

    Properties and States with More than One
  • Feed
  • Treegrid Email Inbox
  • File Directory Treeview Using Declared Properties
    • -
  • [Experimental] File Directory Treeview Using Declared Properties
    • @@ -2108,7 +2105,7 @@

    Coding Practices

    heading,aria-busy,aria-describedby,aria-errormessage,aria-hidden,aria-label,aria-roledescription - [Experimental] File Directory Treeview Using Declared Properties + [Experimental] File Directory Treeview Using Computed Properties prototype Yes Yes @@ -2116,8 +2113,8 @@

    Coding Practices

    ex1 4 3 - 12 - 6 + 9 + 3 heading,aria-busy,aria-describedby,aria-errormessage,aria-hidden,aria-label,aria-roledescription @@ -2631,7 +2628,7 @@

    Graphics Techniques

    Yes - [Experimental] File Directory Treeview Using Declared Properties + [Experimental] File Directory Treeview Using Computed Properties @@ -2953,7 +2950,7 @@

    Mouse and Pointer Events

    Yes - [Experimental] File Directory Treeview Using Declared Properties + [Experimental] File Directory Treeview Using Computed Properties Yes Yes diff --git a/content/about/coverage-and-quality/prop-coverage.csv b/content/about/coverage-and-quality/prop-coverage.csv index b23a21a550..976416dfee 100644 --- a/content/about/coverage-and-quality/prop-coverage.csv +++ b/content/about/coverage-and-quality/prop-coverage.csv @@ -14,7 +14,7 @@ "aria-disabled","0","3","Example: Alert Dialog","Example: Editor Menubar","Example: Toolbar" "aria-dropeffect","0","0" "aria-errormessage","0","0" -"aria-expanded","0","23","Example: Accordion","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Disclosure (Show/Hide) for Answers to Frequently Asked Questions","Example: Disclosure (Show/Hide) for Image Description","Example: Disclosure Navigation Menu with Top-Level Links","Example: Disclosure Navigation Menu","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Actions Menu Button Using aria-activedescendant","Example: Actions Menu Button Using element.focus()","Example: Navigation Menu Button","Example: Editor Menubar","Example: Navigation Menubar","Example: Toolbar","Example: Treegrid Email Inbox","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: [Experimental] File Directory Treeview Using Declared Properties","Example: Navigation Treeview" +"aria-expanded","0","23","Example: Accordion","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Disclosure (Show/Hide) for Answers to Frequently Asked Questions","Example: Disclosure (Show/Hide) for Image Description","Example: Disclosure Navigation Menu with Top-Level Links","Example: Disclosure Navigation Menu","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Actions Menu Button Using aria-activedescendant","Example: Actions Menu Button Using element.focus()","Example: Navigation Menu Button","Example: Editor Menubar","Example: Navigation Menubar","Example: Toolbar","Example: Treegrid Email Inbox","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: [Experimental] File Directory Treeview Using Computed Properties","Example: Navigation Treeview" "aria-flowto","0","0" "aria-grabbed","0","0" "aria-haspopup","0","9","Example: Date Picker Combobox","Example: Editable Combobox with Grid Popup","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Actions Menu Button Using aria-activedescendant","Example: Actions Menu Button Using element.focus()","Example: Navigation Menu Button","Example: Editor Menubar","Example: Navigation Menubar","Example: Toolbar" @@ -22,8 +22,8 @@ "aria-invalid","0","0" "aria-keyshortcuts","0","0" "aria-label","1","18","Guidance: Naming with a String Attribute Via aria-label","Example: Breadcrumb","Example: Auto-Rotating Image Carousel with Buttons for Slide Control","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Date Picker Dialog","Example: Link","Example: Editor Menubar","Example: Navigation Menubar","Example: Rating Radio Group","Example: Horizontal Multi-Thumb Slider","Example: Date Picker Spin Button","Example: Table","Example: Toolbar","Example: Treegrid Email Inbox","Example: Navigation Treeview" -"aria-labelledby","1","41","Guidance: Naming with Referenced Content Via aria-labelledby","Example: Accordion","Example: Alert Dialog","Example: Checkbox (Two State)","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Date Picker Dialog","Example: Modal Dialog","Example: Feed","Example: Data Grid","Example: Layout Grid","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Listbox with Grouped Options","Example: Listboxes with Rearrangeable Options","Example: Scrollable Listbox","Example: Actions Menu Button Using aria-activedescendant","Example: Actions Menu Button Using element.focus()","Example: Navigation Menu Button","Example: Navigation Menubar","Example: Meter","Example: Radio Group Using aria-activedescendant","Example: Rating Radio Group","Example: Radio Group Using Roving tabindex","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Date Picker Spin Button","Example: Switch Using HTML Button","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: [Experimental] File Directory Treeview Using Declared Properties","Example: Navigation Treeview","Example: Complementary Landmark","Example: Form Landmark","Example: Main Landmark","Example: Navigation Landmark","Example: Region Landmark","Example: Search Landmark" -"aria-level","0","3","Example: Treegrid Email Inbox","Example: File Directory Treeview Using Declared Properties","Example: [Experimental] File Directory Treeview Using Declared Properties" +"aria-labelledby","1","41","Guidance: Naming with Referenced Content Via aria-labelledby","Example: Accordion","Example: Alert Dialog","Example: Checkbox (Two State)","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Date Picker Dialog","Example: Modal Dialog","Example: Feed","Example: Data Grid","Example: Layout Grid","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Listbox with Grouped Options","Example: Listboxes with Rearrangeable Options","Example: Scrollable Listbox","Example: Actions Menu Button Using aria-activedescendant","Example: Actions Menu Button Using element.focus()","Example: Navigation Menu Button","Example: Navigation Menubar","Example: Meter","Example: Radio Group Using aria-activedescendant","Example: Rating Radio Group","Example: Radio Group Using Roving tabindex","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Date Picker Spin Button","Example: Switch Using HTML Button","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: [Experimental] File Directory Treeview Using Computed Properties","Example: Navigation Treeview","Example: Complementary Landmark","Example: Form Landmark","Example: Main Landmark","Example: Navigation Landmark","Example: Region Landmark","Example: Search Landmark" +"aria-level","0","2","Example: Treegrid Email Inbox","Example: File Directory Treeview Using Declared Properties" "aria-live","0","5","Example: Alert","Example: Auto-Rotating Image Carousel with Buttons for Slide Control","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Date Picker Combobox","Example: Date Picker Dialog" "aria-modal","0","4","Example: Alert Dialog","Example: Date Picker Combobox","Example: Date Picker Dialog","Example: Modal Dialog" "aria-multiline","0","0" @@ -31,7 +31,7 @@ "aria-orientation","0","1","Example: Vertical Temperature Slider" "aria-owns","0","1","Example: Navigation Treeview" "aria-placeholder","0","0" -"aria-posinset","0","4","Example: Feed","Example: Treegrid Email Inbox","Example: File Directory Treeview Using Declared Properties","Example: [Experimental] File Directory Treeview Using Declared Properties" +"aria-posinset","0","3","Example: Feed","Example: Treegrid Email Inbox","Example: File Directory Treeview Using Declared Properties" "aria-pressed","0","3","Example: Button (IDL Version)","Example: Button","Example: Toolbar" "aria-readonly","0","0" "aria-relevant","0","0" @@ -40,8 +40,8 @@ "aria-rowcount","1","2","Guidance: Using aria-rowcount and aria-rowindex","Example: Data Grid","Example: Layout Grid" "aria-rowindex","1","2","Guidance: Using aria-rowcount and aria-rowindex","Example: Data Grid","Example: Layout Grid" "aria-rowspan","1","0","Guidance: Defining cell spans using aria-colspan and aria-rowspan" -"aria-selected","0","17","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Date Picker Dialog","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Listbox with Grouped Options","Example: Listboxes with Rearrangeable Options","Example: Scrollable Listbox","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: [Experimental] File Directory Treeview Using Declared Properties" -"aria-setsize","0","4","Example: Feed","Example: Treegrid Email Inbox","Example: File Directory Treeview Using Declared Properties","Example: [Experimental] File Directory Treeview Using Declared Properties" +"aria-selected","0","17","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Date Picker Dialog","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Listbox with Grouped Options","Example: Listboxes with Rearrangeable Options","Example: Scrollable Listbox","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: [Experimental] File Directory Treeview Using Computed Properties" +"aria-setsize","0","3","Example: Feed","Example: Treegrid Email Inbox","Example: File Directory Treeview Using Declared Properties" "aria-sort","1","2","Guidance: Indicating sort order with aria-sort","Example: Data Grid","Example: Sortable Table" "aria-valuemax","1","8","Guidance: Using aria-valuemin, aria-valuemax and aria-valuenow","Example: Meter","Example: Horizontal Multi-Thumb Slider","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Date Picker Spin Button","Example: Toolbar" "aria-valuemin","0","8","Example: Meter","Example: Horizontal Multi-Thumb Slider","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Date Picker Spin Button","Example: Toolbar" diff --git a/content/about/coverage-and-quality/role-coverage.csv b/content/about/coverage-and-quality/role-coverage.csv index c9f893361b..d94e3adcd5 100644 --- a/content/about/coverage-and-quality/role-coverage.csv +++ b/content/about/coverage-and-quality/role-coverage.csv @@ -25,7 +25,7 @@ "generic","0","0" "grid","3","5","Guidance: Grid Popup Keyboard Interaction","Guidance: Grid (Interactive Tabular Data and Layout Containers) Pattern","Guidance: Grid and Table Properties","Example: Date Picker Combobox","Example: Editable Combobox with Grid Popup","Example: Date Picker Dialog","Example: Data Grid","Example: Layout Grid" "gridcell","0","3","Example: Editable Combobox with Grid Popup","Example: Layout Grid","Example: Treegrid Email Inbox" -"group","2","11","Guidance: Radio Group Pattern","Guidance: For Radio Group Contained in a Toolbar","Example: Auto-Rotating Image Carousel with Buttons for Slide Control","Example: Checkbox (Two State)","Example: Listbox with Grouped Options","Example: Editor Menubar","Example: Color Viewer Slider","Example: Date Picker Spin Button","Example: Switch Using HTML Button","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: [Experimental] File Directory Treeview Using Declared Properties","Example: Navigation Treeview" +"group","2","11","Guidance: Radio Group Pattern","Guidance: For Radio Group Contained in a Toolbar","Example: Auto-Rotating Image Carousel with Buttons for Slide Control","Example: Checkbox (Two State)","Example: Listbox with Grouped Options","Example: Editor Menubar","Example: Color Viewer Slider","Example: Date Picker Spin Button","Example: Switch Using HTML Button","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: [Experimental] File Directory Treeview Using Computed Properties","Example: Navigation Treeview" "heading","0","0" "img","0","0" "input","0","0" @@ -74,6 +74,6 @@ "timer","0","0" "toolbar","3","1","Guidance: For Radio Groups Not Contained in a Toolbar","Guidance: For Radio Group Contained in a Toolbar","Guidance: Toolbar Pattern","Example: Toolbar" "tooltip","1","0","Guidance: Tooltip Pattern" -"tree","2","4","Guidance: Tree Popup Keyboard Interaction","Guidance: Tree View Pattern","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: [Experimental] File Directory Treeview Using Declared Properties","Example: Navigation Treeview" +"tree","2","4","Guidance: Tree Popup Keyboard Interaction","Guidance: Tree View Pattern","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: [Experimental] File Directory Treeview Using Computed Properties","Example: Navigation Treeview" "treegrid","1","1","Guidance: Treegrid Pattern","Example: Treegrid Email Inbox" -"treeitem","0","4","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: [Experimental] File Directory Treeview Using Declared Properties","Example: Navigation Treeview" +"treeitem","0","4","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: [Experimental] File Directory Treeview Using Computed Properties","Example: Navigation Treeview" diff --git a/content/index/index.html b/content/index/index.html index d239f5f4ea..efbab442ae 100644 --- a/content/index/index.html +++ b/content/index/index.html @@ -167,6 +167,7 @@

    Examples by Role

  • Switch Using HTML Button (HC)
  • File Directory Treeview Using Computed Properties
  • File Directory Treeview Using Declared Properties
    • +
  • [Experimental] File Directory Treeview Using Computed Properties
  • Navigation Treeview (HC)
    • @@ -417,6 +418,7 @@

    Examples by Role

    @@ -431,6 +433,7 @@

    Examples by Role

    @@ -597,6 +600,7 @@

    Examples By Properties and States

  • Treegrid Email Inbox
  • File Directory Treeview Using Computed Properties
  • File Directory Treeview Using Declared Properties
    • +
  • [Experimental] File Directory Treeview Using Computed Properties
  • Navigation Treeview (HC)
    • @@ -702,6 +706,7 @@

    Examples By Properties and States

  • Tabs with Manual Activation (HC)
  • File Directory Treeview Using Computed Properties
  • File Directory Treeview Using Declared Properties
    • +
  • [Experimental] File Directory Treeview Using Computed Properties
  • Navigation Treeview (HC)
  • Complementary Landmark
  • Form Landmark
    • @@ -823,6 +828,7 @@

    Examples By Properties and States

  • Tabs with Manual Activation (HC)
  • File Directory Treeview Using Computed Properties
  • File Directory Treeview Using Declared Properties
    • +
  • [Experimental] File Directory Treeview Using Computed Properties
    • @@ -907,8 +913,7 @@

    Examples By Properties and States

    Experimental Examples

    NOTE: The HC abbreviation means example has High Contrast support.
    - +
      diff --git a/content/patterns/treeview/examples/treeview-1c.html b/content/patterns/treeview/examples/treeview-1c.html index 83d134dd23..e3a8ce9308 100644 --- a/content/patterns/treeview/examples/treeview-1c.html +++ b/content/patterns/treeview/examples/treeview-1c.html @@ -1,35 +1,22 @@ - - - - [Experimental] File Directory Treeview Example Using Declared Properties - + + + [Experimental] File Directory Treeview Example Using Computed Properties - - + + - + - - + + @@ -37,60 +24,32 @@ -
      -

      - [Experimental] File Directory Treeview Example Using Declared Properties -

      +
      +

      [Experimental] File Directory Treeview Example Using Computed Properties

      About This Experimental Example

      - +

      - This experimental version of the File Directory Treeview Example Using - Declared Properties example is not intended to ever be released or - shown to the public. It exists merely to ensure that experimental - content support can be adequately developed and tested. When support - is fully implemented, this example can be deleted. + This experimental version of the File Directory Treeview Example Using Declared Properties example is not intended to ever be released or shown to the public. + It exists merely to ensure that experimental content support can be adequately developed and tested. + When support is fully implemented, this example can be deleted.

      - The following example implementation of the - Tree View Pattern simulates a - widget for selecting a file or folder from within a hierarchical file - system for viewing in a file viewer. In the My Documents tree, - each parent node represents a folder and each end node represents a - file. Activating a node selects the node and puts the name of the - folder or file in the read-only edit field that represents the file - viewer. -

      -

      - The code in this example explicitly declares values for - aria-setsize, aria-posinset and - aria-level, which overrides browser computation of values - for these properties. The ARIA specification for these properties - states that browsers can, but are not required to, compute these - values. + This example relies on the browser to compute values for aria-setsize, aria-posinset, and aria-level. + The ARIA specification for these properties states that browsers can, but are not required to, compute their values. + So, some browser and assistive technology combinations may not compute or report correct position and level information if it is not explicitly declared. + If testing reveals gaps in support for these properties, override automatic computation by explicitly declaring their values as demonstrated in the example of a File Directory Treeview using declared properties.

      Similar examples include:

      @@ -98,536 +57,130 @@

      About This Experimental Example

      Experimental Example

      - +
      -

      My Documents

      -
        -
      - +

      Accessibility Features

      -

      - To make the focus indicator easier to see, nodes in the tree have - custom focus and hover styling created using CSS focus and hover - pseudo-classes. -

      +

      To make the focus indicator easier to see, nodes in the tree have custom focus and hover styling created using CSS focus and hover pseudo-classes.

      Terms Used to Describe Trees

      - A tree item that can be expanded to reveal child items is called a - parent node. It is a closed node when the children are hidden and an - open node when it is expanded. An end node does not have any children. - For a complete list of terms and definitions, see the - Tree View Pattern. + A tree item that can be expanded to reveal child items is called a parent node. + It is a closed node when the children are hidden and an open node when it is expanded. + An end node does not have any children. + For a complete list of terms and definitions, see the Treeview Pattern.

      Keyboard Support

      - Note that in this example, selection and focus are distinct; moving - focus does not change which node is selected. Because selection does - not follow focus, keyboard and screen reader users can navigate and - explore the tree without changing the content of the file viewer. To - learn more about this aspect of the design, read the guidance section - about - Deciding When to Make Selection Automatically Follow Focus. + Note that in this example, selection and focus are distinct; moving focus does not change which node is selected. + Because selection does not follow focus, keyboard and screen reader users can navigate and explore the tree without changing the content of the file viewer. + To learn more about this aspect of the design, see + Deciding When to Make Selection Automatically Follow Focus.

      @@ -639,28 +192,17 @@

      Keyboard Support

      - + - + @@ -669,10 +211,7 @@

      Keyboard Support

      @@ -681,14 +220,8 @@

      Keyboard Support

      @@ -698,45 +231,26 @@

      Keyboard Support

      - + - + @@ -744,10 +258,7 @@

      Keyboard Support

      @@ -774,18 +285,10 @@

      Role, Property, State, and Tabindex Attributes

      @@ -794,10 +297,7 @@

      Role, Property, State, and Tabindex Attributes

      - + @@ -811,14 +311,8 @@

      Role, Property, State, and Tabindex Attributes

      @@ -828,28 +322,12 @@

      Role, Property, State, and Tabindex Attributes

      @@ -860,19 +338,9 @@

      Role, Property, State, and Tabindex Attributes

      @@ -882,19 +350,9 @@

      Role, Property, State, and Tabindex Attributes

      @@ -905,10 +363,7 @@

      Role, Property, State, and Tabindex Attributes

      @@ -919,83 +374,20 @@

      Role, Property, State, and Tabindex Attributes

      - - - - - - - - - - - - - - - - - - - + @@ -1020,28 +412,16 @@

      JavaScript and CSS Source Code

    • Javascript: - treeitemClick.js + treeitemClick.js

      • HTML Source Code

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

      [Experimental] File Directory Treeview Example Using Computed Properties

      -
      -

      About This Experimental Example

      - -

      - This experimental version of the File Directory Treeview Example Using Declared Properties example is not intended to ever be released or shown to the public. - It exists merely to ensure that experimental content support can be adequately developed and tested. - When support is fully implemented, this example can be deleted. -

      -

      - This example relies on the browser to compute values for aria-setsize, aria-posinset, and aria-level. - The ARIA specification for these properties states that browsers can, but are not required to, compute their values. - So, some browser and assistive technology combinations may not compute or report correct position and level information if it is not explicitly declared. - If testing reveals gaps in support for these properties, override automatic computation by explicitly declaring their values as demonstrated in the example of a File Directory Treeview using declared properties. -

      -

      Similar examples include:

      - -
      - -
      -
      -

      Experimental Example

      -
      - -
      -

      My Documents

      -
        - - - -
      - -

      - -

      -
      - -
      - -
      -

      Accessibility Features

      -

      To make the focus indicator easier to see, nodes in the tree have custom focus and hover styling created using CSS focus and hover pseudo-classes.

      -
      - -
      -

      Terms Used to Describe Trees

      -

      - A tree item that can be expanded to reveal child items is called a parent node. - It is a closed node when the children are hidden and an open node when it is expanded. - An end node does not have any children. - For a complete list of terms and definitions, see the Treeview Pattern. -

      -
      - -
      -

      Keyboard Support

      -

      - Note that in this example, selection and focus are distinct; moving focus does not change which node is selected. - Because selection does not follow focus, keyboard and screen reader users can navigate and explore the tree without changing the content of the file viewer. - To learn more about this aspect of the design, see - Deciding When to Make Selection Automatically Follow Focus. -

      -
      Enter - Performs the default action, which is to select the node, - causing the name of the node to appear in the - File or Folder Selected textbox. - Performs the default action, which is to select the node, causing the name of the node to appear in the File or Folder Selected textbox.
      Space - Performs the default action, which is to select the node, - causing the name of the node to appear in the - File or Folder Selected textbox. - Performs the default action, which is to select the node, causing the name of the node to appear in the File or Folder Selected textbox.
      Down arrow
        -
      • - Moves focus to the next node that is focusable without - opening or closing a node. -
        • +
      • Moves focus to the next node that is focusable without opening or closing a node.
      • If focus is on the last node, does nothing.
      		 Up arrow
        -
      • - Moves focus to the previous node that is focusable without - opening or closing a node. -
        • +
      • Moves focus to the previous node that is focusable without opening or closing a node.
      • If focus is on the first node, does nothing.
      		 Right Arrow
        -
      • - When focus is on a closed node, opens the node; focus does - not move. -
        • -
      • - When focus is on a open node, moves focus to the first child - node. -
        • +
      • When focus is on a closed node, opens the node; focus does not move.
        • +
      • When focus is on a open node, moves focus to the first child node.
      • When focus is on an end node, does nothing.
      • When focus is on an open node, closes the node.
        • -
      • - When focus is on a child node that is also either an end - node or a closed node, moves focus to its parent node. -
        • -
      • - When focus is on a root node that is also either an end node - or a closed node, does nothing. -
        • +
      • When focus is on a child node that is also either an end node or a closed node, moves focus to its parent node.
        • +
      • When focus is on a root node that is also either an end node or a closed node, does nothing.
      Home - Moves focus to first node without opening or closing a node. - Moves focus to first node without opening or closing a node.
      End - Moves focus to the last node that can be focused without - expanding any nodes that are closed. - Moves focus to the last node that can be focused without expanding any nodes that are closed.
      a-z, A-Z
        -
      • - Focus moves to the next node with a name that starts with - the typed character. -
        • -
      • - Search wraps to first node if a matching name is not found - among the nodes that follow the focused node. -
        • -
      • - Search ignores nodes that are descendants of closed nodes. -
        • +
      • Focus moves to the next node with a name that starts with the typed character.
        • +
      • Search wraps to first node if a matching name is not found among the nodes that follow the focused node.
        • +
      • Search ignores nodes that are descendants of closed nodes.
      * (asterisk)
        -
      • - Expands all closed sibling nodes that are at the same level - as the focused node. -
        • +
      • Expands all closed sibling nodes that are at the same level as the focused node.
      • Focus does not move.
      		 ul aria-labelledby="ID_REFERENCE" ul - Refers to the heading element that contains the label that - identifies the purpose of the tree. - Refers to the heading element that contains the label that identifies the purpose of the tree.
      treeitem li
        -
      • - Makes the treeitem element focusable without - including it in the tab sequence of the page. -
        • -
      • - All treeitem elements are focusable, but only - one is included in the tab sequence. -
        • +
      • Makes the treeitem element focusable without including it in the tab sequence of the page.
        • +
      • All treeitem elements are focusable, but only one is included in the tab sequence.
      li
        +
      • Includes the treeitem element in the tab sequence.
        • +
      • Only one treeitem in the tree has tabindex="0".
        • +
      • In this implementation, the first treeitem in the tree is included in the tab sequence when the page loads.
      • - Includes the treeitem element in the tab - sequence. -
        • -
      • - Only one treeitem in the tree has - tabindex="0". -
        • -
      • - In this implementation, the first treeitem in - the tree is included in the tab sequence when - the page loads. -
        • -
      • - When the user moves focus in the tree, the - element included in the tab sequence changes to the element - with focus as described in - Managing Focus Within Components Using a Roving - tabindex. + When the user moves focus in the tree, the element included in the tab sequence changes to the element with focus as described in + Managing Focus Within Components Using a Roving tabindex.
      		li
        -
      • - Applied only to treeitem elements that are - parent nodes, i.e., they contain a ul with the - group role. -
        • -
      • - Indicates the parent node is closed, i.e., the descendant - elements are not visible. -
        • -
      • - The visual indication of the collapsed state is synchronized - by a CSS attribute selector. -
        • +
      • Applied only to treeitem elements that are parent nodes, i.e., they contain a ul with the group role.
        • +
      • Indicates the parent node is closed, i.e., the descendant elements are not visible.
        • +
      • The visual indication of the collapsed state is synchronized by a CSS attribute selector.
      li
        -
      • - Applied only to treeitem elements that are - parent nodes, i.e., they contain a ul with the - group role. -
        • -
      • - Indicates the parent node is open, i.e., the descendant - elements are visible. -
        • -
      • - The visual indication of the expanded state is synchronized - by a CSS attribute selector. -
        • +
      • Applied only to treeitem elements that are parent nodes, i.e., they contain a ul with the group role.
        • +
      • Indicates the parent node is open, i.e., the descendant elements are visible.
        • +
      • The visual indication of the expanded state is synchronized by a CSS attribute selector.
      • Applied to treeitem elements.
        • -
      • - Indicates the file or folder for the item is not currently - selected. -
        • +
      • Indicates the file or folder for the item is not currently selected.
      • Applied to treeitem elements.
        • -
      • - Indicates the file or folder for the item is currently - selected. -
        • -
      -
      aria-setsize="number"li - Defines the number of treeitem elements in the set - of treeitem elements that are in the same branch - and at the same level within the hierarchy. -
      aria-posinset="number"li -
        -
      • - Defines the position of the element within the set of other - treeitem elements that are in the same branch - and at the same level within the hierarchy. -
        • -
      • Counting is one-based, not zero-based.
        • +
      • Indicates the file or folder for the item is currently selected.
      aria-level="number"li -
        -
      • - Defines the level of the treeitem in the - hierarchical tree structure. -
        • -
      • Counting is one-based.
        • -
      • - Root treeitem elements have - aria-level="1". -
        • -
      -
      group ul
        -
      • - Identifies the ul element as a container of - treeitem elements that form a branch of the - tree. -
        • -
      • - The group is contained in the element that serves as the - parent treeitem. -
        • -
      • - Browsers use the grouping to compute - aria-level, aria-setsize and - aria-posinset values for the nodes contained in - the branch if those properties are not specified explicitly - in the code. -
        • -
      • - The grouping also prevents browsers from including the - content of the nodes in the group in the accessible name for - the parent node. -
        • +
      • Identifies the ul element as a container of treeitem elements that form a branch of the tree.
        • +
      • The group is contained in the element that serves as the parent treeitem.
        • +
      • Browsers use the grouping to compute aria-level, aria-setsize and aria-posinset values for the nodes contained in the branch.
        • +
      • The grouping also prevents browsers from including the content of the nodes in the group in the accessible name for the parent node.
      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      KeyFunction
      EnterPerforms the default action, which is to select the node, causing the name of the node to appear in the File or Folder Selected textbox.
      SpacePerforms the default action, which is to select the node, causing the name of the node to appear in the File or Folder Selected textbox.
      Down arrow -
        -
      • Moves focus to the next node that is focusable without opening or closing a node.
        • -
      • If focus is on the last node, does nothing.
        • -
      -
      Up arrow -
        -
      • Moves focus to the previous node that is focusable without opening or closing a node.
        • -
      • If focus is on the first node, does nothing.
        • -
      -
      Right Arrow -
        -
      • When focus is on a closed node, opens the node; focus does not move.
        • -
      • When focus is on a open node, moves focus to the first child node.
        • -
      • When focus is on an end node, does nothing.
        • -
      -
      Left Arrow -
        -
      • When focus is on an open node, closes the node.
        • -
      • When focus is on a child node that is also either an end node or a closed node, moves focus to its parent node.
        • -
      • When focus is on a root node that is also either an end node or a closed node, does nothing.
        • -
      -
      HomeMoves focus to first node without opening or closing a node.
      EndMoves focus to the last node that can be focused without expanding any nodes that are closed.
      a-z, A-Z -
        -
      • Focus moves to the next node with a name that starts with the typed character.
        • -
      • Search wraps to first node if a matching name is not found among the nodes that follow the focused node.
        • -
      • Search ignores nodes that are descendants of closed nodes.
        • -
      -
      * (asterisk) -
        -
      • Expands all closed sibling nodes that are at the same level as the focused node.
        • -
      • Focus does not move.
        • -
      -
      -
      - -
      -

      Role, Property, State, and Tabindex Attributes

      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      RoleAttributeElementUsage
      treeul - -
      aria-labelledby="ID_REFERENCE"ulRefers to the heading element that contains the label that identifies the purpose of the tree.
      treeitemliIdentifies the element as a treeitem.
      tabindex="-1"li -
        -
      • Makes the treeitem element focusable without including it in the tab sequence of the page.
        • -
      • All treeitem elements are focusable, but only one is included in the tab sequence.
        • -
      -
      tabindex="0"li -
        -
      • Includes the treeitem element in the tab sequence.
        • -
      • Only one treeitem in the tree has tabindex="0".
        • -
      • In this implementation, the first treeitem in the tree is included in the tab sequence when the page loads.
        • -
      • - When the user moves focus in the tree, the element included in the tab sequence changes to the element with focus as described in - Managing Focus Within Components Using a Roving tabindex. -
        • -
      -
      aria-expanded="false"li -
        -
      • Applied only to treeitem elements that are parent nodes, i.e., they contain a ul with the group role.
        • -
      • Indicates the parent node is closed, i.e., the descendant elements are not visible.
        • -
      • The visual indication of the collapsed state is synchronized by a CSS attribute selector.
        • -
      -
      aria-expanded="true"li -
        -
      • Applied only to treeitem elements that are parent nodes, i.e., they contain a ul with the group role.
        • -
      • Indicates the parent node is open, i.e., the descendant elements are visible.
        • -
      • The visual indication of the expanded state is synchronized by a CSS attribute selector.
        • -
      -
      aria-selected="false"li -
        -
      • Applied to treeitem elements.
        • -
      • Indicates the file or folder for the item is not currently selected.
        • -
      -
      aria-selected="true"li -
        -
      • Applied to treeitem elements.
        • -
      • Indicates the file or folder for the item is currently selected.
        • -
      -
      groupul -
        -
      • Identifies the ul element as a container of treeitem elements that form a branch of the tree.
        • -
      • The group is contained in the element that serves as the parent treeitem.
        • -
      • Browsers use the grouping to compute aria-level, aria-setsize and aria-posinset values for the nodes contained in the branch.
        • -
      • The grouping also prevents browsers from including the content of the nodes in the group in the accessible name for the parent node.
        • -
      -
      -
      - -
      -

      JavaScript and CSS Source Code

      - -
      - -
      -

      HTML Source Code

      - -
      - - -
      -
      - - From d4e4c3206e331365515d9901c4ad0e35dc6267f4 Mon Sep 17 00:00:00 2001 From: Stalgia Grigg Date: Mon, 10 Jun 2024 12:32:41 -0700 Subject: [PATCH 06/10] Only render experimental examples section when experimental examples present --- content/index/index.html | 6 +----- scripts/reference-tables.js | 9 +++++++-- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/content/index/index.html b/content/index/index.html index c96c528253..b0552776c6 100644 --- a/content/index/index.html +++ b/content/index/index.html @@ -904,11 +904,7 @@

      Examples By Properties and States

      -
      -

      Experimental Examples

      -
      NOTE: The HC abbreviation means example has High Contrast support.
      -
        -
        +
        diff --git a/scripts/reference-tables.js b/scripts/reference-tables.js index 128c22cee5..de3f802007 100644 --- a/scripts/reference-tables.js +++ b/scripts/reference-tables.js @@ -407,9 +407,14 @@ const examplesExperimental = indexOfExperimentalContent .map(exampleListItem) .join(''); -$('#examples_by_props_tbody').html(examplesByProps); +if (examplesExperimental.length === 0) { + // Do no display the experimental section if there are no experimental examples + $('#examples_experimental').remove(); +} else { + $('#examples_experimental_ul').html(examplesExperimental); +} -$('#examples_experimental_ul').html(examplesExperimental); +$('#examples_by_props_tbody').html(examplesByProps); // cheerio seems to fold the doctype lines despite the template const result = $.html() From e793398cb5b14b65b96f86463af391314b1098a6 Mon Sep 17 00:00:00 2001 From: Stalgia Grigg Date: Mon, 10 Jun 2024 12:39:00 -0700 Subject: [PATCH 07/10] Remove the link to experimental examples section when no experimental examples --- content/index/index.html | 2 +- scripts/reference-tables.js | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/content/index/index.html b/content/index/index.html index b0552776c6..983d2a2aa3 100644 --- a/content/index/index.html +++ b/content/index/index.html @@ -21,7 +21,7 @@

        About the Index

        Examples by Role

        diff --git a/scripts/reference-tables.js b/scripts/reference-tables.js index de3f802007..56d33e9f66 100644 --- a/scripts/reference-tables.js +++ b/scripts/reference-tables.js @@ -410,6 +410,8 @@ const examplesExperimental = indexOfExperimentalContent if (examplesExperimental.length === 0) { // Do no display the experimental section if there are no experimental examples $('#examples_experimental').remove(); + // Remove the
      • element containing the link to Experimental Examples + $('a[href="#examples_experimental_label"]').parent().remove(); } else { $('#examples_experimental_ul').html(examplesExperimental); } From 29dcab3cc456f916e8fd76eb2e37471d8f5deb85 Mon Sep 17 00:00:00 2001 From: Matt King Date: Sat, 27 Jul 2024 18:09:17 -0700 Subject: [PATCH 08/10] Editorial revisions to experimental content warning.update coverage report --- .../experimental-example-usage-warning.html | 18 ++++++------------ 1 file changed, 6 insertions(+), 12 deletions(-) diff --git a/content/shared/templates/experimental-example-usage-warning.html b/content/shared/templates/experimental-example-usage-warning.html index 56fb6e005b..3a60e69164 100644 --- a/content/shared/templates/experimental-example-usage-warning.html +++ b/content/shared/templates/experimental-example-usage-warning.html @@ -6,24 +6,18 @@

        Read This First

        - The code in this example is experimental and should therefore be considered incomplete, potentially unreliable and subject to change without notice. + Experimental content! Do not use except for new standards development purposes. Please read below to understand why. -

        This is an experimental example of one way of using ARIA that may or may not conform with the current ARIA specification.

        +

        This is an experimental implementation of potential future techniques that may not yet be supported by web standards.

          -
        • Experimental content is not final and is published to facilitate discussion and gather feedback, but it should not considered as authoritative as other content in the ARIA Authoring Practices Guide.
          • +
        • This example may include ARIA, HTML, CSS, or other code that is not yet included in a final web standard specification.
          • +
        • Experimental content is published in the APG only to facilitate discussion, gather feedback, and support testing of new features in browsers and assistive technologies.
        • - There may be support gaps in some - browser and assistive technology combinations, - especially for - mobile/touch devices. - Testing code based on this example with assistive technologies is essential before considering use in production systems. + There may be little or no support for this example in any or most + browser and assistive technology combinations.
        • The ARIA and Assistive Technologies Project is developing measurements of assistive technology support for APG examples.
          • -
        • - Robust accessibility can be further optimized by choosing implementation patterns that maximize use of semantic HTML and heeding the warning that - No ARIA is better than Bad ARIA. -
        From 06502e2ab7abc81add04806be622781fc90d36ae Mon Sep 17 00:00:00 2001 From: Matt King Date: Sun, 28 Jul 2024 09:44:54 -0700 Subject: [PATCH 09/10] Start drafting example page for removeable tabs --- .../tabs/examples/tabs-removable.html | 366 ++++++++++++++++++ 1 file changed, 366 insertions(+) create mode 100644 content/patterns/tabs/examples/tabs-removable.html diff --git a/content/patterns/tabs/examples/tabs-removable.html b/content/patterns/tabs/examples/tabs-removable.html new file mode 100644 index 0000000000..39e5895cce --- /dev/null +++ b/content/patterns/tabs/examples/tabs-removable.html @@ -0,0 +1,366 @@ + + + + + + Experimental Example of Tabs with Remove Buttons + + + + + + + + + + + + + + + +
        +

        Experimental Example of Tabs with Remove Buttons

        + +
        +

        About This Experimental Example

        + +

        + This is an experimental implementation of the new aria-actions attribute. +

        +

        + This example demonstrates a tabs widget that implements the Tabs Pattern. + In this example, a tab is automatically activated and its associated panel is displayed when the tab receives focus. + It is recommended that authors consider implementing automatic activation of tabs only in circumstances where panels can be displayed instantly, i.e., all panel content is present in the DOM. + For additional guidance, see Deciding When to Make Selection Automatically Follow Focus. +

        +

        Similar examples include:

        + +
        + +
        +
        +

        Experimental Example

        +
        + +
        +
        +

        Danish Composers

        +
        + + + + +
        + +
        +

        + Maria Theresia Ahlefeldt (16 January 1755 – 20 December 1810) was a Danish, (originally German), composer. + She is known as the first female composer in Denmark. + Maria Theresia composed music for several ballets, operas, and plays of the royal theatre. + She was given good critic as a composer and described as a “virkelig Tonekunstnerinde” ('a True Artist of Music'). +

        +
        + + + +
        +
        + +
        + +
        +

        Accessibility Features

        +
          +
        • + To make it easy for screen reader users to navigate from a tab to the beginning of content in the active tabpanel, the tabpanel element has tabindex="0" to include the panel in the page Tab sequence. + 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 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. +
            • +
          +
          • +
        • + 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

        + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
        KeyFunction
        Tab +
          +
        • When focus moves into the tab list, places focus on the active tab element .
          • +
        • When the tab list contains the focus, moves focus to the next element in the tab sequence, which is the tabpanel element.
          • +
        +
        Right Arrow +
          +
        • Moves focus to the next tab.
          • +
        • If focus is on the last tab, moves focus to the first tab.
          • +
        • Activates the newly focused tab.
          • +
        +
        Left Arrow +
          +
        • Moves focus to the previous tab.
          • +
        • If focus is on the first tab, moves focus to the last tab.
          • +
        • Activates the newly focused tab.
          • +
        +
        HomeMoves focus to the first tab and activates it.
        EndMoves focus to the last tab and activates it.
        +
        + +
        +

        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.
          • +
        • When focused, it is automatically activated, causing its associated tabpanel to be displayed.
          • +
        • Provides a label for its associated tabpanel.
          • +
        +
        + aria-selected="true" + + button + +
          +
        • Indicates the tab is selected and its associated tabpanel is displayed.
          • +
        • Set when a tab receives focus.
          • +
        +
        + aria-selected="false" + + button + +
          +
        • Indicates the tab is not selected and its associated tabpanel is NOT displayed.
          • +
        • Set for all tab elements in the tab set except the tab that is selected.
          • +
        +
        + tabindex="-1" + + button + +
          +
        • Removes the element from the page Tab sequence.
          • +
        • Set when a tab is not selected so that only the selected 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 element with role=tabpanel 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.
          • +
        +
        + tabindex="0" + + div + +
          +
        • Puts the tabpanel in the page Tab sequence.
          • +
        • Facilitates navigation to panel content for assistive technology users.
          • +
        • Focusable tabpanel elements are recommended if any panels in a set contain content where the first element in the panel is not focusable.
          • +
        +
        +
        + +
        +

        JavaScript and CSS Source Code

        + +
        + +
        +

        HTML Source Code

        +

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

        + +
        + + +
        +
        + + From 403bf60cb025960f13ff8b28a6874da46ecdaccb Mon Sep 17 00:00:00 2001 From: Matt King Date: Sun, 28 Jul 2024 10:12:02 -0700 Subject: [PATCH 10/10] Add automatic tabs similar example --- .../coverage-and-quality-report.html | 25 ++++++++++++++++--- .../coverage-and-quality/prop-coverage.csv | 6 ++--- .../coverage-and-quality/role-coverage.csv | 6 ++--- content/index/index.html | 9 +++++-- .../tabs/examples/tabs-removable.html | 1 + 5 files changed, 36 insertions(+), 11 deletions(-) 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..2eb555a097 100644 --- a/content/about/coverage-and-quality/coverage-and-quality-report.html +++ b/content/about/coverage-and-quality/coverage-and-quality-report.html @@ -649,6 +649,7 @@

        Roles with More than One Guidance or Exa
      • Auto-Rotating Image Carousel with Tabs for Slide Control (HC)
      • Tabs with Automatic Activation (HC)
      • Tabs with Manual Activation (HC)
        • +
      • Experimental Tabs with Remove Buttons (HC)
        • @@ -669,6 +670,7 @@

        Roles with More than One Guidance or Exa
      • Auto-Rotating Image Carousel with Tabs for Slide Control (HC)
      • Tabs with Automatic Activation (HC)
      • Tabs with Manual Activation (HC)
        • +
      • Experimental Tabs with Remove Buttons (HC)
        • @@ -679,6 +681,7 @@

        Roles with More than One Guidance or Exa
      • Auto-Rotating Image Carousel with Tabs for Slide Control (HC)
      • Tabs with Automatic Activation (HC)
      • Tabs with Manual Activation (HC)
        • +
      • Experimental Tabs with Remove Buttons (HC)
        • @@ -895,6 +898,7 @@

        Properties and States with More than One
      • Navigation Menu Button (HC)
      • Tabs with Automatic Activation (HC)
      • Tabs with Manual Activation (HC)
        • +
      • Experimental Tabs with Remove Buttons (HC)
      • Toolbar
        • @@ -1065,6 +1069,7 @@

        Properties and States with More than One
      • Switch Using HTML Button (HC)
      • Tabs with Automatic Activation (HC)
      • Tabs with Manual Activation (HC)
        • +
      • Experimental Tabs with Remove Buttons (HC)
      • File Directory Treeview Using Computed Properties
      • File Directory Treeview Using Declared Properties
      • Navigation Treeview (HC)
        • @@ -1176,6 +1181,7 @@

        Properties and States with More than One
      • Scrollable Listbox
      • Tabs with Automatic Activation (HC)
      • Tabs with Manual Activation (HC)
        • +
      • Experimental Tabs with Remove Buttons (HC)
      • File Directory Treeview Using Computed Properties
      • File Directory Treeview Using Declared Properties
        • @@ -1272,11 +1278,11 @@

        Coding Summary

        Total Examples - 60 + 61 High Contrast Documentation - 31 + 32 Uses SVG @@ -1306,7 +1312,7 @@

        Coding Summary

        Use Class - 36 + 37 Use Prototype @@ -2043,6 +2049,19 @@

        Coding Practices

        3 + + Experimental Tabs with Remove Buttons + class + + + Yes + ex1 + 3 + 3 + 3 + 3 + + Toolbar diff --git a/content/about/coverage-and-quality/prop-coverage.csv b/content/about/coverage-and-quality/prop-coverage.csv index 7effc0b049..2415b912e1 100644 --- a/content/about/coverage-and-quality/prop-coverage.csv +++ b/content/about/coverage-and-quality/prop-coverage.csv @@ -7,7 +7,7 @@ "aria-colcount","1","1","Guidance: Using aria-colcount and aria-colindex","Example: Data Grid" "aria-colindex","3","1","Guidance: Using aria-colcount and aria-colindex","Guidance: Using aria-colindex When Column Indices Are Contiguous","Guidance: Using aria-colindex When Column Indices Are Not Contiguous","Example: Data Grid" "aria-colspan","1","0","Guidance: Defining cell spans using aria-colspan and aria-rowspan" -"aria-controls","0","20","Example: Accordion","Example: Auto-Rotating Image Carousel with Buttons for Slide Control","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Checkbox (Mixed-State)","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Disclosure (Show/Hide) for Answers to Frequently Asked Questions","Example: Disclosure (Show/Hide) for Image Description","Example: Disclosure Navigation Menu with Top-Level Links","Example: Disclosure Navigation Menu","Example: Actions Menu Button Using aria-activedescendant","Example: Actions Menu Button Using element.focus()","Example: Navigation Menu Button","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation","Example: Toolbar" +"aria-controls","0","21","Example: Accordion","Example: Auto-Rotating Image Carousel with Buttons for Slide Control","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Checkbox (Mixed-State)","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Disclosure (Show/Hide) for Answers to Frequently Asked Questions","Example: Disclosure (Show/Hide) for Image Description","Example: Disclosure Navigation Menu with Top-Level Links","Example: Disclosure Navigation Menu","Example: Actions Menu Button Using aria-activedescendant","Example: Actions Menu Button Using element.focus()","Example: Navigation Menu Button","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation","Example: Experimental Tabs with Remove Buttons","Example: Toolbar" "aria-current","0","5","Example: Breadcrumb","Example: Disclosure Navigation Menu with Top-Level Links","Example: Disclosure Navigation Menu","Example: Navigation Menubar","Example: Navigation Treeview" "aria-describedby","1","6","Guidance: Describing by referencing content with aria-describedby","Example: Alert Dialog","Example: Date Picker Combobox","Example: Date Picker Dialog","Example: Modal Dialog","Example: Infinite Scrolling Feed","Example: Table" "aria-details","0","0" @@ -22,7 +22,7 @@ "aria-invalid","0","0" "aria-keyshortcuts","0","0" "aria-label","1","18","Guidance: Naming with a String Attribute Via aria-label","Example: Breadcrumb","Example: Auto-Rotating Image Carousel with Buttons for Slide Control","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Date Picker Dialog","Example: Link","Example: Editor Menubar","Example: Navigation Menubar","Example: Rating Radio Group","Example: Horizontal Multi-Thumb Slider","Example: Date Picker Spin Button","Example: Table","Example: Toolbar","Example: Treegrid Email Inbox","Example: Navigation Treeview" -"aria-labelledby","1","40","Guidance: Naming with Referenced Content Via aria-labelledby","Example: Accordion","Example: Alert Dialog","Example: Checkbox (Two State)","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Date Picker Dialog","Example: Modal Dialog","Example: Infinite Scrolling Feed","Example: Data Grid","Example: Layout Grid","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Listbox with Grouped Options","Example: Listboxes with Rearrangeable Options","Example: Scrollable Listbox","Example: Actions Menu Button Using aria-activedescendant","Example: Actions Menu Button Using element.focus()","Example: Navigation Menu Button","Example: Navigation Menubar","Example: Meter","Example: Radio Group Using aria-activedescendant","Example: Rating Radio Group","Example: Radio Group Using Roving tabindex","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Date Picker Spin Button","Example: Switch Using HTML Button","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: Navigation Treeview","Example: Complementary Landmark","Example: Form Landmark","Example: Main Landmark","Example: Navigation Landmark","Example: Region Landmark","Example: Search Landmark" +"aria-labelledby","1","41","Guidance: Naming with Referenced Content Via aria-labelledby","Example: Accordion","Example: Alert Dialog","Example: Checkbox (Two State)","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Date Picker Dialog","Example: Modal Dialog","Example: Infinite Scrolling Feed","Example: Data Grid","Example: Layout Grid","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Listbox with Grouped Options","Example: Listboxes with Rearrangeable Options","Example: Scrollable Listbox","Example: Actions Menu Button Using aria-activedescendant","Example: Actions Menu Button Using element.focus()","Example: Navigation Menu Button","Example: Navigation Menubar","Example: Meter","Example: Radio Group Using aria-activedescendant","Example: Rating Radio Group","Example: Radio Group Using Roving tabindex","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Date Picker Spin Button","Example: Switch Using HTML Button","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation","Example: Experimental Tabs with Remove Buttons","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: Navigation Treeview","Example: Complementary Landmark","Example: Form Landmark","Example: Main Landmark","Example: Navigation Landmark","Example: Region Landmark","Example: Search Landmark" "aria-level","0","2","Example: Treegrid Email Inbox","Example: File Directory Treeview Using Declared Properties" "aria-live","0","5","Example: Alert","Example: Auto-Rotating Image Carousel with Buttons for Slide Control","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Date Picker Combobox","Example: Date Picker Dialog" "aria-modal","0","4","Example: Alert Dialog","Example: Date Picker Combobox","Example: Date Picker Dialog","Example: Modal Dialog" @@ -40,7 +40,7 @@ "aria-rowcount","1","2","Guidance: Using aria-rowcount and aria-rowindex","Example: Data Grid","Example: Layout Grid" "aria-rowindex","1","2","Guidance: Using aria-rowcount and aria-rowindex","Example: Data Grid","Example: Layout Grid" "aria-rowspan","1","0","Guidance: Defining cell spans using aria-colspan and aria-rowspan" -"aria-selected","0","16","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Date Picker Dialog","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Listbox with Grouped Options","Example: Listboxes with Rearrangeable Options","Example: Scrollable Listbox","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties" +"aria-selected","0","17","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Date Picker Dialog","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Listbox with Grouped Options","Example: Listboxes with Rearrangeable Options","Example: Scrollable Listbox","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation","Example: Experimental Tabs with Remove Buttons","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties" "aria-setsize","0","3","Example: Infinite Scrolling Feed","Example: Treegrid Email Inbox","Example: File Directory Treeview Using Declared Properties" "aria-sort","1","2","Guidance: Indicating sort order with aria-sort","Example: Data Grid","Example: Sortable Table" "aria-valuemax","1","8","Guidance: Using aria-valuemin, aria-valuemax and aria-valuenow","Example: Meter","Example: Horizontal Multi-Thumb Slider","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Date Picker Spin Button","Example: Toolbar" diff --git a/content/about/coverage-and-quality/role-coverage.csv b/content/about/coverage-and-quality/role-coverage.csv index cbebe3fb38..923be3f7a5 100644 --- a/content/about/coverage-and-quality/role-coverage.csv +++ b/content/about/coverage-and-quality/role-coverage.csv @@ -65,10 +65,10 @@ "spinbutton","1","2","Guidance: Spinbutton Pattern","Example: Date Picker Spin Button","Example: Toolbar" "status","0","0" "switch","1","3","Guidance: Switch Pattern","Example: Switch Using HTML Button","Example: Switch Using HTML Checkbox Input","Example: Switch" -"tab","1","3","Guidance: Keyboard Navigation Between Components (The Tab Sequence)","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation" +"tab","1","4","Guidance: Keyboard Navigation Between Components (The Tab Sequence)","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation","Example: Experimental Tabs with Remove Buttons" "table","2","1","Guidance: Table Pattern","Guidance: Grid and Table Properties","Example: Table" -"tablist","0","3","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation" -"tabpanel","0","3","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation" +"tablist","0","4","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation","Example: Experimental Tabs with Remove Buttons" +"tabpanel","0","4","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation","Example: Experimental Tabs with Remove Buttons" "term","0","0" "textbox","0","0" "timer","0","0" diff --git a/content/index/index.html b/content/index/index.html index 983d2a2aa3..cbfcc0ad49 100644 --- a/content/index/index.html +++ b/content/index/index.html @@ -21,7 +21,7 @@

        About the Index

        Examples by Role

        @@ -904,7 +904,12 @@

        Examples By Properties and States

        - +
        +

        Experimental Examples

        +
        NOTE: The HC abbreviation means example has High Contrast support.
        + +
        diff --git a/content/patterns/tabs/examples/tabs-removable.html b/content/patterns/tabs/examples/tabs-removable.html index 39e5895cce..95b30b03f5 100644 --- a/content/patterns/tabs/examples/tabs-removable.html +++ b/content/patterns/tabs/examples/tabs-removable.html @@ -41,6 +41,7 @@

        About This Experimental Example

        Similar examples include: