Add experimental example of tabs with action buttons to demonstrate a…

…ria-actions (pull #3071)

Resolves issue #3070.

Adds a tabs example that is functionally equivalent to the tabs with manual activation example except that it also includes an actions button for each tab. Each tab element includes the `aria-actions` attribute referencing its associated actions button.

---------

Co-authored-by: Adam Page <[email protected]>
Co-authored-by: Adam Page <[email protected]>

.vnurc

@@ -25,3 +25,5 @@ Bad value “none” for attribute “role” on element “svg”.
 Bad value “presentation” for attribute “role” on element “svg”.
 # https://github.com/validator/validator/issues/1122
 Element “input” is missing required attribute “aria-checked”.
+# https://github.com/w3c/aria-practices/issues/3070
+Attribute “aria-actions” not allowed on element “button” at this point.

content/about/coverage-and-quality/coverage-and-quality-report.html

@@ -647,6 +647,7 @@ <h2 id="roles_with_more_than_one_label">Roles with More than One Guidance or Exa
 </td>
             <td><ul>
                 <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-actions.html">Experimental  Tabs with Action Buttons</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>
             </ul>
@@ -667,6 +668,7 @@ <h2 id="roles_with_more_than_one_label">Roles with More than One Guidance or Exa
             <td></td>
             <td><ul>
                 <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-actions.html">Experimental  Tabs with Action Buttons</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>
             </ul>
@@ -677,6 +679,7 @@ <h2 id="roles_with_more_than_one_label">Roles with More than One Guidance or Exa
             <td></td>
             <td><ul>
                 <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-actions.html">Experimental  Tabs with Action Buttons</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>
             </ul>
@@ -893,6 +896,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-actions-active-descendant.html">Actions Menu Button  Using aria-activedescendant</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="../../../content/patterns/menu-button/examples/menu-button-actions.html">Actions Menu Button  Using element.focus()</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <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-actions.html">Experimental  Tabs with Action Buttons</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/toolbar/examples/toolbar.html">Toolbar</a></li>
@@ -1063,6 +1067,7 @@ <h2 id="props_with_more_than_one_label">Properties and States with More than One
                 <li><a href="../../../content/patterns/slider/examples/slider-temperature.html">Vertical Temperature Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="../../../content/patterns/spinbutton/examples/datepicker-spinbuttons.html">Date Picker Spin Button</a></li>
                 <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-actions.html">Experimental  Tabs with Action Buttons</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/treeview/examples/treeview-1a.html">File Directory Treeview  Using Computed Properties</a></li>
@@ -1174,6 +1179,7 @@ <h2 id="props_with_more_than_one_label">Properties and States with More than One
                 <li><a href="../../../content/patterns/listbox/examples/listbox-grouped.html">Listbox  with Grouped Options</a></li>
                 <li><a href="../../../content/patterns/listbox/examples/listbox-rearrangeable.html">Listboxes with Rearrangeable Options</a></li>
                 <li><a href="../../../content/patterns/listbox/examples/listbox-scrollable.html">Scrollable Listbox</a></li>
+                <li><a href="../../../content/patterns/tabs/examples/tabs-actions.html">Experimental  Tabs with Action Buttons</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/treeview/examples/treeview-1a.html">File Directory Treeview  Using Computed Properties</a></li>
@@ -1272,23 +1278,23 @@ <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>
-            <td id="example_summary_svg">34</td>
+            <td id="example_summary_svg">35</td>
           </tr>
           <tr>
             <th scope="row">Uses <code>forced-colors</code> media query</th>
             <td id="example_summary_force_colors">2</td>
           </tr>
           <tr>
             <th scope="row">Uses <code>currentColor</code> value</th>
-            <td id="example_summary_current_color">27</td>
+            <td id="example_summary_current_color">28</td>
           </tr>
 <!--
           <tr>
@@ -1306,15 +1312,15 @@ <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>
             <td id="example_summary_prototype">22</td>
           </tr>
           <tr>
             <th scope="row">Mouse Events</th>
-            <td id="example_summary_mouse">15</td>
+            <td id="example_summary_mouse">16</td>
           </tr>
           <tr>
             <th scope="row">Pointer Events</th>
@@ -2017,6 +2023,19 @@ <h3 id="example_coding_practices">Coding Practices</h3>
             <td>2</td>
             <td></td>
           </tr>
+          <tr>
+            <td><a href="../../../content/patterns/tabs/examples/tabs-actions.html">Experimental  Tabs with Action Buttons</a></td>
+            <td>class</td>
+            <td></td>
+            <td></td>
+            <td>Yes</td>
+            <td>ex1</td>
+            <td>5</td>
+            <td>3</td>
+            <td>7</td>
+            <td>3</td>
+            <td>menu,menuitem,aria-expanded,aria-haspopup,aria-hidden,aria-label</td>
+          </tr>
           <tr>
             <td><a href="../../../content/patterns/tabs/examples/tabs-automatic.html">Tabs with Automatic Activation</a></td>
             <td>class</td>
@@ -2440,6 +2459,14 @@ <h3 id="example_graphics_techniques">SVG and High Contrast Techniques</h3>
             <td></td>
             <td>Yes</td>
           </tr>
+          <tr>
+            <td><a href="../../../content/patterns/tabs/examples/tabs-actions.html">Experimental  Tabs with Action Buttons</a></td>
+            <td>Yes</td>
+            <td>Yes</td>
+            <td></td>
+            <td></td>
+            <td>Yes</td>
+          </tr>
           <tr>
             <td><a href="../../../content/patterns/toolbar/examples/toolbar.html">Toolbar</a></td>
             <td>Yes</td>
@@ -2586,6 +2613,11 @@ <h3 id="example_mouse_pointer">Mouse and Pointer Events</h3>
             <td></td>
             <td>Yes</td>
           </tr>
+          <tr>
+            <td><a href="../../../content/patterns/tabs/examples/tabs-actions.html">Experimental  Tabs with Action Buttons</a></td>
+            <td>Yes</td>
+            <td></td>
+          </tr>
           <tr>
             <td><a href="../../../content/patterns/toolbar/examples/toolbar.html">Toolbar</a></td>
             <td>Yes</td>

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: Experimental  Tabs with Action Buttons","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation","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: Experimental  Tabs with Action Buttons","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-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: Experimental  Tabs with Action Buttons","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: 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"