[Moved to new branch] Add experimental example of tabs with action buttons to demonstrate aria-actions

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

@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>

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"

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"

content/index/index.html

@@ -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>
@@ -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>