Skip to content

Commit

Permalink
Draft about section for tabs that illustrate aria-actions.
Browse files Browse the repository at this point in the history
  • Loading branch information
mcking65 committed Jul 29, 2024
1 parent 2a2e148 commit f7f225d
Show file tree
Hide file tree
Showing 5 changed files with 404 additions and 11 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -649,6 +649,7 @@ <h2 id="roles_with_more_than_one_label">Roles with More than One Guidance or Exa
<li><a href="../../../content/patterns/carousel/examples/carousel-2-tablist.html">Auto-Rotating Image Carousel with Tabs for Slide Control</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="../../../content/patterns/tabs/examples/tabs-automatic.html">Tabs with Automatic Activation</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="../../../content/patterns/tabs/examples/tabs-manual.html">Tabs with Manual Activation</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="../../../content/patterns/tabs/examples/tabs-removable.html">Experimental Tabs with Remove Buttons</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
</ul>
</td>
</tr>
Expand All @@ -669,6 +670,7 @@ <h2 id="roles_with_more_than_one_label">Roles with More than One Guidance or Exa
<li><a href="../../../content/patterns/carousel/examples/carousel-2-tablist.html">Auto-Rotating Image Carousel with Tabs for Slide Control</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="../../../content/patterns/tabs/examples/tabs-automatic.html">Tabs with Automatic Activation</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="../../../content/patterns/tabs/examples/tabs-manual.html">Tabs with Manual Activation</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="../../../content/patterns/tabs/examples/tabs-removable.html">Experimental Tabs with Remove Buttons</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
</ul>
</td>
</tr>
Expand All @@ -679,6 +681,7 @@ <h2 id="roles_with_more_than_one_label">Roles with More than One Guidance or Exa
<li><a href="../../../content/patterns/carousel/examples/carousel-2-tablist.html">Auto-Rotating Image Carousel with Tabs for Slide Control</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="../../../content/patterns/tabs/examples/tabs-automatic.html">Tabs with Automatic Activation</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="../../../content/patterns/tabs/examples/tabs-manual.html">Tabs with Manual Activation</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="../../../content/patterns/tabs/examples/tabs-removable.html">Experimental Tabs with Remove Buttons</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
</ul>
</td>
</tr>
Expand Down Expand Up @@ -895,6 +898,7 @@ <h2 id="props_with_more_than_one_label">Properties and States with More than One
<li><a href="../../../content/patterns/menu-button/examples/menu-button-links.html">Navigation Menu Button</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="../../../content/patterns/tabs/examples/tabs-automatic.html">Tabs with Automatic Activation</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="../../../content/patterns/tabs/examples/tabs-manual.html">Tabs with Manual Activation</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="../../../content/patterns/tabs/examples/tabs-removable.html">Experimental Tabs with Remove Buttons</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="../../../content/patterns/toolbar/examples/toolbar.html">Toolbar</a></li>
</ul>
</td>
Expand Down Expand Up @@ -1065,6 +1069,7 @@ <h2 id="props_with_more_than_one_label">Properties and States with More than One
<li><a href="../../../content/patterns/switch/examples/switch-button.html">Switch Using HTML Button</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="../../../content/patterns/tabs/examples/tabs-automatic.html">Tabs with Automatic Activation</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="../../../content/patterns/tabs/examples/tabs-manual.html">Tabs with Manual Activation</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="../../../content/patterns/tabs/examples/tabs-removable.html">Experimental Tabs with Remove Buttons</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="../../../content/patterns/treeview/examples/treeview-1a.html">File Directory Treeview Using Computed Properties</a></li>
<li><a href="../../../content/patterns/treeview/examples/treeview-1b.html">File Directory Treeview Using Declared Properties</a></li>
<li><a href="../../../content/patterns/treeview/examples/treeview-navigation.html">Navigation Treeview</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
Expand Down Expand Up @@ -1176,6 +1181,7 @@ <h2 id="props_with_more_than_one_label">Properties and States with More than One
<li><a href="../../../content/patterns/listbox/examples/listbox-scrollable.html">Scrollable Listbox</a></li>
<li><a href="../../../content/patterns/tabs/examples/tabs-automatic.html">Tabs with Automatic Activation</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="../../../content/patterns/tabs/examples/tabs-manual.html">Tabs with Manual Activation</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="../../../content/patterns/tabs/examples/tabs-removable.html">Experimental Tabs with Remove Buttons</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
<li><a href="../../../content/patterns/treeview/examples/treeview-1a.html">File Directory Treeview Using Computed Properties</a></li>
<li><a href="../../../content/patterns/treeview/examples/treeview-1b.html">File Directory Treeview Using Declared Properties</a></li>
</ul>
Expand Down Expand Up @@ -1272,11 +1278,11 @@ <h3 id="example_summary">Coding Summary</h3>
<tbody>
<tr>
<th scope="row">Total Examples</th>
<td id="example_summary_total">60</td>
<td id="example_summary_total">61</td>
</tr>
<tr>
<th scope="row">High Contrast Documentation</th>
<td id="example_summary_hc">31</td>
<td id="example_summary_hc">32</td>
</tr>
<tr>
<th scope="row">Uses SVG</th>
Expand Down Expand Up @@ -1306,7 +1312,7 @@ <h3 id="example_summary">Coding Summary</h3>
</tr>
<tr>
<th scope="row">Use Class</th>
<td id="example_summary_class">36</td>
<td id="example_summary_class">37</td>
</tr>
<tr>
<th scope="row">Use Prototype</th>
Expand Down Expand Up @@ -2043,6 +2049,19 @@ <h3 id="example_coding_practices">Coding Practices</h3>
<td>3</td>
<td></td>
</tr>
<tr>
<td><a href="../../../content/patterns/tabs/examples/tabs-removable.html">Experimental Tabs with Remove Buttons</a></td>
<td>class</td>
<td></td>
<td></td>
<td>Yes</td>
<td>ex1</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td></td>
</tr>
<tr>
<td><a href="../../../content/patterns/toolbar/examples/help.html">Toolbar</a></td>
<td></td>
Expand Down
6 changes: 3 additions & 3 deletions content/about/coverage-and-quality/prop-coverage.csv
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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"
Expand All @@ -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"
Expand Down
6 changes: 3 additions & 3 deletions content/about/coverage-and-quality/role-coverage.csv
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
9 changes: 7 additions & 2 deletions content/index/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ <h2>About the Index</h2>
<ul>
<li><a href="#examples_by_role_label">Examples by Role</a></li>
<li><a href="#examples_by_props_label">Examples by Properties and States</a></li>

<li><a href="#examples_experimental_label">Experimental Examples</a></li>
</ul>
<section id="examples_by_roles">
<h2 id="examples_by_role_label">Examples by Role</h2>
Expand Down Expand Up @@ -904,7 +904,12 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
</tr></tbody>
</table>
</section>

<section id="examples_experimental">
<h2 id="examples_experimental_label">Experimental Examples</h2>
<div><strong>NOTE:</strong> The HC abbreviation means example has High Contrast support.</div>
<ul id="examples_experimental_ul">
<li><a href="../patterns/tabs/examples/tabs-removable.html">Experimental Tabs with Remove Buttons</a> (<abbr title="High Contrast Support">HC</abbr>)</li></ul>
</section>
</main>


Expand Down
Loading

0 comments on commit f7f225d

Please sign in to comment.