@patternfly/patternfly 4.160.0 → 4.162.1

package/docs/components/Table/examples/Table.md

@@ -81,6 +81,17 @@ cssPrefix: pf-c-table
 | `.pf-c-table__caption` | `<caption>`    | Initiates a table caption.              |
 | `.pf-m-center`         | `<th>`, `<td>` | Modifies cell to center its contents.   |
 
+## Responsive table behavior
+
+### Responsive layout modifier usage
+
+These classes can be used to ensure that the table changes between the tabular and grid-based layout at an appropriate screen width.
+
+| Class                                                               | Applied to    | Outcome                                                                                                                                               |
+| ------------------------------------------------------------------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `.pf-m-grid-md`, `.pf-m-grid-lg`, `.pf-m-grid-xl`, `.pf-m-grid-2xl` | `.pf-c-table` | Changes tabular layout to responsive, grid based layout at suffixed breakpoint.                                                                       |
+| `.pf-m-grid`                                                        | `.pf-c-table` | Changes tabular layout to responsive, grid based layout. This approach requires JavaScript to set this class at some prescribed viewport width value. |
+
 ## Sortable
 
 ### Sortable example
@@ -239,11 +250,13 @@ cssPrefix: pf-c-table
   <thead>
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="table-checkboxes-and-actions-check-all"
-          aria-label="Select all rows"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="table-checkboxes-and-actions-checkrowthead"
+            aria-label="Select all rows"
+          />
+        </label>
       </td>
       <th role="columnheader" scope="col">Repositories</th>
       <th role="columnheader" scope="col">Branches</th>
@@ -257,13 +270,15 @@ cssPrefix: pf-c-table
   <tbody role="rowgroup">
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="table-checkboxes-and-actions-checkrow1"
-          aria-labelledby="table-checkboxes-and-actions-node1"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="table-checkboxes-and-actions-checkrow1"
+            aria-labelledby="table-checkboxes-and-actions-node1"
+          />
+        </label>
       </td>
-      <th role="columnheader" data-label="Repository name">
+      <th role="columnheader" data-label="Data label name">
         <div id="table-checkboxes-and-actions-node1">Node 1</div>
       </th>
       <td role="cell" data-label="Branches">10</td>
@@ -318,17 +333,17 @@ cssPrefix: pf-c-table
 
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="table-checkboxes-and-actions-checkrow2"
-          aria-labelledby="table-checkboxes-and-actions-node2"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="table-checkboxes-and-actions-checkrow2"
+            aria-labelledby="table-checkboxes-and-actions-node2"
+          />
+        </label>
       </td>
-      <th role="columnheader" data-label="Repository name">
-        <div>
-          <div id="table-checkboxes-and-actions-node2">Node 2</div>
-          <a href="#">siemur/test-space</a>
-        </div>
+      <th role="columnheader" data-label="Data label name">
+        <div id="table-checkboxes-and-actions-node2">Node 2</div>
+        <a href="#">siemur/test-space</a>
       </th>
       <td role="cell" data-label="Branches">10</td>
       <td role="cell" data-label="Pull requests">25</td>
@@ -382,17 +397,17 @@ cssPrefix: pf-c-table
 
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="table-checkboxes-and-actions-checkrow3"
-          aria-labelledby="table-checkboxes-and-actions-node3"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="table-checkboxes-and-actions-checkrow3"
+            aria-labelledby="table-checkboxes-and-actions-node3"
+          />
+        </label>
       </td>
-      <th role="columnheader" data-label="Repository name">
-        <div>
-          <div id="table-checkboxes-and-actions-node3">Node 3</div>
-          <a href="#">siemur/test-space</a>
-        </div>
+      <th role="columnheader" data-label="Data label name">
+        <div id="table-checkboxes-and-actions-node3">Node 3</div>
+        <a href="#">siemur/test-space</a>
       </th>
       <td role="cell" data-label="Branches">10</td>
       <td role="cell" data-label="Pull requests">25</td>
@@ -446,17 +461,17 @@ cssPrefix: pf-c-table
 
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="table-checkboxes-and-actions-checkrow4"
-          aria-labelledby="table-checkboxes-and-actions-node4"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="table-checkboxes-and-actions-checkrow4"
+            aria-labelledby="table-checkboxes-and-actions-node4"
+          />
+        </label>
       </td>
-      <th role="columnheader" data-label="Repository name">
-        <div>
-          <div id="table-checkboxes-and-actions-node4">Node 4</div>
-          <a href="#">siemur/test-space</a>
-        </div>
+      <th role="columnheader" data-label="Data label name">
+        <div id="table-checkboxes-and-actions-node4">Node 4</div>
+        <a href="#">siemur/test-space</a>
       </th>
       <td role="cell" data-label="Branches">10</td>
       <td role="cell" data-label="Pull requests">25</td>
@@ -536,13 +551,15 @@ cssPrefix: pf-c-table
   <tbody role="rowgroup">
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="radio"
-          name="table-single-select-radio-radio"
-          aria-labelledby="table-single-select-radio-node1"
-        />
+        <label>
+          <input
+            type="radio"
+            name="table-single-select-radio-radio"
+            aria-labelledby="table-single-select-radio-node1"
+          />
+        </label>
       </td>
-      <th role="columnheader" data-label="Repository name">
+      <th role="columnheader" data-label="Data label name">
         <div id="table-single-select-radio-node1">Node 1</div>
       </th>
       <td role="cell" data-label="Branches">10</td>
@@ -597,17 +614,17 @@ cssPrefix: pf-c-table
 
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="radio"
-          name="table-single-select-radio-radio"
-          aria-labelledby="table-single-select-radio-node2"
-        />
+        <label>
+          <input
+            type="radio"
+            name="table-single-select-radio-radio"
+            aria-labelledby="table-single-select-radio-node2"
+          />
+        </label>
       </td>
-      <th role="columnheader" data-label="Repository name">
-        <div>
-          <div id="table-single-select-radio-node2">Node 2</div>
-          <a href="#">siemur/test-space</a>
-        </div>
+      <th role="columnheader" data-label="Data label name">
+        <div id="table-single-select-radio-node2">Node 2</div>
+        <a href="#">siemur/test-space</a>
       </th>
       <td role="cell" data-label="Branches">10</td>
       <td role="cell" data-label="Pull requests">25</td>
@@ -661,17 +678,17 @@ cssPrefix: pf-c-table
 
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="radio"
-          name="table-single-select-radio-radio"
-          aria-labelledby="table-single-select-radio-node3"
-        />
+        <label>
+          <input
+            type="radio"
+            name="table-single-select-radio-radio"
+            aria-labelledby="table-single-select-radio-node3"
+          />
+        </label>
       </td>
-      <th role="columnheader" data-label="Repository name">
-        <div>
-          <div id="table-single-select-radio-node3">Node 3</div>
-          <a href="#">siemur/test-space</a>
-        </div>
+      <th role="columnheader" data-label="Data label name">
+        <div id="table-single-select-radio-node3">Node 3</div>
+        <a href="#">siemur/test-space</a>
       </th>
       <td role="cell" data-label="Branches">10</td>
       <td role="cell" data-label="Pull requests">25</td>
@@ -725,17 +742,17 @@ cssPrefix: pf-c-table
 
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="radio"
-          name="table-single-select-radio-radio"
-          aria-labelledby="table-single-select-radio-node4"
-        />
+        <label>
+          <input
+            type="radio"
+            name="table-single-select-radio-radio"
+            aria-labelledby="table-single-select-radio-node4"
+          />
+        </label>
       </td>
-      <th role="columnheader" data-label="Repository name">
-        <div>
-          <div id="table-single-select-radio-node4">Node 4</div>
-          <a href="#">siemur/test-space</a>
-        </div>
+      <th role="columnheader" data-label="Data label name">
+        <div id="table-single-select-radio-node4">Node 4</div>
+        <a href="#">siemur/test-space</a>
       </th>
       <td role="cell" data-label="Branches">10</td>
       <td role="cell" data-label="Pull requests">25</td>
@@ -825,11 +842,13 @@ When header cells are empty or they contain interactive elements, `<th>` should
     <tr role="row">
       <td></td>
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="table-expandable-check-all"
-          aria-label="Select all rows"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="table-expandable-checkrowthead"
+            aria-label="Select all rows"
+          />
+        </label>
       </td>
       <th
         class="pf-m-width-30 pf-c-table__sort pf-m-selected"
@@ -899,17 +918,17 @@ When header cells are empty or they contain interactive elements, `<th>` should
       </td>
 
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="table-expandable-checkrow1"
-          aria-labelledby="table-expandable-node1"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="table-expandable-checkrow1"
+            aria-labelledby="table-expandable-node1"
+          />
+        </label>
       </td>
-      <th role="columnheader" data-label="Repository name">
-        <div>
-          <div id="table-expandable-node1">Node 1</div>
-          <a href="#">siemur/test-space</a>
-        </div>
+      <th role="columnheader" data-label="Data label name">
+        <div id="table-expandable-node1">Node 1</div>
+        <a href="#">siemur/test-space</a>
       </th>
       <td role="cell" data-label="Branches">10</td>
       <td role="cell" data-label="Pull requests">25</td>
@@ -991,17 +1010,17 @@ When header cells are empty or they contain interactive elements, `<th>` should
       </td>
 
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="table-expandable-checkrow2"
-          aria-labelledby="table-expandable-node2"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="table-expandable-checkrow2"
+            aria-labelledby="table-expandable-node2"
+          />
+        </label>
       </td>
-      <th role="columnheader" data-label="Repository name">
-        <div>
-          <div id="table-expandable-node2">Node 2</div>
-          <a href="#">siemur/test-space</a>
-        </div>
+      <th role="columnheader" data-label="Data label name">
+        <div id="table-expandable-node2">Node 2</div>
+        <a href="#">siemur/test-space</a>
       </th>
       <td role="cell" data-label="Branches">10</td>
       <td role="cell" data-label="Pull requests">25</td>
@@ -1081,17 +1100,17 @@ When header cells are empty or they contain interactive elements, `<th>` should
       </td>
 
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="table-expandable-checkrow3"
-          aria-labelledby="table-expandable-node3"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="table-expandable-checkrow3"
+            aria-labelledby="table-expandable-node3"
+          />
+        </label>
       </td>
-      <th role="columnheader" data-label="Repository name">
-        <div>
-          <div id="table-expandable-node3">Node 3</div>
-          <a href="#">siemur/test-space</a>
-        </div>
+      <th role="columnheader" data-label="Data label name">
+        <div id="table-expandable-node3">Node 3</div>
+        <a href="#">siemur/test-space</a>
       </th>
       <td role="cell" data-label="Branches">10</td>
       <td role="cell" data-label="Pull requests">25</td>
@@ -1171,17 +1190,17 @@ When header cells are empty or they contain interactive elements, `<th>` should
       </td>
 
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="table-expandable-checkrow4"
-          aria-labelledby="table-expandable-node4"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="table-expandable-checkrow4"
+            aria-labelledby="table-expandable-node4"
+          />
+        </label>
       </td>
-      <th role="columnheader" data-label="Repository name">
-        <div>
-          <div id="table-expandable-node4">Node 4</div>
-          <a href="#">siemur/test-space</a>
-        </div>
+      <th role="columnheader" data-label="Data label name">
+        <div id="table-expandable-node4">Node 4</div>
+        <a href="#">siemur/test-space</a>
       </th>
       <td role="cell" data-label="Branches">10</td>
       <td role="cell" data-label="Pull requests">25</td>
@@ -1264,11 +1283,13 @@ When header cells are empty or they contain interactive elements, `<th>` should
     <tr role="row">
       <td></td>
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="table-expandable-nested-table-check-all"
-          aria-label="Select all rows"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="table-expandable-nested-table-checkrowthead"
+            aria-label="Select all rows"
+          />
+        </label>
       </td>
       <th
         class="pf-m-width-30 pf-c-table__sort pf-m-selected"
@@ -1338,17 +1359,17 @@ When header cells are empty or they contain interactive elements, `<th>` should
       </td>
 
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="table-expandable-nested-table-checkrow1"
-          aria-labelledby="table-expandable-nested-table-node1"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="table-expandable-nested-table-checkrow1"
+            aria-labelledby="table-expandable-nested-table-node1"
+          />
+        </label>
       </td>
-      <th role="columnheader" data-label="Repository name">
-        <div>
-          <div id="table-expandable-nested-table-node1">Node 1</div>
-          <a href="#">siemur/test-space</a>
-        </div>
+      <th role="columnheader" data-label="Data label name">
+        <div id="table-expandable-nested-table-node1">Node 1</div>
+        <a href="#">siemur/test-space</a>
       </th>
       <td role="cell" data-label="Branches">10</td>
       <td role="cell" data-label="Pull requests">25</td>
@@ -1481,17 +1502,17 @@ When header cells are empty or they contain interactive elements, `<th>` should
       </td>
 
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="table-expandable-nested-table-checkrow2"
-          aria-labelledby="table-expandable-nested-table-node2"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="table-expandable-nested-table-checkrow2"
+            aria-labelledby="table-expandable-nested-table-node2"
+          />
+        </label>
       </td>
-      <th role="columnheader" data-label="Repository name">
-        <div>
-          <div id="table-expandable-nested-table-node2">Node 2</div>
-          <a href="#">siemur/test-space</a>
-        </div>
+      <th role="columnheader" data-label="Data label name">
+        <div id="table-expandable-nested-table-node2">Node 2</div>
+        <a href="#">siemur/test-space</a>
       </th>
       <td role="cell" data-label="Branches">10</td>
       <td role="cell" data-label="Pull requests">25</td>
@@ -1576,17 +1597,17 @@ When header cells are empty or they contain interactive elements, `<th>` should
       </td>
 
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="table-expandable-nested-table-checkrow3"
-          aria-labelledby="table-expandable-nested-table-node3"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="table-expandable-nested-table-checkrow3"
+            aria-labelledby="table-expandable-nested-table-node3"
+          />
+        </label>
       </td>
-      <th role="columnheader" data-label="Repository name">
-        <div>
-          <div id="table-expandable-nested-table-node3">Node 3</div>
-          <a href="#">siemur/test-space</a>
-        </div>
+      <th role="columnheader" data-label="Data label name">
+        <div id="table-expandable-nested-table-node3">Node 3</div>
+        <a href="#">siemur/test-space</a>
       </th>
       <td role="cell" data-label="Branches">10</td>
       <td role="cell" data-label="Pull requests">25</td>
@@ -1671,17 +1692,17 @@ When header cells are empty or they contain interactive elements, `<th>` should
       </td>
 
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="table-expandable-nested-table-checkrow4"
-          aria-labelledby="table-expandable-nested-table-node4"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="table-expandable-nested-table-checkrow4"
+            aria-labelledby="table-expandable-nested-table-node4"
+          />
+        </label>
       </td>
-      <th role="columnheader" data-label="Repository name">
-        <div>
-          <div id="table-expandable-nested-table-node4">Node 4</div>
-          <a href="#">siemur/test-space</a>
-        </div>
+      <th role="columnheader" data-label="Data label name">
+        <div id="table-expandable-nested-table-node4">Node 4</div>
+        <a href="#">siemur/test-space</a>
       </th>
       <td role="cell" data-label="Branches">10</td>
       <td role="cell" data-label="Pull requests">25</td>
@@ -1842,7 +1863,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
   <tbody class="pf-m-expanded" role="rowgroup">
     <tr class="pf-c-table__control-row" role="row">
       <td
-        class="pf-c-table__compound-expansion-togglepf-m-expanded pf-m-expanded"
+        class="pf-c-table__compound-expansion-toggle pf-m-expanded"
         role="cell"
         data-label="Repositories"
       >
@@ -5114,11 +5135,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
   <thead>
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="table-compact-check-all"
-          aria-label="Select all rows"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="table-compact-checkrowthead"
+            aria-label="Select all rows"
+          />
+        </label>
       </td>
       <th role="columnheader" scope="col">Contributor</th>
       <th role="columnheader" scope="col">Position</th>
@@ -5134,14 +5157,16 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
   <tbody role="rowgroup">
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="table-compact-checkrow1"
-          aria-labelledby="table-compact-name1"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="table-compact-checkrow1"
+            aria-labelledby="table-compact-node1"
+          />
+        </label>
       </td>
-      <th role="columnheader" data-label="Contributor">
-        <span id="table-compact-name1">Sam Jones</span>
+      <th role="columnheader" data-label="Data label name">
+        <div id="table-compact-node1">Sam Jones</div>
       </th>
       <td role="cell" data-label="Position">CSS guru</td>
       <td role="cell" data-label="Location">Not too sure</td>
@@ -5201,14 +5226,16 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="table-compact-checkrow2"
-          aria-labelledby="table-compact-name2"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="table-compact-checkrow2"
+            aria-labelledby="table-compact-node2"
+          />
+        </label>
       </td>
-      <th role="columnheader" data-label="Contributor">
-        <span id="table-compact-name2">Amy Miller</span>
+      <th role="columnheader" data-label="Data label name">
+        <div id="table-compact-node2">Amy Wilson</div>
       </th>
       <td role="cell" data-label="Position">Visual design</td>
       <td role="cell" data-label="Location">Raleigh</td>
@@ -5268,14 +5295,16 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="table-compact-checkrow3"
-          aria-labelledby="table-compact-name3"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="table-compact-checkrow3"
+            aria-labelledby="table-compact-node3"
+          />
+        </label>
       </td>
-      <th role="columnheader" data-label="Contributor">
-        <span id="table-compact-name3">Steve Wilson</span>
+      <th role="columnheader" data-label="Data label name">
+        <div id="table-compact-node3">Steve Wilson</div>
       </th>
       <td role="cell" data-label="Position">Visual design lead</td>
       <td role="cell" data-label="Location">Westford</td>
@@ -5335,14 +5364,16 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="table-compact-checkrow4"
-          aria-labelledby="table-compact-name4"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="table-compact-checkrow4"
+            aria-labelledby="table-compact-node4"
+          />
+        </label>
       </td>
-      <th role="columnheader" data-label="Contributor name">
-        <span id="table-compact-name4">Emma Jackson</span>
+      <th role="columnheader" data-label="Data label name">
+        <div id="table-compact-node4">Emma Jackson</div>
       </th>
       <td role="cell" data-label="Position">Interaction design</td>
       <td role="cell" data-label="Location">Westford</td>
@@ -5417,11 +5448,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
     <tr role="row">
       <td></td>
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="table-compact-expandable-check-all"
-          aria-label="Select all rows"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="table-compact-expandable-checkrowthead"
+            aria-label="Select all rows"
+          />
+        </label>
       </td>
       <th class="pf-m-width-30" role="columnheader" scope="col">Repositories</th>
       <th role="columnheader" scope="col">Branches</th>
@@ -5449,14 +5482,16 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       </td>
 
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="table-compact-expandable-checkrow1"
-          aria-labelledby="table-compact-expandable-node1"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="table-compact-expandable-checkrow1"
+            aria-labelledby="table-compact-expandable-node1"
+          />
+        </label>
       </td>
-      <th role="columnheader" data-label="Repository name">
-        <p id="table-compact-expandable-node1">Node 1</p>
+      <th role="columnheader" data-label="Data label name">
+        <div id="table-compact-expandable-node1">Node 1</div>
       </th>
       <td role="cell" data-label="Branches">10</td>
       <td role="cell" data-label="Pull requests">25</td>
@@ -5538,14 +5573,16 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       </td>
 
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="table-compact-expandable-checkrow2"
-          aria-labelledby="table-compact-expandable-node2"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="table-compact-expandable-checkrow2"
+            aria-labelledby="table-compact-expandable-node2"
+          />
+        </label>
       </td>
-      <th role="columnheader" data-label="Repository name">
-        <p id="table-compact-expandable-node2">Node 2</p>
+      <th role="columnheader" data-label="Data label name">
+        <div id="table-compact-expandable-node2">Node 2</div>
       </th>
       <td role="cell" data-label="Branches">10</td>
       <td role="cell" data-label="Pull requests">25</td>
@@ -5630,14 +5667,16 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       </td>
 
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="table-compact-expandable-checkrow3"
-          aria-labelledby="table-compact-expandable-node3"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="table-compact-expandable-checkrow3"
+            aria-labelledby="table-compact-expandable-node3"
+          />
+        </label>
       </td>
-      <th role="columnheader" data-label="Repository name">
-        <p id="table-compact-expandable-node3">Node 3</p>
+      <th role="columnheader" data-label="Data label name">
+        <div id="table-compact-expandable-node3">Node 3</div>
       </th>
       <td role="cell" data-label="Branches">10</td>
       <td role="cell" data-label="Pull requests">25</td>
@@ -5717,14 +5756,16 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       </td>
 
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="table-compact-expandable-checkrow4"
-          aria-labelledby="table-compact-expandable-node4"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="table-compact-expandable-checkrow4"
+            aria-labelledby="table-compact-expandable-node4"
+          />
+        </label>
       </td>
-      <th role="columnheader" data-label="Repository name">
-        <p id="table-compact-expandable-node4">Node 4</p>
+      <th role="columnheader" data-label="Data label name">
+        <div id="table-compact-expandable-node4">Node 4</div>
       </th>
       <td role="cell" data-label="Branches">10</td>
       <td role="cell" data-label="Pull requests">25</td>
@@ -5808,15 +5849,17 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       </td>
 
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="table-compact-expandable-checkrow5"
-          aria-labelledby="table-compact-expandable-node5"
-        />
-      </td>
-      <td role="cell" data-label="Repository name">
-        <p id="table-compact-expandable-node5">Node 5</p>
+        <label>
+          <input
+            type="checkbox"
+            name="table-compact-expandable-checkrow5"
+            aria-labelledby="table-compact-expandable-node5"
+          />
+        </label>
       </td>
+      <th role="columnheader" data-label="Data label name">
+        <div id="table-compact-expandable-node5">Node 5</div>
+      </th>
       <td role="cell" data-label="Branches">10</td>
       <td role="cell" data-label="Pull requests">25</td>
       <td role="cell" data-label="Action">
@@ -5895,14 +5938,16 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       </td>
 
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="table-compact-expandable-checkrow6"
-          aria-labelledby="table-compact-expandable-node6"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="table-compact-expandable-checkrow6"
+            aria-labelledby="table-compact-expandable-node6"
+          />
+        </label>
       </td>
-      <th role="columnheader" data-label="Repository name">
-        <p id="table-compact-expandable-node6">Node 6</p>
+      <th role="columnheader" data-label="Data label name">
+        <div id="table-compact-expandable-node6">Node 6</div>
       </th>
       <td role="cell" data-label="Branches">10</td>
       <td role="cell" data-label="Pull requests">25</td>
@@ -5994,14 +6039,16 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       </td>
 
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="table-compact-expandable-checkrow7"
-          aria-labelledby="table-compact-expandable-node7"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="table-compact-expandable-checkrow7"
+            aria-labelledby="table-compact-expandable-node7"
+          />
+        </label>
       </td>
-      <th role="columnheader" data-label="Repository name">
-        <p id="table-compact-expandable-node7">Node 7</p>
+      <th role="columnheader" data-label="Data label name">
+        <div id="table-compact-expandable-node7">Node 7</div>
       </th>
       <td role="cell" data-label="Branches">10</td>
       <td role="cell" data-label="Pull requests">25</td>
@@ -6081,14 +6128,16 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       </td>
 
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="table-compact-expandable-checkrow8"
-          aria-labelledby="table-compact-expandable-node8"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="table-compact-expandable-checkrow8"
+            aria-labelledby="table-compact-expandable-node8"
+          />
+        </label>
       </td>
-      <th role="columnheader" data-label="Repository name">
-        <p id="table-compact-expandable-node8">Node 8</p>
+      <th role="columnheader" data-label="Data label name">
+        <div id="table-compact-expandable-node8">Node 8</div>
       </th>
       <td role="cell" data-label="Branches">10</td>
       <td role="cell" data-label="Pull requests">25</td>
@@ -6177,14 +6226,16 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       </td>
 
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="table-compact-expandable-checkrow9"
-          aria-labelledby="table-compact-expandable-node9"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="table-compact-expandable-checkrow9"
+            aria-labelledby="table-compact-expandable-node9"
+          />
+        </label>
       </td>
-      <th role="columnheader" data-label="Repository name">
-        <p id="table-compact-expandable-node9">Node 9</p>
+      <th role="columnheader" data-label="Data label name">
+        <div id="table-compact-expandable-node9">Node 9</div>
       </th>
       <td role="cell" data-label="Branches">10</td>
       <td role="cell" data-label="Pull requests">25</td>
@@ -6269,11 +6320,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
   <thead>
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="table-expandable-hoverable-check-all"
-          aria-label="Select all rows"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="table-expandable-hoverable-checkrowthead"
+            aria-label="Select all rows"
+          />
+        </label>
       </td>
       <th
         class="pf-m-width-30 pf-c-table__sort pf-m-selected"
@@ -6295,14 +6348,16 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
   </thead>
   <tr class="pf-m-hoverable" role="row" tabindex="0">
     <td class="pf-c-table__check" role="cell">
-      <input
-        type="checkbox"
-        name="table-expandable-hoverable-checkrow-selectable-1"
-        aria-labelledby="table-expandable-hoverable-node-1"
-      />
+      <label>
+        <input
+          type="checkbox"
+          name="table-expandable-hoverable-checkrow1"
+          aria-labelledby="table-expandable-hoverable-node1"
+        />
+      </label>
     </td>
     <th role="columnheader" data-label="Repository name">
-      <div id="table-expandable-hoverable-node-1">Hoverable</div>
+      <div id="table-expandable-hoverable-node1">Hoverable</div>
     </th>
     <td class="pf-c-table__action" role="cell">
       <div class="pf-c-dropdown">
@@ -6351,14 +6406,16 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
   </tr>
   <tr class="pf-m-hoverable pf-m-selected" role="row" tabindex="0">
     <td class="pf-c-table__check" role="cell">
-      <input
-        type="checkbox"
-        name="table-expandable-hoverable-checkrow-selectable-2"
-        aria-labelledby="table-expandable-hoverable-node-2"
-      />
+      <label>
+        <input
+          type="checkbox"
+          name="table-expandable-hoverable-checkrow2"
+          aria-labelledby="table-expandable-hoverable-node2"
+        />
+      </label>
     </td>
     <th role="columnheader" data-label="Repository name">
-      <div id="table-expandable-hoverable-node-2">
+      <div id="table-expandable-hoverable-node2">
         <b>Selected</b>
       </div>
     </th>
@@ -6409,14 +6466,16 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
   </tr>
   <tr class="pf-m-hoverable" role="row" tabindex="0">
     <td class="pf-c-table__check" role="cell">
-      <input
-        type="checkbox"
-        name="table-expandable-hoverable-checkrow-selectable-3"
-        aria-labelledby="table-expandable-hoverable-node-3"
-      />
+      <label>
+        <input
+          type="checkbox"
+          name="table-expandable-hoverable-checkrow3"
+          aria-labelledby="table-expandable-hoverable-node3"
+        />
+      </label>
     </td>
     <th role="columnheader" data-label="Repository name">
-      <div id="table-expandable-hoverable-node-3">Hoverable</div>
+      <div id="table-expandable-hoverable-node3">Hoverable</div>
     </th>
     <td class="pf-c-table__action" role="cell">
       <div class="pf-c-dropdown">
@@ -6465,14 +6524,16 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
   </tr>
   <tr class="pf-m-hoverable" role="row" tabindex="0">
     <td class="pf-c-table__check" role="cell">
-      <input
-        type="checkbox"
-        name="table-expandable-hoverable-checkrow-selectable-4"
-        aria-labelledby="table-expandable-hoverable-node-4"
-      />
+      <label>
+        <input
+          type="checkbox"
+          name="table-expandable-hoverable-checkrow4"
+          aria-labelledby="table-expandable-hoverable-node4"
+        />
+      </label>
     </td>
     <th role="columnheader" data-label="Repository name">
-      <div id="table-expandable-hoverable-node-4">Hoverable</div>
+      <div id="table-expandable-hoverable-node4">Hoverable</div>
     </th>
     <td class="pf-c-table__action" role="cell">
       <div class="pf-c-dropdown">
@@ -6521,14 +6582,16 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
   </tr>
   <tr class="pf-m-hoverable pf-m-selected" role="row" tabindex="0">
     <td class="pf-c-table__check" role="cell">
-      <input
-        type="checkbox"
-        name="table-expandable-hoverable-checkrow-selectable-5"
-        aria-labelledby="table-expandable-hoverable-node-5"
-      />
+      <label>
+        <input
+          type="checkbox"
+          name="table-expandable-hoverable-checkrow5"
+          aria-labelledby="table-expandable-hoverable-node5"
+        />
+      </label>
     </td>
     <th role="columnheader" data-label="Repository name">
-      <div id="table-expandable-hoverable-node-5">
+      <div id="table-expandable-hoverable-node5">
         <b>Selected</b>
       </div>
     </th>
@@ -6579,14 +6642,16 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
   </tr>
   <tr class="pf-m-hoverable pf-m-selected" role="row" tabindex="0">
     <td class="pf-c-table__check" role="cell">
-      <input
-        type="checkbox"
-        name="table-expandable-hoverable-checkrow-selectable-6"
-        aria-labelledby="table-expandable-hoverable-node-6"
-      />
+      <label>
+        <input
+          type="checkbox"
+          name="table-expandable-hoverable-checkrow6"
+          aria-labelledby="table-expandable-hoverable-node6"
+        />
+      </label>
     </td>
     <th role="columnheader" data-label="Repository name">
-      <div id="table-expandable-hoverable-node-6">
+      <div id="table-expandable-hoverable-node6">
         <b>Selected</b>
       </div>
     </th>
@@ -6637,14 +6702,16 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
   </tr>
   <tr class="pf-m-hoverable pf-m-selected" role="row" tabindex="0">
     <td class="pf-c-table__check" role="cell">
-      <input
-        type="checkbox"
-        name="table-expandable-hoverable-checkrow-selectable-7"
-        aria-labelledby="table-expandable-hoverable-node-7"
-      />
+      <label>
+        <input
+          type="checkbox"
+          name="table-expandable-hoverable-checkrow7"
+          aria-labelledby="table-expandable-hoverable-node7"
+        />
+      </label>
     </td>
     <th role="columnheader" data-label="Repository name">
-      <div id="table-expandable-hoverable-node-7">
+      <div id="table-expandable-hoverable-node7">
         <b>Selected</b>
       </div>
     </th>
@@ -6695,14 +6762,16 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
   </tr>
   <tr class="pf-m-hoverable" role="row" tabindex="0">
     <td class="pf-c-table__check" role="cell">
-      <input
-        type="checkbox"
-        name="table-expandable-hoverable-checkrow-selectable-8"
-        aria-labelledby="table-expandable-hoverable-node-8"
-      />
+      <label>
+        <input
+          type="checkbox"
+          name="table-expandable-hoverable-checkrow8"
+          aria-labelledby="table-expandable-hoverable-node8"
+        />
+      </label>
     </td>
     <th role="columnheader" data-label="Repository name">
-      <div id="table-expandable-hoverable-node-8">Hoverable</div>
+      <div id="table-expandable-hoverable-node8">Hoverable</div>
     </th>
     <td class="pf-c-table__action" role="cell">
       <div class="pf-c-dropdown">
@@ -6751,14 +6820,16 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
   </tr>
   <tr class="pf-m-hoverable" role="row" tabindex="0">
     <td class="pf-c-table__check" role="cell">
-      <input
-        type="checkbox"
-        name="table-expandable-hoverable-checkrow-selectable-9"
-        aria-labelledby="table-expandable-hoverable-node-9"
-      />
+      <label>
+        <input
+          type="checkbox"
+          name="table-expandable-hoverable-checkrow9"
+          aria-labelledby="table-expandable-hoverable-node9"
+        />
+      </label>
     </td>
     <th role="columnheader" data-label="Repository name">
-      <div id="table-expandable-hoverable-node-9">Hoverable</div>
+      <div id="table-expandable-hoverable-node9">Hoverable</div>
     </th>
     <td class="pf-c-table__action" role="cell">
       <div class="pf-c-dropdown">
@@ -6807,14 +6878,16 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
   </tr>
   <tr class="pf-m-hoverable pf-m-selected" role="row" tabindex="0">
     <td class="pf-c-table__check" role="cell">
-      <input
-        type="checkbox"
-        name="table-expandable-hoverable-checkrow-selectable-10"
-        aria-labelledby="table-expandable-hoverable-node-10"
-      />
+      <label>
+        <input
+          type="checkbox"
+          name="table-expandable-hoverable-checkrow10"
+          aria-labelledby="table-expandable-hoverable-node10"
+        />
+      </label>
     </td>
     <th role="columnheader" data-label="Repository name">
-      <div id="table-expandable-hoverable-node-10">
+      <div id="table-expandable-hoverable-node10">
         <b>Selected</b>
       </div>
     </th>
@@ -6865,14 +6938,16 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
   </tr>
   <tr class="pf-m-hoverable" role="row" tabindex="0">
     <td class="pf-c-table__check" role="cell">
-      <input
-        type="checkbox"
-        name="table-expandable-hoverable-checkrow-selectable-11"
-        aria-labelledby="table-expandable-hoverable-node-11"
-      />
+      <label>
+        <input
+          type="checkbox"
+          name="table-expandable-hoverable-checkrow11"
+          aria-labelledby="table-expandable-hoverable-node11"
+        />
+      </label>
     </td>
     <th role="columnheader" data-label="Repository name">
-      <div id="table-expandable-hoverable-node-11">Hoverable</div>
+      <div id="table-expandable-hoverable-node11">Hoverable</div>
     </th>
     <td class="pf-c-table__action" role="cell">
       <div class="pf-c-dropdown">
@@ -6936,11 +7011,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
     <tr role="row">
       <td></td>
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="table-tbody-expandable-hoverable-check-all"
-          aria-label="Select all rows"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="table-tbody-expandable-hoverable-checkrowthead"
+            aria-label="Select all rows"
+          />
+        </label>
       </td>
       <th
         class="pf-m-width-30 pf-c-table__sort pf-m-selected"
@@ -6996,10 +7073,10 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <td class="pf-c-table__toggle" role="cell">
         <button
           class="pf-c-button pf-m-plain"
-          aria-labelledby="table-tbody-expandable-hoverable-node-1 table-tbody-expandable-hoverable-expandable-toggle-1"
-          id="table-tbody-expandable-hoverable-expandable-toggle-1"
+          aria-labelledby="table-tbody-expandable-hoverable-node1 table-tbody-expandable-hoverable-expandable-toggle1"
+          id="table-tbody-expandable-hoverable-expandable-toggle1"
           aria-label="Details"
-          aria-controls="table-tbody-expandable-hoverable-content-1"
+          aria-controls="table-tbody-expandable-hoverable-content1"
         >
           <div class="pf-c-table__toggle-icon">
             <i class="fas fa-angle-down" aria-hidden="true"></i>
@@ -7008,15 +7085,17 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       </td>
 
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="table-tbody-expandable-hoverable-checkrow-1"
-          aria-labelledby="table-tbody-expandable-hoverable-node-1"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="table-tbody-expandable-hoverable-checkrow1"
+            aria-labelledby="table-tbody-expandable-hoverable-node1"
+          />
+        </label>
       </td>
       <th role="columnheader" data-label="Repository name">
         <div>
-          <div id="table-tbody-expandable-hoverable-node-1">Hoverable</div>
+          <div id="table-tbody-expandable-hoverable-node1">Hoverable</div>
         </div>
       </th>
       <td role="cell" data-label="Branches">10</td>
@@ -7077,7 +7156,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         class
         role="cell"
         colspan="4"
-        id="table-tbody-expandable-hoverable-content-1"
+        id="table-tbody-expandable-hoverable-content1"
       >
         <div class="pf-c-table__expandable-row-content">Expandable content</div>
       </td>
@@ -7089,10 +7168,10 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <td class="pf-c-table__toggle" role="cell">
         <button
           class="pf-c-button pf-m-plain"
-          aria-labelledby="table-tbody-expandable-hoverable-node-2 table-tbody-expandable-hoverable-expandable-toggle-2"
-          id="table-tbody-expandable-hoverable-expandable-toggle-2"
+          aria-labelledby="table-tbody-expandable-hoverable-node2 table-tbody-expandable-hoverable-expandable-toggle2"
+          id="table-tbody-expandable-hoverable-expandable-toggle2"
           aria-label="Details"
-          aria-controls="table-tbody-expandable-hoverable-content-2"
+          aria-controls="table-tbody-expandable-hoverable-content2"
         >
           <div class="pf-c-table__toggle-icon">
             <i class="fas fa-angle-down" aria-hidden="true"></i>
@@ -7101,15 +7180,17 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       </td>
 
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="table-tbody-expandable-hoverable-checkrow-2"
-          aria-labelledby="table-tbody-expandable-hoverable-node-2"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="table-tbody-expandable-hoverable-checkrow2"
+            aria-labelledby="table-tbody-expandable-hoverable-node2"
+          />
+        </label>
       </td>
       <th role="columnheader" data-label="Repository name">
         <div>
-          <div id="table-tbody-expandable-hoverable-node-2">
+          <div id="table-tbody-expandable-hoverable-node2">
             <i>Selected and not expanded</i>
           </div>
         </div>
@@ -7172,7 +7253,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         class
         role="cell"
         colspan="4"
-        id="table-tbody-expandable-hoverable-content-2"
+        id="table-tbody-expandable-hoverable-content2"
       >
         <div class="pf-c-table__expandable-row-content">Expandable content</div>
       </td>
@@ -7184,10 +7265,10 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <td class="pf-c-table__toggle" role="cell">
         <button
           class="pf-c-button pf-m-plain"
-          aria-labelledby="table-tbody-expandable-hoverable-node-3 table-tbody-expandable-hoverable-expandable-toggle-3"
-          id="table-tbody-expandable-hoverable-expandable-toggle-3"
+          aria-labelledby="table-tbody-expandable-hoverable-node3 table-tbody-expandable-hoverable-expandable-toggle3"
+          id="table-tbody-expandable-hoverable-expandable-toggle3"
           aria-label="Details"
-          aria-controls="table-tbody-expandable-hoverable-content-3"
+          aria-controls="table-tbody-expandable-hoverable-content3"
         >
           <div class="pf-c-table__toggle-icon">
             <i class="fas fa-angle-down" aria-hidden="true"></i>
@@ -7196,15 +7277,17 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       </td>
 
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="table-tbody-expandable-hoverable-checkrow-3"
-          aria-labelledby="table-tbody-expandable-hoverable-node-3"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="table-tbody-expandable-hoverable-checkrow3"
+            aria-labelledby="table-tbody-expandable-hoverable-node3"
+          />
+        </label>
       </td>
       <th role="columnheader" data-label="Repository name">
         <div>
-          <div id="table-tbody-expandable-hoverable-node-3">Hoverable</div>
+          <div id="table-tbody-expandable-hoverable-node3">Hoverable</div>
         </div>
       </th>
       <td role="cell" data-label="Branches">10</td>
@@ -7265,7 +7348,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         class
         role="cell"
         colspan="4"
-        id="table-tbody-expandable-hoverable-content-3"
+        id="table-tbody-expandable-hoverable-content3"
       >
         <div class="pf-c-table__expandable-row-content">Expandable content</div>
       </td>
@@ -7277,10 +7360,10 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <td class="pf-c-table__toggle" role="cell">
         <button
           class="pf-c-button pf-m-plain"
-          aria-labelledby="table-tbody-expandable-hoverable-node-4 table-tbody-expandable-hoverable-expandable-toggle-4"
-          id="table-tbody-expandable-hoverable-expandable-toggle-4"
+          aria-labelledby="table-tbody-expandable-hoverable-node4 table-tbody-expandable-hoverable-expandable-toggle4"
+          id="table-tbody-expandable-hoverable-expandable-toggle4"
           aria-label="Details"
-          aria-controls="table-tbody-expandable-hoverable-content-4"
+          aria-controls="table-tbody-expandable-hoverable-content4"
         >
           <div class="pf-c-table__toggle-icon">
             <i class="fas fa-angle-down" aria-hidden="true"></i>
@@ -7289,15 +7372,17 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       </td>
 
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="table-tbody-expandable-hoverable-checkrow-4"
-          aria-labelledby="table-tbody-expandable-hoverable-node-4"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="table-tbody-expandable-hoverable-checkrow4"
+            aria-labelledby="table-tbody-expandable-hoverable-node4"
+          />
+        </label>
       </td>
       <th role="columnheader" data-label="Repository name">
         <div>
-          <div id="table-tbody-expandable-hoverable-node-4">Hoverable</div>
+          <div id="table-tbody-expandable-hoverable-node4">Hoverable</div>
         </div>
       </th>
       <td role="cell" data-label="Branches">10</td>
@@ -7358,7 +7443,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         class
         role="cell"
         colspan="4"
-        id="table-tbody-expandable-hoverable-content-4"
+        id="table-tbody-expandable-hoverable-content4"
       >
         <div class="pf-c-table__expandable-row-content">Expandable content</div>
       </td>
@@ -7370,10 +7455,10 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <td class="pf-c-table__toggle" role="cell">
         <button
           class="pf-c-button pf-m-plain"
-          aria-labelledby="table-tbody-expandable-hoverable-node-5 table-tbody-expandable-hoverable-expandable-toggle-5"
-          id="table-tbody-expandable-hoverable-expandable-toggle-5"
+          aria-labelledby="table-tbody-expandable-hoverable-node5 table-tbody-expandable-hoverable-expandable-toggle5"
+          id="table-tbody-expandable-hoverable-expandable-toggle5"
           aria-label="Details"
-          aria-controls="table-tbody-expandable-hoverable-content-5"
+          aria-controls="table-tbody-expandable-hoverable-content5"
         >
           <div class="pf-c-table__toggle-icon">
             <i class="fas fa-angle-down" aria-hidden="true"></i>
@@ -7382,15 +7467,17 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       </td>
 
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="table-tbody-expandable-hoverable-checkrow-5"
-          aria-labelledby="table-tbody-expandable-hoverable-node-5"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="table-tbody-expandable-hoverable-checkrow5"
+            aria-labelledby="table-tbody-expandable-hoverable-node5"
+          />
+        </label>
       </td>
       <th role="columnheader" data-label="Repository name">
         <div>
-          <div id="table-tbody-expandable-hoverable-node-5">
+          <div id="table-tbody-expandable-hoverable-node5">
             <i>Selected and not expanded</i>
           </div>
         </div>
@@ -7453,7 +7540,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         class
         role="cell"
         colspan="4"
-        id="table-tbody-expandable-hoverable-content-5"
+        id="table-tbody-expandable-hoverable-content5"
       >
         <div class="pf-c-table__expandable-row-content">Expandable content</div>
       </td>
@@ -7465,10 +7552,10 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <td class="pf-c-table__toggle" role="cell">
         <button
           class="pf-c-button pf-m-plain"
-          aria-labelledby="table-tbody-expandable-hoverable-node-6 table-tbody-expandable-hoverable-expandable-toggle-6"
-          id="table-tbody-expandable-hoverable-expandable-toggle-6"
+          aria-labelledby="table-tbody-expandable-hoverable-node6 table-tbody-expandable-hoverable-expandable-toggle6"
+          id="table-tbody-expandable-hoverable-expandable-toggle6"
           aria-label="Details"
-          aria-controls="table-tbody-expandable-hoverable-content-6"
+          aria-controls="table-tbody-expandable-hoverable-content6"
         >
           <div class="pf-c-table__toggle-icon">
             <i class="fas fa-angle-down" aria-hidden="true"></i>
@@ -7477,15 +7564,17 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       </td>
 
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="table-tbody-expandable-hoverable-checkrow-6"
-          aria-labelledby="table-tbody-expandable-hoverable-node-6"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="table-tbody-expandable-hoverable-checkrow6"
+            aria-labelledby="table-tbody-expandable-hoverable-node6"
+          />
+        </label>
       </td>
       <th role="columnheader" data-label="Repository name">
         <div>
-          <div id="table-tbody-expandable-hoverable-node-6">
+          <div id="table-tbody-expandable-hoverable-node6">
             <i>Selected and not expanded</i>
           </div>
         </div>
@@ -7548,7 +7637,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         class
         role="cell"
         colspan="4"
-        id="table-tbody-expandable-hoverable-content-6"
+        id="table-tbody-expandable-hoverable-content6"
       >
         <div class="pf-c-table__expandable-row-content">Expandable content</div>
       </td>
@@ -7560,10 +7649,10 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <td class="pf-c-table__toggle" role="cell">
         <button
           class="pf-c-button pf-m-plain"
-          aria-labelledby="table-tbody-expandable-hoverable-node-7 table-tbody-expandable-hoverable-expandable-toggle-7"
-          id="table-tbody-expandable-hoverable-expandable-toggle-7"
+          aria-labelledby="table-tbody-expandable-hoverable-node7 table-tbody-expandable-hoverable-expandable-toggle7"
+          id="table-tbody-expandable-hoverable-expandable-toggle7"
           aria-label="Details"
-          aria-controls="table-tbody-expandable-hoverable-content-7"
+          aria-controls="table-tbody-expandable-hoverable-content7"
         >
           <div class="pf-c-table__toggle-icon">
             <i class="fas fa-angle-down" aria-hidden="true"></i>
@@ -7572,15 +7661,17 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       </td>
 
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="table-tbody-expandable-hoverable-checkrow-7"
-          aria-labelledby="table-tbody-expandable-hoverable-node-7"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="table-tbody-expandable-hoverable-checkrow7"
+            aria-labelledby="table-tbody-expandable-hoverable-node7"
+          />
+        </label>
       </td>
       <th role="columnheader" data-label="Repository name">
         <div>
-          <div id="table-tbody-expandable-hoverable-node-7">
+          <div id="table-tbody-expandable-hoverable-node7">
             <i>Selected and not expanded</i>
           </div>
         </div>
@@ -7643,7 +7734,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         class
         role="cell"
         colspan="4"
-        id="table-tbody-expandable-hoverable-content-7"
+        id="table-tbody-expandable-hoverable-content7"
       >
         <div class="pf-c-table__expandable-row-content">Expandable content</div>
       </td>
@@ -7655,10 +7746,10 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <td class="pf-c-table__toggle" role="cell">
         <button
           class="pf-c-button pf-m-plain"
-          aria-labelledby="table-tbody-expandable-hoverable-node-8 table-tbody-expandable-hoverable-expandable-toggle-8"
-          id="table-tbody-expandable-hoverable-expandable-toggle-8"
+          aria-labelledby="table-tbody-expandable-hoverable-node8 table-tbody-expandable-hoverable-expandable-toggle8"
+          id="table-tbody-expandable-hoverable-expandable-toggle8"
           aria-label="Details"
-          aria-controls="table-tbody-expandable-hoverable-content-8"
+          aria-controls="table-tbody-expandable-hoverable-content8"
         >
           <div class="pf-c-table__toggle-icon">
             <i class="fas fa-angle-down" aria-hidden="true"></i>
@@ -7667,15 +7758,17 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       </td>
 
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="table-tbody-expandable-hoverable-checkrow-8"
-          aria-labelledby="table-tbody-expandable-hoverable-node-8"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="table-tbody-expandable-hoverable-checkrow8"
+            aria-labelledby="table-tbody-expandable-hoverable-node8"
+          />
+        </label>
       </td>
       <th role="columnheader" data-label="Repository name">
         <div>
-          <div id="table-tbody-expandable-hoverable-node-8">Hoverable</div>
+          <div id="table-tbody-expandable-hoverable-node8">Hoverable</div>
         </div>
       </th>
       <td role="cell" data-label="Branches">10</td>
@@ -7736,7 +7829,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         class
         role="cell"
         colspan="4"
-        id="table-tbody-expandable-hoverable-content-8"
+        id="table-tbody-expandable-hoverable-content8"
       >
         <div class="pf-c-table__expandable-row-content">Expandable content</div>
       </td>
@@ -7748,10 +7841,10 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <td class="pf-c-table__toggle" role="cell">
         <button
           class="pf-c-button pf-m-plain"
-          aria-labelledby="table-tbody-expandable-hoverable-node-9 table-tbody-expandable-hoverable-expandable-toggle-9"
-          id="table-tbody-expandable-hoverable-expandable-toggle-9"
+          aria-labelledby="table-tbody-expandable-hoverable-node9 table-tbody-expandable-hoverable-expandable-toggle9"
+          id="table-tbody-expandable-hoverable-expandable-toggle9"
           aria-label="Details"
-          aria-controls="table-tbody-expandable-hoverable-content-9"
+          aria-controls="table-tbody-expandable-hoverable-content9"
         >
           <div class="pf-c-table__toggle-icon">
             <i class="fas fa-angle-down" aria-hidden="true"></i>
@@ -7760,15 +7853,17 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       </td>
 
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="table-tbody-expandable-hoverable-checkrow-9"
-          aria-labelledby="table-tbody-expandable-hoverable-node-9"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="table-tbody-expandable-hoverable-checkrow9"
+            aria-labelledby="table-tbody-expandable-hoverable-node9"
+          />
+        </label>
       </td>
       <th role="columnheader" data-label="Repository name">
         <div>
-          <div id="table-tbody-expandable-hoverable-node-9">Hoverable</div>
+          <div id="table-tbody-expandable-hoverable-node9">Hoverable</div>
         </div>
       </th>
       <td role="cell" data-label="Branches">10</td>
@@ -7829,7 +7924,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         class
         role="cell"
         colspan="4"
-        id="table-tbody-expandable-hoverable-content-9"
+        id="table-tbody-expandable-hoverable-content9"
       >
         <div class="pf-c-table__expandable-row-content">Expandable content</div>
       </td>
@@ -7841,10 +7936,10 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <td class="pf-c-table__toggle" role="cell">
         <button
           class="pf-c-button pf-m-plain"
-          aria-labelledby="table-tbody-expandable-hoverable-node-10 table-tbody-expandable-hoverable-expandable-toggle-10"
-          id="table-tbody-expandable-hoverable-expandable-toggle-10"
+          aria-labelledby="table-tbody-expandable-hoverable-node10 table-tbody-expandable-hoverable-expandable-toggle10"
+          id="table-tbody-expandable-hoverable-expandable-toggle10"
           aria-label="Details"
-          aria-controls="table-tbody-expandable-hoverable-content-10"
+          aria-controls="table-tbody-expandable-hoverable-content10"
         >
           <div class="pf-c-table__toggle-icon">
             <i class="fas fa-angle-down" aria-hidden="true"></i>
@@ -7853,15 +7948,17 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       </td>
 
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="table-tbody-expandable-hoverable-checkrow-10"
-          aria-labelledby="table-tbody-expandable-hoverable-node-10"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="table-tbody-expandable-hoverable-checkrow10"
+            aria-labelledby="table-tbody-expandable-hoverable-node10"
+          />
+        </label>
       </td>
       <th role="columnheader" data-label="Repository name">
         <div>
-          <div id="table-tbody-expandable-hoverable-node-10">Hoverable</div>
+          <div id="table-tbody-expandable-hoverable-node10">Hoverable</div>
         </div>
       </th>
       <td role="cell" data-label="Branches">10</td>
@@ -7922,7 +8019,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         class
         role="cell"
         colspan="4"
-        id="table-tbody-expandable-hoverable-content-10"
+        id="table-tbody-expandable-hoverable-content10"
       >
         <div class="pf-c-table__expandable-row-content">Expandable content</div>
       </td>
@@ -7938,10 +8035,10 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <td class="pf-c-table__toggle" role="cell">
         <button
           class="pf-c-button pf-m-plain pf-m-expanded"
-          aria-labelledby="table-tbody-expandable-hoverable-node-11 table-tbody-expandable-hoverable-expandable-toggle-11"
-          id="table-tbody-expandable-hoverable-expandable-toggle-11"
+          aria-labelledby="table-tbody-expandable-hoverable-node11 table-tbody-expandable-hoverable-expandable-toggle11"
+          id="table-tbody-expandable-hoverable-expandable-toggle11"
           aria-label="Details"
-          aria-controls="table-tbody-expandable-hoverable-content-11"
+          aria-controls="table-tbody-expandable-hoverable-content11"
           aria-expanded="true"
         >
           <div class="pf-c-table__toggle-icon">
@@ -7951,15 +8048,17 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       </td>
 
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="table-tbody-expandable-hoverable-checkrow-11"
-          aria-labelledby="table-tbody-expandable-hoverable-node-11"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="table-tbody-expandable-hoverable-checkrow11"
+            aria-labelledby="table-tbody-expandable-hoverable-node11"
+          />
+        </label>
       </td>
       <th role="columnheader" data-label="Repository name">
         <div>
-          <div id="table-tbody-expandable-hoverable-node-11">
+          <div id="table-tbody-expandable-hoverable-node11">
             <b>Expanded and selected</b>
           </div>
         </div>
@@ -8022,7 +8121,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         class
         role="cell"
         colspan="4"
-        id="table-tbody-expandable-hoverable-content-11"
+        id="table-tbody-expandable-hoverable-content11"
       >
         <div class="pf-c-table__expandable-row-content">Expandable content</div>
       </td>
@@ -8034,10 +8133,10 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <td class="pf-c-table__toggle" role="cell">
         <button
           class="pf-c-button pf-m-plain"
-          aria-labelledby="table-tbody-expandable-hoverable-node-12 table-tbody-expandable-hoverable-expandable-toggle-12"
-          id="table-tbody-expandable-hoverable-expandable-toggle-12"
+          aria-labelledby="table-tbody-expandable-hoverable-node12 table-tbody-expandable-hoverable-expandable-toggle12"
+          id="table-tbody-expandable-hoverable-expandable-toggle12"
           aria-label="Details"
-          aria-controls="table-tbody-expandable-hoverable-content-12"
+          aria-controls="table-tbody-expandable-hoverable-content12"
         >
           <div class="pf-c-table__toggle-icon">
             <i class="fas fa-angle-down" aria-hidden="true"></i>
@@ -8046,15 +8145,17 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       </td>
 
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="table-tbody-expandable-hoverable-checkrow-12"
-          aria-labelledby="table-tbody-expandable-hoverable-node-12"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="table-tbody-expandable-hoverable-checkrow12"
+            aria-labelledby="table-tbody-expandable-hoverable-node12"
+          />
+        </label>
       </td>
       <th role="columnheader" data-label="Repository name">
         <div>
-          <div id="table-tbody-expandable-hoverable-node-12">Hoverable</div>
+          <div id="table-tbody-expandable-hoverable-node12">Hoverable</div>
         </div>
       </th>
       <td role="cell" data-label="Branches">10</td>
@@ -8115,7 +8216,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         class
         role="cell"
         colspan="4"
-        id="table-tbody-expandable-hoverable-content-12"
+        id="table-tbody-expandable-hoverable-content12"
       >
         <div class="pf-c-table__expandable-row-content">Expandable content</div>
       </td>
@@ -8131,10 +8232,10 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <td class="pf-c-table__toggle" role="cell">
         <button
           class="pf-c-button pf-m-plain pf-m-expanded"
-          aria-labelledby="table-tbody-expandable-hoverable-node-13 table-tbody-expandable-hoverable-expandable-toggle-13"
-          id="table-tbody-expandable-hoverable-expandable-toggle-13"
+          aria-labelledby="table-tbody-expandable-hoverable-node13 table-tbody-expandable-hoverable-expandable-toggle13"
+          id="table-tbody-expandable-hoverable-expandable-toggle13"
           aria-label="Details"
-          aria-controls="table-tbody-expandable-hoverable-content-13"
+          aria-controls="table-tbody-expandable-hoverable-content13"
           aria-expanded="true"
         >
           <div class="pf-c-table__toggle-icon">
@@ -8144,15 +8245,17 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       </td>
 
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="table-tbody-expandable-hoverable-checkrow-13"
-          aria-labelledby="table-tbody-expandable-hoverable-node-13"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="table-tbody-expandable-hoverable-checkrow13"
+            aria-labelledby="table-tbody-expandable-hoverable-node13"
+          />
+        </label>
       </td>
       <th role="columnheader" data-label="Repository name">
         <div>
-          <div id="table-tbody-expandable-hoverable-node-13">
+          <div id="table-tbody-expandable-hoverable-node13">
             <b>Expanded and selected</b>
           </div>
         </div>
@@ -8215,7 +8318,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         class
         role="cell"
         colspan="4"
-        id="table-tbody-expandable-hoverable-content-13"
+        id="table-tbody-expandable-hoverable-content13"
       >
         <div class="pf-c-table__expandable-row-content">Expandable content</div>
       </td>
@@ -8231,10 +8334,10 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <td class="pf-c-table__toggle" role="cell">
         <button
           class="pf-c-button pf-m-plain pf-m-expanded"
-          aria-labelledby="table-tbody-expandable-hoverable-node-15 table-tbody-expandable-hoverable-expandable-toggle-15"
-          id="table-tbody-expandable-hoverable-expandable-toggle-15"
+          aria-labelledby="table-tbody-expandable-hoverable-node15 table-tbody-expandable-hoverable-expandable-toggle15"
+          id="table-tbody-expandable-hoverable-expandable-toggle15"
           aria-label="Details"
-          aria-controls="table-tbody-expandable-hoverable-content-15"
+          aria-controls="table-tbody-expandable-hoverable-content15"
           aria-expanded="true"
         >
           <div class="pf-c-table__toggle-icon">
@@ -8244,15 +8347,17 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       </td>
 
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="table-tbody-expandable-hoverable-checkrow-15"
-          aria-labelledby="table-tbody-expandable-hoverable-node-15"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="table-tbody-expandable-hoverable-checkrow15"
+            aria-labelledby="table-tbody-expandable-hoverable-node15"
+          />
+        </label>
       </td>
       <th role="columnheader" data-label="Repository name">
         <div>
-          <div id="table-tbody-expandable-hoverable-node-15">
+          <div id="table-tbody-expandable-hoverable-node15">
             <b>Expanded and selected</b>
           </div>
         </div>
@@ -8315,7 +8420,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         class
         role="cell"
         colspan="4"
-        id="table-tbody-expandable-hoverable-content-15"
+        id="table-tbody-expandable-hoverable-content15"
       >
         <div class="pf-c-table__expandable-row-content">Expandable content</div>
       </td>
@@ -8327,10 +8432,10 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <td class="pf-c-table__toggle" role="cell">
         <button
           class="pf-c-button pf-m-plain pf-m-expanded"
-          aria-labelledby="table-tbody-expandable-hoverable-node-14 table-tbody-expandable-hoverable-expandable-toggle-14"
-          id="table-tbody-expandable-hoverable-expandable-toggle-14"
+          aria-labelledby="table-tbody-expandable-hoverable-node14 table-tbody-expandable-hoverable-expandable-toggle14"
+          id="table-tbody-expandable-hoverable-expandable-toggle14"
           aria-label="Details"
-          aria-controls="table-tbody-expandable-hoverable-content-14"
+          aria-controls="table-tbody-expandable-hoverable-content14"
           aria-expanded="true"
         >
           <div class="pf-c-table__toggle-icon">
@@ -8340,16 +8445,18 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       </td>
 
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="table-tbody-expandable-hoverable-checkrow-14"
-          aria-labelledby="table-tbody-expandable-hoverable-node-14"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="table-tbody-expandable-hoverable-checkrow14"
+            aria-labelledby="table-tbody-expandable-hoverable-node14"
+          />
+        </label>
       </td>
       <th role="columnheader" data-label="Repository name">
         <div>
           <div
-            id="table-tbody-expandable-hoverable-node-14"
+            id="table-tbody-expandable-hoverable-node14"
           >Expanded and not selected</div>
         </div>
       </th>
@@ -8411,7 +8518,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         class
         role="cell"
         colspan="4"
-        id="table-tbody-expandable-hoverable-content-14"
+        id="table-tbody-expandable-hoverable-content14"
       >
         <div class="pf-c-table__expandable-row-content">Expandable content</div>
       </td>
@@ -8423,10 +8530,10 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <td class="pf-c-table__toggle" role="cell">
         <button
           class="pf-c-button pf-m-plain"
-          aria-labelledby="table-tbody-expandable-hoverable-node-16 table-tbody-expandable-hoverable-expandable-toggle-16"
-          id="table-tbody-expandable-hoverable-expandable-toggle-16"
+          aria-labelledby="table-tbody-expandable-hoverable-node16 table-tbody-expandable-hoverable-expandable-toggle16"
+          id="table-tbody-expandable-hoverable-expandable-toggle16"
           aria-label="Details"
-          aria-controls="table-tbody-expandable-hoverable-content-16"
+          aria-controls="table-tbody-expandable-hoverable-content16"
         >
           <div class="pf-c-table__toggle-icon">
             <i class="fas fa-angle-down" aria-hidden="true"></i>
@@ -8435,15 +8542,17 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       </td>
 
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="table-tbody-expandable-hoverable-checkrow-16"
-          aria-labelledby="table-tbody-expandable-hoverable-node-16"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="table-tbody-expandable-hoverable-checkrow16"
+            aria-labelledby="table-tbody-expandable-hoverable-node16"
+          />
+        </label>
       </td>
       <th role="columnheader" data-label="Repository name">
         <div>
-          <div id="table-tbody-expandable-hoverable-node-16">Hoverable</div>
+          <div id="table-tbody-expandable-hoverable-node16">Hoverable</div>
         </div>
       </th>
       <td role="cell" data-label="Branches">10</td>
@@ -8504,7 +8613,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         class
         role="cell"
         colspan="4"
-        id="table-tbody-expandable-hoverable-content-16"
+        id="table-tbody-expandable-hoverable-content16"
       >
         <div class="pf-c-table__expandable-row-content">Expandable content</div>
       </td>
@@ -8516,10 +8625,10 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <td class="pf-c-table__toggle" role="cell">
         <button
           class="pf-c-button pf-m-plain pf-m-expanded"
-          aria-labelledby="table-tbody-expandable-hoverable-node-17 table-tbody-expandable-hoverable-expandable-toggle-17"
-          id="table-tbody-expandable-hoverable-expandable-toggle-17"
+          aria-labelledby="table-tbody-expandable-hoverable-node17 table-tbody-expandable-hoverable-expandable-toggle17"
+          id="table-tbody-expandable-hoverable-expandable-toggle17"
           aria-label="Details"
-          aria-controls="table-tbody-expandable-hoverable-content-17"
+          aria-controls="table-tbody-expandable-hoverable-content17"
           aria-expanded="true"
         >
           <div class="pf-c-table__toggle-icon">
@@ -8528,17 +8637,19 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         </button>
       </td>
 
-      <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="table-tbody-expandable-hoverable-checkrow-17"
-          aria-labelledby="table-tbody-expandable-hoverable-node-17"
-        />
+      <td class="pf-c-table__check" role="cell">
+        <label>
+          <input
+            type="checkbox"
+            name="table-tbody-expandable-hoverable-checkrow17"
+            aria-labelledby="table-tbody-expandable-hoverable-node17"
+          />
+        </label>
       </td>
       <th role="columnheader" data-label="Repository name">
         <div>
           <div
-            id="table-tbody-expandable-hoverable-node-17"
+            id="table-tbody-expandable-hoverable-node17"
           >Expanded and not selected</div>
         </div>
       </th>
@@ -8600,7 +8711,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         class
         role="cell"
         colspan="4"
-        id="table-tbody-expandable-hoverable-content-17"
+        id="table-tbody-expandable-hoverable-content17"
       >
         <div class="pf-c-table__expandable-row-content">Expandable content</div>
       </td>
@@ -8612,10 +8723,10 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <td class="pf-c-table__toggle" role="cell">
         <button
           class="pf-c-button pf-m-plain"
-          aria-labelledby="table-tbody-expandable-hoverable-node-18 table-tbody-expandable-hoverable-expandable-toggle-18"
-          id="table-tbody-expandable-hoverable-expandable-toggle-18"
+          aria-labelledby="table-tbody-expandable-hoverable-node18 table-tbody-expandable-hoverable-expandable-toggle18"
+          id="table-tbody-expandable-hoverable-expandable-toggle18"
           aria-label="Details"
-          aria-controls="table-tbody-expandable-hoverable-content-18"
+          aria-controls="table-tbody-expandable-hoverable-content18"
         >
           <div class="pf-c-table__toggle-icon">
             <i class="fas fa-angle-down" aria-hidden="true"></i>
@@ -8624,15 +8735,17 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       </td>
 
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="table-tbody-expandable-hoverable-checkrow-18"
-          aria-labelledby="table-tbody-expandable-hoverable-node-18"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="table-tbody-expandable-hoverable-checkrow18"
+            aria-labelledby="table-tbody-expandable-hoverable-node18"
+          />
+        </label>
       </td>
       <th role="columnheader" data-label="Repository name">
         <div>
-          <div id="table-tbody-expandable-hoverable-node-18">Hoverable</div>
+          <div id="table-tbody-expandable-hoverable-node18">Hoverable</div>
         </div>
       </th>
       <td role="cell" data-label="Branches">10</td>
@@ -8693,7 +8806,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         class
         role="cell"
         colspan="4"
-        id="table-tbody-expandable-hoverable-content-18"
+        id="table-tbody-expandable-hoverable-content18"
       >
         <div class="pf-c-table__expandable-row-content">Expandable content</div>
       </td>
@@ -8705,10 +8818,10 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <td class="pf-c-table__toggle" role="cell">
         <button
           class="pf-c-button pf-m-plain"
-          aria-labelledby="table-tbody-expandable-hoverable-node-19 table-tbody-expandable-hoverable-expandable-toggle-19"
-          id="table-tbody-expandable-hoverable-expandable-toggle-19"
+          aria-labelledby="table-tbody-expandable-hoverable-node19 table-tbody-expandable-hoverable-expandable-toggle19"
+          id="table-tbody-expandable-hoverable-expandable-toggle19"
           aria-label="Details"
-          aria-controls="table-tbody-expandable-hoverable-content-19"
+          aria-controls="table-tbody-expandable-hoverable-content19"
         >
           <div class="pf-c-table__toggle-icon">
             <i class="fas fa-angle-down" aria-hidden="true"></i>
@@ -8717,15 +8830,17 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       </td>
 
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="table-tbody-expandable-hoverable-checkrow-19"
-          aria-labelledby="table-tbody-expandable-hoverable-node-19"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="table-tbody-expandable-hoverable-checkrow19"
+            aria-labelledby="table-tbody-expandable-hoverable-node19"
+          />
+        </label>
       </td>
       <th role="columnheader" data-label="Repository name">
         <div>
-          <div id="table-tbody-expandable-hoverable-node-19">Hoverable</div>
+          <div id="table-tbody-expandable-hoverable-node19">Hoverable</div>
         </div>
       </th>
       <td role="cell" data-label="Branches">10</td>
@@ -8786,7 +8901,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         class
         role="cell"
         colspan="4"
-        id="table-tbody-expandable-hoverable-content-19"
+        id="table-tbody-expandable-hoverable-content19"
       >
         <div class="pf-c-table__expandable-row-content">Expandable content</div>
       </td>
@@ -8810,9 +8925,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 | `.pf-m-hoverable` | `.pf-c-table tbody`, `.pf-c-table tr` | Modifies a tbody or tr table element to be hoverable.           |
 | `.pf-m-selected`  | `.pf-c-table tbody`, `.pf-c-table tr` | Modifies a selectable tbody or tr table element to be selected. |
 
-## Tree table
-
-### Tree table example
+### Tree table
 
 ```html
 <table
@@ -10239,7 +10352,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
 ```
 
-### Tree table with checkboxes example
+### Tree table with checkboxes
 
 ```html
 <table
@@ -11784,7 +11897,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
 ```
 
-### Tree table with checkboxes and icons example
+### Tree table with checkboxes and icons
 
 ```html
 <table
@@ -13421,11 +13534,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
   <thead>
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="borderless-table-check-all"
-          aria-label="Select all rows"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="borderless-table-checkrowthead"
+            aria-label="Select all rows"
+          />
+        </label>
       </td>
       <th role="columnheader" scope="col">Contributor</th>
       <th role="columnheader" scope="col">Position</th>
@@ -13441,14 +13556,16 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
   <tbody role="rowgroup">
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="borderless-table-checkrow1"
-          aria-labelledby="borderless-table-name1"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="borderless-table-checkrow1"
+            aria-labelledby="borderless-table-node1"
+          />
+        </label>
       </td>
-      <th role="columnheader" data-label="Contributor">
-        <span id="borderless-table-name1">Sam Jones</span>
+      <th role="columnheader" data-label="Data label name">
+        <div id="borderless-table-node1">Sam Jones</div>
       </th>
       <td role="cell" data-label="Position">CSS guru</td>
       <td role="cell" data-label="Location">Not too sure</td>
@@ -13508,14 +13625,16 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="borderless-table-checkrow2"
-          aria-labelledby="borderless-table-name2"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="borderless-table-checkrow2"
+            aria-labelledby="borderless-table-node2"
+          />
+        </label>
       </td>
-      <th role="columnheader" data-label="Contributor">
-        <span id="borderless-table-name2">Amy Miller</span>
+      <th role="columnheader" data-label="Data label name">
+        <div id="borderless-table-node2">Amy Wilson</div>
       </th>
       <td role="cell" data-label="Position">Visual design</td>
       <td role="cell" data-label="Location">Raleigh</td>
@@ -13575,14 +13694,16 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="borderless-table-checkrow3"
-          aria-labelledby="borderless-table-name3"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="borderless-table-checkrow3"
+            aria-labelledby="borderless-table-node3"
+          />
+        </label>
       </td>
-      <th role="columnheader" data-label="Contributor">
-        <span id="borderless-table-name3">Steve Wilson</span>
+      <th role="columnheader" data-label="Data label name">
+        <div id="borderless-table-node3">Steve Wilson</div>
       </th>
       <td role="cell" data-label="Position">Visual design lead</td>
       <td role="cell" data-label="Location">Westford</td>
@@ -13642,14 +13763,16 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="borderless-table-checkrow4"
-          aria-labelledby="borderless-table-name4"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="borderless-table-checkrow4"
+            aria-labelledby="borderless-table-node4"
+          />
+        </label>
       </td>
-      <th role="columnheader" data-label="Contributor name">
-        <span id="borderless-table-name4">Emma Jackson</span>
+      <th role="columnheader" data-label="Data label name">
+        <div id="borderless-table-node4">Emma Jackson</div>
       </th>
       <td role="cell" data-label="Position">Interaction design</td>
       <td role="cell" data-label="Location">Westford</td>
@@ -13723,11 +13846,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
   <thead>
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="borderless-compact-table-check-all"
-          aria-label="Select all rows"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="borderless-compact-table-checkrowthead"
+            aria-label="Select all rows"
+          />
+        </label>
       </td>
       <th role="columnheader" scope="col">Contributor</th>
       <th role="columnheader" scope="col">Position</th>
@@ -13743,14 +13868,16 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
   <tbody role="rowgroup">
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="borderless-compact-table-checkrow1"
-          aria-labelledby="borderless-compact-table-name1"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="borderless-compact-table-checkrow1"
+            aria-labelledby="borderless-compact-table-node1"
+          />
+        </label>
       </td>
-      <th role="columnheader" data-label="Contributor">
-        <span id="borderless-compact-table-name1">Sam Jones</span>
+      <th role="columnheader" data-label="Data label name">
+        <div id="borderless-compact-table-node1">Sam Jones</div>
       </th>
       <td role="cell" data-label="Position">CSS guru</td>
       <td role="cell" data-label="Location">Not too sure</td>
@@ -13810,14 +13937,16 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="borderless-compact-table-checkrow2"
-          aria-labelledby="borderless-compact-table-name2"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="borderless-compact-table-checkrow2"
+            aria-labelledby="borderless-compact-table-node2"
+          />
+        </label>
       </td>
-      <th role="columnheader" data-label="Contributor">
-        <span id="borderless-compact-table-name2">Amy Miller</span>
+      <th role="columnheader" data-label="Data label name">
+        <div id="borderless-compact-table-node2">Amy Wilson</div>
       </th>
       <td role="cell" data-label="Position">Visual design</td>
       <td role="cell" data-label="Location">Raleigh</td>
@@ -13877,14 +14006,16 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="borderless-compact-table-checkrow3"
-          aria-labelledby="borderless-compact-table-name3"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="borderless-compact-table-checkrow3"
+            aria-labelledby="borderless-compact-table-node3"
+          />
+        </label>
       </td>
-      <th role="columnheader" data-label="Contributor">
-        <span id="borderless-compact-table-name3">Steve Wilson</span>
+      <th role="columnheader" data-label="Data label name">
+        <div id="borderless-compact-table-node3">Steve Wilson</div>
       </th>
       <td role="cell" data-label="Position">Visual design lead</td>
       <td role="cell" data-label="Location">Westford</td>
@@ -13944,14 +14075,16 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="borderless-compact-table-checkrow4"
-          aria-labelledby="borderless-compact-table-name4"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="borderless-compact-table-checkrow4"
+            aria-labelledby="borderless-compact-table-node4"
+          />
+        </label>
       </td>
-      <th role="columnheader" data-label="Contributor name">
-        <span id="borderless-compact-table-name4">Emma Jackson</span>
+      <th role="columnheader" data-label="Data label name">
+        <div id="borderless-compact-table-node4">Emma Jackson</div>
       </th>
       <td role="cell" data-label="Position">Interaction design</td>
       <td role="cell" data-label="Location">Westford</td>
@@ -14026,11 +14159,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
     <tr role="row">
       <td></td>
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="borderless-table-expandable-check-all"
-          aria-label="Select all rows"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="borderless-table-expandable-checkrowthead"
+            aria-label="Select all rows"
+          />
+        </label>
       </td>
       <th
         class="pf-m-width-30 pf-c-table__sort pf-m-selected"
@@ -14100,17 +14235,17 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       </td>
 
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="borderless-table-expandable-checkrow1"
-          aria-labelledby="borderless-table-expandable-node1"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="borderless-table-expandable-checkrow1"
+            aria-labelledby="borderless-table-expandable-node1"
+          />
+        </label>
       </td>
-      <th role="columnheader" data-label="Repository name">
-        <div>
-          <div id="borderless-table-expandable-node1">Node 1</div>
-          <a href="#">siemur/test-space</a>
-        </div>
+      <th role="columnheader" data-label="Data label name">
+        <div id="borderless-table-expandable-node1">Node 1</div>
+        <a href="#">siemur/test-space</a>
       </th>
       <td role="cell" data-label="Branches">10</td>
       <td role="cell" data-label="Pull requests">25</td>
@@ -14197,17 +14332,17 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       </td>
 
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="borderless-table-expandable-checkrow2"
-          aria-labelledby="borderless-table-expandable-node2"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="borderless-table-expandable-checkrow2"
+            aria-labelledby="borderless-table-expandable-node2"
+          />
+        </label>
       </td>
-      <th role="columnheader" data-label="Repository name">
-        <div>
-          <div id="borderless-table-expandable-node2">Node 2</div>
-          <a href="#">siemur/test-space</a>
-        </div>
+      <th role="columnheader" data-label="Data label name">
+        <div id="borderless-table-expandable-node2">Node 2</div>
+        <a href="#">siemur/test-space</a>
       </th>
       <td role="cell" data-label="Branches">10</td>
       <td role="cell" data-label="Pull requests">25</td>
@@ -14292,17 +14427,17 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       </td>
 
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="borderless-table-expandable-checkrow3"
-          aria-labelledby="borderless-table-expandable-node3"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="borderless-table-expandable-checkrow3"
+            aria-labelledby="borderless-table-expandable-node3"
+          />
+        </label>
       </td>
-      <th role="columnheader" data-label="Repository name">
-        <div>
-          <div id="borderless-table-expandable-node3">Node 3</div>
-          <a href="#">siemur/test-space</a>
-        </div>
+      <th role="columnheader" data-label="Data label name">
+        <div id="borderless-table-expandable-node3">Node 3</div>
+        <a href="#">siemur/test-space</a>
       </th>
       <td role="cell" data-label="Branches">10</td>
       <td role="cell" data-label="Pull requests">25</td>
@@ -14387,17 +14522,17 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       </td>
 
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="borderless-table-expandable-checkrow4"
-          aria-labelledby="borderless-table-expandable-node4"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="borderless-table-expandable-checkrow4"
+            aria-labelledby="borderless-table-expandable-node4"
+          />
+        </label>
       </td>
-      <th role="columnheader" data-label="Repository name">
-        <div>
-          <div id="borderless-table-expandable-node4">Node 4</div>
-          <a href="#">siemur/test-space</a>
-        </div>
+      <th role="columnheader" data-label="Data label name">
+        <div id="borderless-table-expandable-node4">Node 4</div>
+        <a href="#">siemur/test-space</a>
       </th>
       <td role="cell" data-label="Branches">10</td>
       <td role="cell" data-label="Pull requests">25</td>
@@ -14627,7 +14762,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <table
           class="pf-c-table pf-m-compact pf-m-no-border-rows"
           role="grid"
-          id="borderless-compound-expansion-table-nested-table-1"
+          id="borderless-compound-expansion-table-nested-table-1-"
           aria-label="Nested table"
         >
           <thead>
@@ -14667,7 +14802,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                 <div class="pf-c-dropdown">
                   <button
                     class="pf-c-dropdown__toggle pf-m-plain"
-                    id="borderless-compound-expansion-table-nested-table-1-dropdown-kebab-nested-tr1-button"
+                    id="borderless-compound-expansion-table-nested-table-1--dropdown-kebab-nested-tr1-button"
                     aria-expanded="false"
                     type="button"
                     aria-label="Actions"
@@ -14676,7 +14811,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                   </button>
                   <ul
                     class="pf-c-dropdown__menu pf-m-align-right"
-                    aria-labelledby="borderless-compound-expansion-table-nested-table-1-dropdown-kebab-nested-tr1-button"
+                    aria-labelledby="borderless-compound-expansion-table-nested-table-1--dropdown-kebab-nested-tr1-button"
                     hidden
                   >
                     <li>
@@ -14725,7 +14860,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                 <div class="pf-c-dropdown">
                   <button
                     class="pf-c-dropdown__toggle pf-m-plain"
-                    id="borderless-compound-expansion-table-nested-table-1-dropdown-kebab-nested-tr2-button"
+                    id="borderless-compound-expansion-table-nested-table-1--dropdown-kebab-nested-tr2-button"
                     aria-expanded="false"
                     type="button"
                     aria-label="Actions"
@@ -14734,7 +14869,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                   </button>
                   <ul
                     class="pf-c-dropdown__menu pf-m-align-right"
-                    aria-labelledby="borderless-compound-expansion-table-nested-table-1-dropdown-kebab-nested-tr2-button"
+                    aria-labelledby="borderless-compound-expansion-table-nested-table-1--dropdown-kebab-nested-tr2-button"
                     hidden
                   >
                     <li>
@@ -14783,7 +14918,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                 <div class="pf-c-dropdown">
                   <button
                     class="pf-c-dropdown__toggle pf-m-plain"
-                    id="borderless-compound-expansion-table-nested-table-1-dropdown-kebab-nested-tr3-button"
+                    id="borderless-compound-expansion-table-nested-table-1--dropdown-kebab-nested-tr3-button"
                     aria-expanded="false"
                     type="button"
                     aria-label="Actions"
@@ -14792,7 +14927,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                   </button>
                   <ul
                     class="pf-c-dropdown__menu pf-m-align-right"
-                    aria-labelledby="borderless-compound-expansion-table-nested-table-1-dropdown-kebab-nested-tr3-button"
+                    aria-labelledby="borderless-compound-expansion-table-nested-table-1--dropdown-kebab-nested-tr3-button"
                     hidden
                   >
                     <li>
@@ -14841,7 +14976,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                 <div class="pf-c-dropdown">
                   <button
                     class="pf-c-dropdown__toggle pf-m-plain"
-                    id="borderless-compound-expansion-table-nested-table-1-dropdown-kebab-nested-tr4-button"
+                    id="borderless-compound-expansion-table-nested-table-1--dropdown-kebab-nested-tr4-button"
                     aria-expanded="false"
                     type="button"
                     aria-label="Actions"
@@ -14850,7 +14985,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                   </button>
                   <ul
                     class="pf-c-dropdown__menu pf-m-align-right"
-                    aria-labelledby="borderless-compound-expansion-table-nested-table-1-dropdown-kebab-nested-tr4-button"
+                    aria-labelledby="borderless-compound-expansion-table-nested-table-1--dropdown-kebab-nested-tr4-button"
                     hidden
                   >
                     <li>
@@ -14899,7 +15034,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                 <div class="pf-c-dropdown">
                   <button
                     class="pf-c-dropdown__toggle pf-m-plain"
-                    id="borderless-compound-expansion-table-nested-table-1-dropdown-kebab-nested-tr5-button"
+                    id="borderless-compound-expansion-table-nested-table-1--dropdown-kebab-nested-tr5-button"
                     aria-expanded="false"
                     type="button"
                     aria-label="Actions"
@@ -14908,7 +15043,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                   </button>
                   <ul
                     class="pf-c-dropdown__menu pf-m-align-right"
-                    aria-labelledby="borderless-compound-expansion-table-nested-table-1-dropdown-kebab-nested-tr5-button"
+                    aria-labelledby="borderless-compound-expansion-table-nested-table-1--dropdown-kebab-nested-tr5-button"
                     hidden
                   >
                     <li>
@@ -14956,7 +15091,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <table
           class="pf-c-table pf-m-compact pf-m-no-border-rows"
           role="grid"
-          id="borderless-compound-expansion-table-nested-table-2"
+          id="borderless-compound-expansion-table-nested-table-2-"
           aria-label="Nested table"
         >
           <thead>
@@ -14996,7 +15131,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                 <div class="pf-c-dropdown">
                   <button
                     class="pf-c-dropdown__toggle pf-m-plain"
-                    id="borderless-compound-expansion-table-nested-table-2-dropdown-kebab-nested-tr1-button"
+                    id="borderless-compound-expansion-table-nested-table-2--dropdown-kebab-nested-tr1-button"
                     aria-expanded="false"
                     type="button"
                     aria-label="Actions"
@@ -15005,7 +15140,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                   </button>
                   <ul
                     class="pf-c-dropdown__menu pf-m-align-right"
-                    aria-labelledby="borderless-compound-expansion-table-nested-table-2-dropdown-kebab-nested-tr1-button"
+                    aria-labelledby="borderless-compound-expansion-table-nested-table-2--dropdown-kebab-nested-tr1-button"
                     hidden
                   >
                     <li>
@@ -15054,7 +15189,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                 <div class="pf-c-dropdown">
                   <button
                     class="pf-c-dropdown__toggle pf-m-plain"
-                    id="borderless-compound-expansion-table-nested-table-2-dropdown-kebab-nested-tr2-button"
+                    id="borderless-compound-expansion-table-nested-table-2--dropdown-kebab-nested-tr2-button"
                     aria-expanded="false"
                     type="button"
                     aria-label="Actions"
@@ -15063,7 +15198,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                   </button>
                   <ul
                     class="pf-c-dropdown__menu pf-m-align-right"
-                    aria-labelledby="borderless-compound-expansion-table-nested-table-2-dropdown-kebab-nested-tr2-button"
+                    aria-labelledby="borderless-compound-expansion-table-nested-table-2--dropdown-kebab-nested-tr2-button"
                     hidden
                   >
                     <li>
@@ -15112,7 +15247,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                 <div class="pf-c-dropdown">
                   <button
                     class="pf-c-dropdown__toggle pf-m-plain"
-                    id="borderless-compound-expansion-table-nested-table-2-dropdown-kebab-nested-tr3-button"
+                    id="borderless-compound-expansion-table-nested-table-2--dropdown-kebab-nested-tr3-button"
                     aria-expanded="false"
                     type="button"
                     aria-label="Actions"
@@ -15121,7 +15256,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                   </button>
                   <ul
                     class="pf-c-dropdown__menu pf-m-align-right"
-                    aria-labelledby="borderless-compound-expansion-table-nested-table-2-dropdown-kebab-nested-tr3-button"
+                    aria-labelledby="borderless-compound-expansion-table-nested-table-2--dropdown-kebab-nested-tr3-button"
                     hidden
                   >
                     <li>
@@ -15170,7 +15305,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                 <div class="pf-c-dropdown">
                   <button
                     class="pf-c-dropdown__toggle pf-m-plain"
-                    id="borderless-compound-expansion-table-nested-table-2-dropdown-kebab-nested-tr4-button"
+                    id="borderless-compound-expansion-table-nested-table-2--dropdown-kebab-nested-tr4-button"
                     aria-expanded="false"
                     type="button"
                     aria-label="Actions"
@@ -15179,7 +15314,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                   </button>
                   <ul
                     class="pf-c-dropdown__menu pf-m-align-right"
-                    aria-labelledby="borderless-compound-expansion-table-nested-table-2-dropdown-kebab-nested-tr4-button"
+                    aria-labelledby="borderless-compound-expansion-table-nested-table-2--dropdown-kebab-nested-tr4-button"
                     hidden
                   >
                     <li>
@@ -15228,7 +15363,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                 <div class="pf-c-dropdown">
                   <button
                     class="pf-c-dropdown__toggle pf-m-plain"
-                    id="borderless-compound-expansion-table-nested-table-2-dropdown-kebab-nested-tr5-button"
+                    id="borderless-compound-expansion-table-nested-table-2--dropdown-kebab-nested-tr5-button"
                     aria-expanded="false"
                     type="button"
                     aria-label="Actions"
@@ -15237,7 +15372,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                   </button>
                   <ul
                     class="pf-c-dropdown__menu pf-m-align-right"
-                    aria-labelledby="borderless-compound-expansion-table-nested-table-2-dropdown-kebab-nested-tr5-button"
+                    aria-labelledby="borderless-compound-expansion-table-nested-table-2--dropdown-kebab-nested-tr5-button"
                     hidden
                   >
                     <li>
@@ -15285,7 +15420,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <table
           class="pf-c-table pf-m-compact pf-m-no-border-rows"
           role="grid"
-          id="borderless-compound-expansion-table-nested-table-3"
+          id="borderless-compound-expansion-table-nested-table-3-"
           aria-label="Nested table"
         >
           <thead>
@@ -15325,7 +15460,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                 <div class="pf-c-dropdown">
                   <button
                     class="pf-c-dropdown__toggle pf-m-plain"
-                    id="borderless-compound-expansion-table-nested-table-3-dropdown-kebab-nested-tr1-button"
+                    id="borderless-compound-expansion-table-nested-table-3--dropdown-kebab-nested-tr1-button"
                     aria-expanded="false"
                     type="button"
                     aria-label="Actions"
@@ -15334,7 +15469,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                   </button>
                   <ul
                     class="pf-c-dropdown__menu pf-m-align-right"
-                    aria-labelledby="borderless-compound-expansion-table-nested-table-3-dropdown-kebab-nested-tr1-button"
+                    aria-labelledby="borderless-compound-expansion-table-nested-table-3--dropdown-kebab-nested-tr1-button"
                     hidden
                   >
                     <li>
@@ -15383,7 +15518,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                 <div class="pf-c-dropdown">
                   <button
                     class="pf-c-dropdown__toggle pf-m-plain"
-                    id="borderless-compound-expansion-table-nested-table-3-dropdown-kebab-nested-tr2-button"
+                    id="borderless-compound-expansion-table-nested-table-3--dropdown-kebab-nested-tr2-button"
                     aria-expanded="false"
                     type="button"
                     aria-label="Actions"
@@ -15392,7 +15527,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                   </button>
                   <ul
                     class="pf-c-dropdown__menu pf-m-align-right"
-                    aria-labelledby="borderless-compound-expansion-table-nested-table-3-dropdown-kebab-nested-tr2-button"
+                    aria-labelledby="borderless-compound-expansion-table-nested-table-3--dropdown-kebab-nested-tr2-button"
                     hidden
                   >
                     <li>
@@ -15441,7 +15576,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                 <div class="pf-c-dropdown">
                   <button
                     class="pf-c-dropdown__toggle pf-m-plain"
-                    id="borderless-compound-expansion-table-nested-table-3-dropdown-kebab-nested-tr3-button"
+                    id="borderless-compound-expansion-table-nested-table-3--dropdown-kebab-nested-tr3-button"
                     aria-expanded="false"
                     type="button"
                     aria-label="Actions"
@@ -15450,7 +15585,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                   </button>
                   <ul
                     class="pf-c-dropdown__menu pf-m-align-right"
-                    aria-labelledby="borderless-compound-expansion-table-nested-table-3-dropdown-kebab-nested-tr3-button"
+                    aria-labelledby="borderless-compound-expansion-table-nested-table-3--dropdown-kebab-nested-tr3-button"
                     hidden
                   >
                     <li>
@@ -15499,7 +15634,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                 <div class="pf-c-dropdown">
                   <button
                     class="pf-c-dropdown__toggle pf-m-plain"
-                    id="borderless-compound-expansion-table-nested-table-3-dropdown-kebab-nested-tr4-button"
+                    id="borderless-compound-expansion-table-nested-table-3--dropdown-kebab-nested-tr4-button"
                     aria-expanded="false"
                     type="button"
                     aria-label="Actions"
@@ -15508,7 +15643,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                   </button>
                   <ul
                     class="pf-c-dropdown__menu pf-m-align-right"
-                    aria-labelledby="borderless-compound-expansion-table-nested-table-3-dropdown-kebab-nested-tr4-button"
+                    aria-labelledby="borderless-compound-expansion-table-nested-table-3--dropdown-kebab-nested-tr4-button"
                     hidden
                   >
                     <li>
@@ -15557,7 +15692,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                 <div class="pf-c-dropdown">
                   <button
                     class="pf-c-dropdown__toggle pf-m-plain"
-                    id="borderless-compound-expansion-table-nested-table-3-dropdown-kebab-nested-tr5-button"
+                    id="borderless-compound-expansion-table-nested-table-3--dropdown-kebab-nested-tr5-button"
                     aria-expanded="false"
                     type="button"
                     aria-label="Actions"
@@ -15566,7 +15701,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                   </button>
                   <ul
                     class="pf-c-dropdown__menu pf-m-align-right"
-                    aria-labelledby="borderless-compound-expansion-table-nested-table-3-dropdown-kebab-nested-tr5-button"
+                    aria-labelledby="borderless-compound-expansion-table-nested-table-3--dropdown-kebab-nested-tr5-button"
                     hidden
                   >
                     <li>
@@ -15705,7 +15840,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <table
           class="pf-c-table pf-m-compact pf-m-no-border-rows"
           role="grid"
-          id="borderless-compound-expansion-table-nested-table-4"
+          id="borderless-compound-expansion-table-nested-table-4-"
           aria-label="Nested table"
         >
           <thead>
@@ -15745,7 +15880,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                 <div class="pf-c-dropdown">
                   <button
                     class="pf-c-dropdown__toggle pf-m-plain"
-                    id="borderless-compound-expansion-table-nested-table-4-dropdown-kebab-nested-tr1-button"
+                    id="borderless-compound-expansion-table-nested-table-4--dropdown-kebab-nested-tr1-button"
                     aria-expanded="false"
                     type="button"
                     aria-label="Actions"
@@ -15754,7 +15889,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                   </button>
                   <ul
                     class="pf-c-dropdown__menu pf-m-align-right"
-                    aria-labelledby="borderless-compound-expansion-table-nested-table-4-dropdown-kebab-nested-tr1-button"
+                    aria-labelledby="borderless-compound-expansion-table-nested-table-4--dropdown-kebab-nested-tr1-button"
                     hidden
                   >
                     <li>
@@ -15803,7 +15938,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                 <div class="pf-c-dropdown">
                   <button
                     class="pf-c-dropdown__toggle pf-m-plain"
-                    id="borderless-compound-expansion-table-nested-table-4-dropdown-kebab-nested-tr2-button"
+                    id="borderless-compound-expansion-table-nested-table-4--dropdown-kebab-nested-tr2-button"
                     aria-expanded="false"
                     type="button"
                     aria-label="Actions"
@@ -15812,7 +15947,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                   </button>
                   <ul
                     class="pf-c-dropdown__menu pf-m-align-right"
-                    aria-labelledby="borderless-compound-expansion-table-nested-table-4-dropdown-kebab-nested-tr2-button"
+                    aria-labelledby="borderless-compound-expansion-table-nested-table-4--dropdown-kebab-nested-tr2-button"
                     hidden
                   >
                     <li>
@@ -15861,7 +15996,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                 <div class="pf-c-dropdown">
                   <button
                     class="pf-c-dropdown__toggle pf-m-plain"
-                    id="borderless-compound-expansion-table-nested-table-4-dropdown-kebab-nested-tr3-button"
+                    id="borderless-compound-expansion-table-nested-table-4--dropdown-kebab-nested-tr3-button"
                     aria-expanded="false"
                     type="button"
                     aria-label="Actions"
@@ -15870,7 +16005,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                   </button>
                   <ul
                     class="pf-c-dropdown__menu pf-m-align-right"
-                    aria-labelledby="borderless-compound-expansion-table-nested-table-4-dropdown-kebab-nested-tr3-button"
+                    aria-labelledby="borderless-compound-expansion-table-nested-table-4--dropdown-kebab-nested-tr3-button"
                     hidden
                   >
                     <li>
@@ -15919,7 +16054,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                 <div class="pf-c-dropdown">
                   <button
                     class="pf-c-dropdown__toggle pf-m-plain"
-                    id="borderless-compound-expansion-table-nested-table-4-dropdown-kebab-nested-tr4-button"
+                    id="borderless-compound-expansion-table-nested-table-4--dropdown-kebab-nested-tr4-button"
                     aria-expanded="false"
                     type="button"
                     aria-label="Actions"
@@ -15928,7 +16063,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                   </button>
                   <ul
                     class="pf-c-dropdown__menu pf-m-align-right"
-                    aria-labelledby="borderless-compound-expansion-table-nested-table-4-dropdown-kebab-nested-tr4-button"
+                    aria-labelledby="borderless-compound-expansion-table-nested-table-4--dropdown-kebab-nested-tr4-button"
                     hidden
                   >
                     <li>
@@ -15977,7 +16112,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                 <div class="pf-c-dropdown">
                   <button
                     class="pf-c-dropdown__toggle pf-m-plain"
-                    id="borderless-compound-expansion-table-nested-table-4-dropdown-kebab-nested-tr5-button"
+                    id="borderless-compound-expansion-table-nested-table-4--dropdown-kebab-nested-tr5-button"
                     aria-expanded="false"
                     type="button"
                     aria-label="Actions"
@@ -15986,7 +16121,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                   </button>
                   <ul
                     class="pf-c-dropdown__menu pf-m-align-right"
-                    aria-labelledby="borderless-compound-expansion-table-nested-table-4-dropdown-kebab-nested-tr5-button"
+                    aria-labelledby="borderless-compound-expansion-table-nested-table-4--dropdown-kebab-nested-tr5-button"
                     hidden
                   >
                     <li>
@@ -16034,7 +16169,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <table
           class="pf-c-table pf-m-compact pf-m-no-border-rows"
           role="grid"
-          id="borderless-compound-expansion-table-nested-table-5"
+          id="borderless-compound-expansion-table-nested-table-5-"
           aria-label="Nested table"
         >
           <thead>
@@ -16074,7 +16209,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                 <div class="pf-c-dropdown">
                   <button
                     class="pf-c-dropdown__toggle pf-m-plain"
-                    id="borderless-compound-expansion-table-nested-table-5-dropdown-kebab-nested-tr1-button"
+                    id="borderless-compound-expansion-table-nested-table-5--dropdown-kebab-nested-tr1-button"
                     aria-expanded="false"
                     type="button"
                     aria-label="Actions"
@@ -16083,7 +16218,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                   </button>
                   <ul
                     class="pf-c-dropdown__menu pf-m-align-right"
-                    aria-labelledby="borderless-compound-expansion-table-nested-table-5-dropdown-kebab-nested-tr1-button"
+                    aria-labelledby="borderless-compound-expansion-table-nested-table-5--dropdown-kebab-nested-tr1-button"
                     hidden
                   >
                     <li>
@@ -16132,7 +16267,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                 <div class="pf-c-dropdown">
                   <button
                     class="pf-c-dropdown__toggle pf-m-plain"
-                    id="borderless-compound-expansion-table-nested-table-5-dropdown-kebab-nested-tr2-button"
+                    id="borderless-compound-expansion-table-nested-table-5--dropdown-kebab-nested-tr2-button"
                     aria-expanded="false"
                     type="button"
                     aria-label="Actions"
@@ -16141,7 +16276,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                   </button>
                   <ul
                     class="pf-c-dropdown__menu pf-m-align-right"
-                    aria-labelledby="borderless-compound-expansion-table-nested-table-5-dropdown-kebab-nested-tr2-button"
+                    aria-labelledby="borderless-compound-expansion-table-nested-table-5--dropdown-kebab-nested-tr2-button"
                     hidden
                   >
                     <li>
@@ -16190,7 +16325,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                 <div class="pf-c-dropdown">
                   <button
                     class="pf-c-dropdown__toggle pf-m-plain"
-                    id="borderless-compound-expansion-table-nested-table-5-dropdown-kebab-nested-tr3-button"
+                    id="borderless-compound-expansion-table-nested-table-5--dropdown-kebab-nested-tr3-button"
                     aria-expanded="false"
                     type="button"
                     aria-label="Actions"
@@ -16199,7 +16334,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                   </button>
                   <ul
                     class="pf-c-dropdown__menu pf-m-align-right"
-                    aria-labelledby="borderless-compound-expansion-table-nested-table-5-dropdown-kebab-nested-tr3-button"
+                    aria-labelledby="borderless-compound-expansion-table-nested-table-5--dropdown-kebab-nested-tr3-button"
                     hidden
                   >
                     <li>
@@ -16248,7 +16383,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                 <div class="pf-c-dropdown">
                   <button
                     class="pf-c-dropdown__toggle pf-m-plain"
-                    id="borderless-compound-expansion-table-nested-table-5-dropdown-kebab-nested-tr4-button"
+                    id="borderless-compound-expansion-table-nested-table-5--dropdown-kebab-nested-tr4-button"
                     aria-expanded="false"
                     type="button"
                     aria-label="Actions"
@@ -16257,7 +16392,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                   </button>
                   <ul
                     class="pf-c-dropdown__menu pf-m-align-right"
-                    aria-labelledby="borderless-compound-expansion-table-nested-table-5-dropdown-kebab-nested-tr4-button"
+                    aria-labelledby="borderless-compound-expansion-table-nested-table-5--dropdown-kebab-nested-tr4-button"
                     hidden
                   >
                     <li>
@@ -16306,7 +16441,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                 <div class="pf-c-dropdown">
                   <button
                     class="pf-c-dropdown__toggle pf-m-plain"
-                    id="borderless-compound-expansion-table-nested-table-5-dropdown-kebab-nested-tr5-button"
+                    id="borderless-compound-expansion-table-nested-table-5--dropdown-kebab-nested-tr5-button"
                     aria-expanded="false"
                     type="button"
                     aria-label="Actions"
@@ -16315,7 +16450,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                   </button>
                   <ul
                     class="pf-c-dropdown__menu pf-m-align-right"
-                    aria-labelledby="borderless-compound-expansion-table-nested-table-5-dropdown-kebab-nested-tr5-button"
+                    aria-labelledby="borderless-compound-expansion-table-nested-table-5--dropdown-kebab-nested-tr5-button"
                     hidden
                   >
                     <li>
@@ -16363,7 +16498,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <table
           class="pf-c-table pf-m-compact pf-m-no-border-rows"
           role="grid"
-          id="borderless-compound-expansion-table-nested-table-6"
+          id="borderless-compound-expansion-table-nested-table-6-"
           aria-label="Nested table"
         >
           <thead>
@@ -16403,7 +16538,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                 <div class="pf-c-dropdown">
                   <button
                     class="pf-c-dropdown__toggle pf-m-plain"
-                    id="borderless-compound-expansion-table-nested-table-6-dropdown-kebab-nested-tr1-button"
+                    id="borderless-compound-expansion-table-nested-table-6--dropdown-kebab-nested-tr1-button"
                     aria-expanded="false"
                     type="button"
                     aria-label="Actions"
@@ -16412,7 +16547,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                   </button>
                   <ul
                     class="pf-c-dropdown__menu pf-m-align-right"
-                    aria-labelledby="borderless-compound-expansion-table-nested-table-6-dropdown-kebab-nested-tr1-button"
+                    aria-labelledby="borderless-compound-expansion-table-nested-table-6--dropdown-kebab-nested-tr1-button"
                     hidden
                   >
                     <li>
@@ -16461,7 +16596,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                 <div class="pf-c-dropdown">
                   <button
                     class="pf-c-dropdown__toggle pf-m-plain"
-                    id="borderless-compound-expansion-table-nested-table-6-dropdown-kebab-nested-tr2-button"
+                    id="borderless-compound-expansion-table-nested-table-6--dropdown-kebab-nested-tr2-button"
                     aria-expanded="false"
                     type="button"
                     aria-label="Actions"
@@ -16470,7 +16605,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                   </button>
                   <ul
                     class="pf-c-dropdown__menu pf-m-align-right"
-                    aria-labelledby="borderless-compound-expansion-table-nested-table-6-dropdown-kebab-nested-tr2-button"
+                    aria-labelledby="borderless-compound-expansion-table-nested-table-6--dropdown-kebab-nested-tr2-button"
                     hidden
                   >
                     <li>
@@ -16519,7 +16654,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                 <div class="pf-c-dropdown">
                   <button
                     class="pf-c-dropdown__toggle pf-m-plain"
-                    id="borderless-compound-expansion-table-nested-table-6-dropdown-kebab-nested-tr3-button"
+                    id="borderless-compound-expansion-table-nested-table-6--dropdown-kebab-nested-tr3-button"
                     aria-expanded="false"
                     type="button"
                     aria-label="Actions"
@@ -16528,7 +16663,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                   </button>
                   <ul
                     class="pf-c-dropdown__menu pf-m-align-right"
-                    aria-labelledby="borderless-compound-expansion-table-nested-table-6-dropdown-kebab-nested-tr3-button"
+                    aria-labelledby="borderless-compound-expansion-table-nested-table-6--dropdown-kebab-nested-tr3-button"
                     hidden
                   >
                     <li>
@@ -16577,7 +16712,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                 <div class="pf-c-dropdown">
                   <button
                     class="pf-c-dropdown__toggle pf-m-plain"
-                    id="borderless-compound-expansion-table-nested-table-6-dropdown-kebab-nested-tr4-button"
+                    id="borderless-compound-expansion-table-nested-table-6--dropdown-kebab-nested-tr4-button"
                     aria-expanded="false"
                     type="button"
                     aria-label="Actions"
@@ -16586,7 +16721,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                   </button>
                   <ul
                     class="pf-c-dropdown__menu pf-m-align-right"
-                    aria-labelledby="borderless-compound-expansion-table-nested-table-6-dropdown-kebab-nested-tr4-button"
+                    aria-labelledby="borderless-compound-expansion-table-nested-table-6--dropdown-kebab-nested-tr4-button"
                     hidden
                   >
                     <li>
@@ -16635,7 +16770,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                 <div class="pf-c-dropdown">
                   <button
                     class="pf-c-dropdown__toggle pf-m-plain"
-                    id="borderless-compound-expansion-table-nested-table-6-dropdown-kebab-nested-tr5-button"
+                    id="borderless-compound-expansion-table-nested-table-6--dropdown-kebab-nested-tr5-button"
                     aria-expanded="false"
                     type="button"
                     aria-label="Actions"
@@ -16644,7 +16779,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                   </button>
                   <ul
                     class="pf-c-dropdown__menu pf-m-align-right"
-                    aria-labelledby="borderless-compound-expansion-table-nested-table-6-dropdown-kebab-nested-tr5-button"
+                    aria-labelledby="borderless-compound-expansion-table-nested-table-6--dropdown-kebab-nested-tr5-button"
                     hidden
                   >
                     <li>
@@ -16703,7 +16838,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         </button>
       </td>
       <td
-        class="pf-c-table__compound-expansion-togglepf-m-expanded pf-m-expanded"
+        class="pf-c-table__compound-expansion-toggle pf-m-expanded"
         role="cell"
         data-label="Branches"
       >
@@ -16786,7 +16921,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <table
           class="pf-c-table pf-m-compact pf-m-no-border-rows"
           role="grid"
-          id="borderless-compound-expansion-table-nested-table-7"
+          id="borderless-compound-expansion-table-nested-table-7-"
           aria-label="Nested table"
         >
           <thead>
@@ -16826,7 +16961,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                 <div class="pf-c-dropdown">
                   <button
                     class="pf-c-dropdown__toggle pf-m-plain"
-                    id="borderless-compound-expansion-table-nested-table-7-dropdown-kebab-nested-tr1-button"
+                    id="borderless-compound-expansion-table-nested-table-7--dropdown-kebab-nested-tr1-button"
                     aria-expanded="false"
                     type="button"
                     aria-label="Actions"
@@ -16835,7 +16970,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                   </button>
                   <ul
                     class="pf-c-dropdown__menu pf-m-align-right"
-                    aria-labelledby="borderless-compound-expansion-table-nested-table-7-dropdown-kebab-nested-tr1-button"
+                    aria-labelledby="borderless-compound-expansion-table-nested-table-7--dropdown-kebab-nested-tr1-button"
                     hidden
                   >
                     <li>
@@ -16884,7 +17019,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                 <div class="pf-c-dropdown">
                   <button
                     class="pf-c-dropdown__toggle pf-m-plain"
-                    id="borderless-compound-expansion-table-nested-table-7-dropdown-kebab-nested-tr2-button"
+                    id="borderless-compound-expansion-table-nested-table-7--dropdown-kebab-nested-tr2-button"
                     aria-expanded="false"
                     type="button"
                     aria-label="Actions"
@@ -16893,7 +17028,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                   </button>
                   <ul
                     class="pf-c-dropdown__menu pf-m-align-right"
-                    aria-labelledby="borderless-compound-expansion-table-nested-table-7-dropdown-kebab-nested-tr2-button"
+                    aria-labelledby="borderless-compound-expansion-table-nested-table-7--dropdown-kebab-nested-tr2-button"
                     hidden
                   >
                     <li>
@@ -16942,7 +17077,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                 <div class="pf-c-dropdown">
                   <button
                     class="pf-c-dropdown__toggle pf-m-plain"
-                    id="borderless-compound-expansion-table-nested-table-7-dropdown-kebab-nested-tr3-button"
+                    id="borderless-compound-expansion-table-nested-table-7--dropdown-kebab-nested-tr3-button"
                     aria-expanded="false"
                     type="button"
                     aria-label="Actions"
@@ -16951,7 +17086,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                   </button>
                   <ul
                     class="pf-c-dropdown__menu pf-m-align-right"
-                    aria-labelledby="borderless-compound-expansion-table-nested-table-7-dropdown-kebab-nested-tr3-button"
+                    aria-labelledby="borderless-compound-expansion-table-nested-table-7--dropdown-kebab-nested-tr3-button"
                     hidden
                   >
                     <li>
@@ -17000,7 +17135,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                 <div class="pf-c-dropdown">
                   <button
                     class="pf-c-dropdown__toggle pf-m-plain"
-                    id="borderless-compound-expansion-table-nested-table-7-dropdown-kebab-nested-tr4-button"
+                    id="borderless-compound-expansion-table-nested-table-7--dropdown-kebab-nested-tr4-button"
                     aria-expanded="false"
                     type="button"
                     aria-label="Actions"
@@ -17009,7 +17144,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                   </button>
                   <ul
                     class="pf-c-dropdown__menu pf-m-align-right"
-                    aria-labelledby="borderless-compound-expansion-table-nested-table-7-dropdown-kebab-nested-tr4-button"
+                    aria-labelledby="borderless-compound-expansion-table-nested-table-7--dropdown-kebab-nested-tr4-button"
                     hidden
                   >
                     <li>
@@ -17058,7 +17193,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                 <div class="pf-c-dropdown">
                   <button
                     class="pf-c-dropdown__toggle pf-m-plain"
-                    id="borderless-compound-expansion-table-nested-table-7-dropdown-kebab-nested-tr5-button"
+                    id="borderless-compound-expansion-table-nested-table-7--dropdown-kebab-nested-tr5-button"
                     aria-expanded="false"
                     type="button"
                     aria-label="Actions"
@@ -17067,7 +17202,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                   </button>
                   <ul
                     class="pf-c-dropdown__menu pf-m-align-right"
-                    aria-labelledby="borderless-compound-expansion-table-nested-table-7-dropdown-kebab-nested-tr5-button"
+                    aria-labelledby="borderless-compound-expansion-table-nested-table-7--dropdown-kebab-nested-tr5-button"
                     hidden
                   >
                     <li>
@@ -17115,7 +17250,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <table
           class="pf-c-table pf-m-compact pf-m-no-border-rows"
           role="grid"
-          id="borderless-compound-expansion-table-nested-table-8"
+          id="borderless-compound-expansion-table-nested-table-8-"
           aria-label="Nested table"
         >
           <thead>
@@ -17155,7 +17290,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                 <div class="pf-c-dropdown">
                   <button
                     class="pf-c-dropdown__toggle pf-m-plain"
-                    id="borderless-compound-expansion-table-nested-table-8-dropdown-kebab-nested-tr1-button"
+                    id="borderless-compound-expansion-table-nested-table-8--dropdown-kebab-nested-tr1-button"
                     aria-expanded="false"
                     type="button"
                     aria-label="Actions"
@@ -17164,7 +17299,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                   </button>
                   <ul
                     class="pf-c-dropdown__menu pf-m-align-right"
-                    aria-labelledby="borderless-compound-expansion-table-nested-table-8-dropdown-kebab-nested-tr1-button"
+                    aria-labelledby="borderless-compound-expansion-table-nested-table-8--dropdown-kebab-nested-tr1-button"
                     hidden
                   >
                     <li>
@@ -17213,7 +17348,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                 <div class="pf-c-dropdown">
                   <button
                     class="pf-c-dropdown__toggle pf-m-plain"
-                    id="borderless-compound-expansion-table-nested-table-8-dropdown-kebab-nested-tr2-button"
+                    id="borderless-compound-expansion-table-nested-table-8--dropdown-kebab-nested-tr2-button"
                     aria-expanded="false"
                     type="button"
                     aria-label="Actions"
@@ -17222,7 +17357,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                   </button>
                   <ul
                     class="pf-c-dropdown__menu pf-m-align-right"
-                    aria-labelledby="borderless-compound-expansion-table-nested-table-8-dropdown-kebab-nested-tr2-button"
+                    aria-labelledby="borderless-compound-expansion-table-nested-table-8--dropdown-kebab-nested-tr2-button"
                     hidden
                   >
                     <li>
@@ -17271,7 +17406,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                 <div class="pf-c-dropdown">
                   <button
                     class="pf-c-dropdown__toggle pf-m-plain"
-                    id="borderless-compound-expansion-table-nested-table-8-dropdown-kebab-nested-tr3-button"
+                    id="borderless-compound-expansion-table-nested-table-8--dropdown-kebab-nested-tr3-button"
                     aria-expanded="false"
                     type="button"
                     aria-label="Actions"
@@ -17280,7 +17415,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                   </button>
                   <ul
                     class="pf-c-dropdown__menu pf-m-align-right"
-                    aria-labelledby="borderless-compound-expansion-table-nested-table-8-dropdown-kebab-nested-tr3-button"
+                    aria-labelledby="borderless-compound-expansion-table-nested-table-8--dropdown-kebab-nested-tr3-button"
                     hidden
                   >
                     <li>
@@ -17329,7 +17464,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                 <div class="pf-c-dropdown">
                   <button
                     class="pf-c-dropdown__toggle pf-m-plain"
-                    id="borderless-compound-expansion-table-nested-table-8-dropdown-kebab-nested-tr4-button"
+                    id="borderless-compound-expansion-table-nested-table-8--dropdown-kebab-nested-tr4-button"
                     aria-expanded="false"
                     type="button"
                     aria-label="Actions"
@@ -17338,7 +17473,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                   </button>
                   <ul
                     class="pf-c-dropdown__menu pf-m-align-right"
-                    aria-labelledby="borderless-compound-expansion-table-nested-table-8-dropdown-kebab-nested-tr4-button"
+                    aria-labelledby="borderless-compound-expansion-table-nested-table-8--dropdown-kebab-nested-tr4-button"
                     hidden
                   >
                     <li>
@@ -17387,7 +17522,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                 <div class="pf-c-dropdown">
                   <button
                     class="pf-c-dropdown__toggle pf-m-plain"
-                    id="borderless-compound-expansion-table-nested-table-8-dropdown-kebab-nested-tr5-button"
+                    id="borderless-compound-expansion-table-nested-table-8--dropdown-kebab-nested-tr5-button"
                     aria-expanded="false"
                     type="button"
                     aria-label="Actions"
@@ -17396,7 +17531,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                   </button>
                   <ul
                     class="pf-c-dropdown__menu pf-m-align-right"
-                    aria-labelledby="borderless-compound-expansion-table-nested-table-8-dropdown-kebab-nested-tr5-button"
+                    aria-labelledby="borderless-compound-expansion-table-nested-table-8--dropdown-kebab-nested-tr5-button"
                     hidden
                   >
                     <li>
@@ -17444,7 +17579,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <table
           class="pf-c-table pf-m-compact pf-m-no-border-rows"
           role="grid"
-          id="borderless-compound-expansion-table-nested-table-9"
+          id="borderless-compound-expansion-table-nested-table-9-"
           aria-label="Nested table"
         >
           <thead>
@@ -17484,7 +17619,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                 <div class="pf-c-dropdown">
                   <button
                     class="pf-c-dropdown__toggle pf-m-plain"
-                    id="borderless-compound-expansion-table-nested-table-9-dropdown-kebab-nested-tr1-button"
+                    id="borderless-compound-expansion-table-nested-table-9--dropdown-kebab-nested-tr1-button"
                     aria-expanded="false"
                     type="button"
                     aria-label="Actions"
@@ -17493,7 +17628,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                   </button>
                   <ul
                     class="pf-c-dropdown__menu pf-m-align-right"
-                    aria-labelledby="borderless-compound-expansion-table-nested-table-9-dropdown-kebab-nested-tr1-button"
+                    aria-labelledby="borderless-compound-expansion-table-nested-table-9--dropdown-kebab-nested-tr1-button"
                     hidden
                   >
                     <li>
@@ -17542,7 +17677,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                 <div class="pf-c-dropdown">
                   <button
                     class="pf-c-dropdown__toggle pf-m-plain"
-                    id="borderless-compound-expansion-table-nested-table-9-dropdown-kebab-nested-tr2-button"
+                    id="borderless-compound-expansion-table-nested-table-9--dropdown-kebab-nested-tr2-button"
                     aria-expanded="false"
                     type="button"
                     aria-label="Actions"
@@ -17551,7 +17686,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                   </button>
                   <ul
                     class="pf-c-dropdown__menu pf-m-align-right"
-                    aria-labelledby="borderless-compound-expansion-table-nested-table-9-dropdown-kebab-nested-tr2-button"
+                    aria-labelledby="borderless-compound-expansion-table-nested-table-9--dropdown-kebab-nested-tr2-button"
                     hidden
                   >
                     <li>
@@ -17600,7 +17735,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                 <div class="pf-c-dropdown">
                   <button
                     class="pf-c-dropdown__toggle pf-m-plain"
-                    id="borderless-compound-expansion-table-nested-table-9-dropdown-kebab-nested-tr3-button"
+                    id="borderless-compound-expansion-table-nested-table-9--dropdown-kebab-nested-tr3-button"
                     aria-expanded="false"
                     type="button"
                     aria-label="Actions"
@@ -17609,7 +17744,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                   </button>
                   <ul
                     class="pf-c-dropdown__menu pf-m-align-right"
-                    aria-labelledby="borderless-compound-expansion-table-nested-table-9-dropdown-kebab-nested-tr3-button"
+                    aria-labelledby="borderless-compound-expansion-table-nested-table-9--dropdown-kebab-nested-tr3-button"
                     hidden
                   >
                     <li>
@@ -17658,7 +17793,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                 <div class="pf-c-dropdown">
                   <button
                     class="pf-c-dropdown__toggle pf-m-plain"
-                    id="borderless-compound-expansion-table-nested-table-9-dropdown-kebab-nested-tr4-button"
+                    id="borderless-compound-expansion-table-nested-table-9--dropdown-kebab-nested-tr4-button"
                     aria-expanded="false"
                     type="button"
                     aria-label="Actions"
@@ -17667,7 +17802,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                   </button>
                   <ul
                     class="pf-c-dropdown__menu pf-m-align-right"
-                    aria-labelledby="borderless-compound-expansion-table-nested-table-9-dropdown-kebab-nested-tr4-button"
+                    aria-labelledby="borderless-compound-expansion-table-nested-table-9--dropdown-kebab-nested-tr4-button"
                     hidden
                   >
                     <li>
@@ -17716,7 +17851,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                 <div class="pf-c-dropdown">
                   <button
                     class="pf-c-dropdown__toggle pf-m-plain"
-                    id="borderless-compound-expansion-table-nested-table-9-dropdown-kebab-nested-tr5-button"
+                    id="borderless-compound-expansion-table-nested-table-9--dropdown-kebab-nested-tr5-button"
                     aria-expanded="false"
                     type="button"
                     aria-label="Actions"
@@ -17725,7 +17860,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                   </button>
                   <ul
                     class="pf-c-dropdown__menu pf-m-align-right"
-                    aria-labelledby="borderless-compound-expansion-table-nested-table-9-dropdown-kebab-nested-tr5-button"
+                    aria-labelledby="borderless-compound-expansion-table-nested-table-9--dropdown-kebab-nested-tr5-button"
                     hidden
                   >
                     <li>
@@ -17867,7 +18002,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <table
           class="pf-c-table pf-m-compact pf-m-no-border-rows"
           role="grid"
-          id="borderless-compound-expansion-table-nested-table-10"
+          id="borderless-compound-expansion-table-nested-table-10-"
           aria-label="Nested table"
         >
           <thead>
@@ -17907,7 +18042,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                 <div class="pf-c-dropdown">
                   <button
                     class="pf-c-dropdown__toggle pf-m-plain"
-                    id="borderless-compound-expansion-table-nested-table-10-dropdown-kebab-nested-tr1-button"
+                    id="borderless-compound-expansion-table-nested-table-10--dropdown-kebab-nested-tr1-button"
                     aria-expanded="false"
                     type="button"
                     aria-label="Actions"
@@ -17916,7 +18051,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                   </button>
                   <ul
                     class="pf-c-dropdown__menu pf-m-align-right"
-                    aria-labelledby="borderless-compound-expansion-table-nested-table-10-dropdown-kebab-nested-tr1-button"
+                    aria-labelledby="borderless-compound-expansion-table-nested-table-10--dropdown-kebab-nested-tr1-button"
                     hidden
                   >
                     <li>
@@ -17965,7 +18100,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                 <div class="pf-c-dropdown">
                   <button
                     class="pf-c-dropdown__toggle pf-m-plain"
-                    id="borderless-compound-expansion-table-nested-table-10-dropdown-kebab-nested-tr2-button"
+                    id="borderless-compound-expansion-table-nested-table-10--dropdown-kebab-nested-tr2-button"
                     aria-expanded="false"
                     type="button"
                     aria-label="Actions"
@@ -17974,7 +18109,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                   </button>
                   <ul
                     class="pf-c-dropdown__menu pf-m-align-right"
-                    aria-labelledby="borderless-compound-expansion-table-nested-table-10-dropdown-kebab-nested-tr2-button"
+                    aria-labelledby="borderless-compound-expansion-table-nested-table-10--dropdown-kebab-nested-tr2-button"
                     hidden
                   >
                     <li>
@@ -18023,7 +18158,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                 <div class="pf-c-dropdown">
                   <button
                     class="pf-c-dropdown__toggle pf-m-plain"
-                    id="borderless-compound-expansion-table-nested-table-10-dropdown-kebab-nested-tr3-button"
+                    id="borderless-compound-expansion-table-nested-table-10--dropdown-kebab-nested-tr3-button"
                     aria-expanded="false"
                     type="button"
                     aria-label="Actions"
@@ -18032,7 +18167,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                   </button>
                   <ul
                     class="pf-c-dropdown__menu pf-m-align-right"
-                    aria-labelledby="borderless-compound-expansion-table-nested-table-10-dropdown-kebab-nested-tr3-button"
+                    aria-labelledby="borderless-compound-expansion-table-nested-table-10--dropdown-kebab-nested-tr3-button"
                     hidden
                   >
                     <li>
@@ -18081,7 +18216,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                 <div class="pf-c-dropdown">
                   <button
                     class="pf-c-dropdown__toggle pf-m-plain"
-                    id="borderless-compound-expansion-table-nested-table-10-dropdown-kebab-nested-tr4-button"
+                    id="borderless-compound-expansion-table-nested-table-10--dropdown-kebab-nested-tr4-button"
                     aria-expanded="false"
                     type="button"
                     aria-label="Actions"
@@ -18090,7 +18225,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                   </button>
                   <ul
                     class="pf-c-dropdown__menu pf-m-align-right"
-                    aria-labelledby="borderless-compound-expansion-table-nested-table-10-dropdown-kebab-nested-tr4-button"
+                    aria-labelledby="borderless-compound-expansion-table-nested-table-10--dropdown-kebab-nested-tr4-button"
                     hidden
                   >
                     <li>
@@ -18139,7 +18274,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                 <div class="pf-c-dropdown">
                   <button
                     class="pf-c-dropdown__toggle pf-m-plain"
-                    id="borderless-compound-expansion-table-nested-table-10-dropdown-kebab-nested-tr5-button"
+                    id="borderless-compound-expansion-table-nested-table-10--dropdown-kebab-nested-tr5-button"
                     aria-expanded="false"
                     type="button"
                     aria-label="Actions"
@@ -18148,7 +18283,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                   </button>
                   <ul
                     class="pf-c-dropdown__menu pf-m-align-right"
-                    aria-labelledby="borderless-compound-expansion-table-nested-table-10-dropdown-kebab-nested-tr5-button"
+                    aria-labelledby="borderless-compound-expansion-table-nested-table-10--dropdown-kebab-nested-tr5-button"
                     hidden
                   >
                     <li>
@@ -18196,7 +18331,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <table
           class="pf-c-table pf-m-compact pf-m-no-border-rows"
           role="grid"
-          id="borderless-compound-expansion-table-nested-table-11"
+          id="borderless-compound-expansion-table-nested-table-11-"
           aria-label="Nested table"
         >
           <thead>
@@ -18236,7 +18371,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                 <div class="pf-c-dropdown">
                   <button
                     class="pf-c-dropdown__toggle pf-m-plain"
-                    id="borderless-compound-expansion-table-nested-table-11-dropdown-kebab-nested-tr1-button"
+                    id="borderless-compound-expansion-table-nested-table-11--dropdown-kebab-nested-tr1-button"
                     aria-expanded="false"
                     type="button"
                     aria-label="Actions"
@@ -18245,7 +18380,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                   </button>
                   <ul
                     class="pf-c-dropdown__menu pf-m-align-right"
-                    aria-labelledby="borderless-compound-expansion-table-nested-table-11-dropdown-kebab-nested-tr1-button"
+                    aria-labelledby="borderless-compound-expansion-table-nested-table-11--dropdown-kebab-nested-tr1-button"
                     hidden
                   >
                     <li>
@@ -18294,7 +18429,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                 <div class="pf-c-dropdown">
                   <button
                     class="pf-c-dropdown__toggle pf-m-plain"
-                    id="borderless-compound-expansion-table-nested-table-11-dropdown-kebab-nested-tr2-button"
+                    id="borderless-compound-expansion-table-nested-table-11--dropdown-kebab-nested-tr2-button"
                     aria-expanded="false"
                     type="button"
                     aria-label="Actions"
@@ -18303,7 +18438,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                   </button>
                   <ul
                     class="pf-c-dropdown__menu pf-m-align-right"
-                    aria-labelledby="borderless-compound-expansion-table-nested-table-11-dropdown-kebab-nested-tr2-button"
+                    aria-labelledby="borderless-compound-expansion-table-nested-table-11--dropdown-kebab-nested-tr2-button"
                     hidden
                   >
                     <li>
@@ -18352,7 +18487,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                 <div class="pf-c-dropdown">
                   <button
                     class="pf-c-dropdown__toggle pf-m-plain"
-                    id="borderless-compound-expansion-table-nested-table-11-dropdown-kebab-nested-tr3-button"
+                    id="borderless-compound-expansion-table-nested-table-11--dropdown-kebab-nested-tr3-button"
                     aria-expanded="false"
                     type="button"
                     aria-label="Actions"
@@ -18361,7 +18496,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                   </button>
                   <ul
                     class="pf-c-dropdown__menu pf-m-align-right"
-                    aria-labelledby="borderless-compound-expansion-table-nested-table-11-dropdown-kebab-nested-tr3-button"
+                    aria-labelledby="borderless-compound-expansion-table-nested-table-11--dropdown-kebab-nested-tr3-button"
                     hidden
                   >
                     <li>
@@ -18410,7 +18545,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                 <div class="pf-c-dropdown">
                   <button
                     class="pf-c-dropdown__toggle pf-m-plain"
-                    id="borderless-compound-expansion-table-nested-table-11-dropdown-kebab-nested-tr4-button"
+                    id="borderless-compound-expansion-table-nested-table-11--dropdown-kebab-nested-tr4-button"
                     aria-expanded="false"
                     type="button"
                     aria-label="Actions"
@@ -18419,7 +18554,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                   </button>
                   <ul
                     class="pf-c-dropdown__menu pf-m-align-right"
-                    aria-labelledby="borderless-compound-expansion-table-nested-table-11-dropdown-kebab-nested-tr4-button"
+                    aria-labelledby="borderless-compound-expansion-table-nested-table-11--dropdown-kebab-nested-tr4-button"
                     hidden
                   >
                     <li>
@@ -18468,7 +18603,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                 <div class="pf-c-dropdown">
                   <button
                     class="pf-c-dropdown__toggle pf-m-plain"
-                    id="borderless-compound-expansion-table-nested-table-11-dropdown-kebab-nested-tr5-button"
+                    id="borderless-compound-expansion-table-nested-table-11--dropdown-kebab-nested-tr5-button"
                     aria-expanded="false"
                     type="button"
                     aria-label="Actions"
@@ -18477,7 +18612,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                   </button>
                   <ul
                     class="pf-c-dropdown__menu pf-m-align-right"
-                    aria-labelledby="borderless-compound-expansion-table-nested-table-11-dropdown-kebab-nested-tr5-button"
+                    aria-labelledby="borderless-compound-expansion-table-nested-table-11--dropdown-kebab-nested-tr5-button"
                     hidden
                   >
                     <li>
@@ -18525,7 +18660,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
         <table
           class="pf-c-table pf-m-compact pf-m-no-border-rows"
           role="grid"
-          id="borderless-compound-expansion-table-nested-table-12"
+          id="borderless-compound-expansion-table-nested-table-12-"
           aria-label="Nested table"
         >
           <thead>
@@ -18565,7 +18700,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                 <div class="pf-c-dropdown">
                   <button
                     class="pf-c-dropdown__toggle pf-m-plain"
-                    id="borderless-compound-expansion-table-nested-table-12-dropdown-kebab-nested-tr1-button"
+                    id="borderless-compound-expansion-table-nested-table-12--dropdown-kebab-nested-tr1-button"
                     aria-expanded="false"
                     type="button"
                     aria-label="Actions"
@@ -18574,7 +18709,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                   </button>
                   <ul
                     class="pf-c-dropdown__menu pf-m-align-right"
-                    aria-labelledby="borderless-compound-expansion-table-nested-table-12-dropdown-kebab-nested-tr1-button"
+                    aria-labelledby="borderless-compound-expansion-table-nested-table-12--dropdown-kebab-nested-tr1-button"
                     hidden
                   >
                     <li>
@@ -18623,7 +18758,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                 <div class="pf-c-dropdown">
                   <button
                     class="pf-c-dropdown__toggle pf-m-plain"
-                    id="borderless-compound-expansion-table-nested-table-12-dropdown-kebab-nested-tr2-button"
+                    id="borderless-compound-expansion-table-nested-table-12--dropdown-kebab-nested-tr2-button"
                     aria-expanded="false"
                     type="button"
                     aria-label="Actions"
@@ -18632,7 +18767,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                   </button>
                   <ul
                     class="pf-c-dropdown__menu pf-m-align-right"
-                    aria-labelledby="borderless-compound-expansion-table-nested-table-12-dropdown-kebab-nested-tr2-button"
+                    aria-labelledby="borderless-compound-expansion-table-nested-table-12--dropdown-kebab-nested-tr2-button"
                     hidden
                   >
                     <li>
@@ -18681,7 +18816,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                 <div class="pf-c-dropdown">
                   <button
                     class="pf-c-dropdown__toggle pf-m-plain"
-                    id="borderless-compound-expansion-table-nested-table-12-dropdown-kebab-nested-tr3-button"
+                    id="borderless-compound-expansion-table-nested-table-12--dropdown-kebab-nested-tr3-button"
                     aria-expanded="false"
                     type="button"
                     aria-label="Actions"
@@ -18690,7 +18825,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                   </button>
                   <ul
                     class="pf-c-dropdown__menu pf-m-align-right"
-                    aria-labelledby="borderless-compound-expansion-table-nested-table-12-dropdown-kebab-nested-tr3-button"
+                    aria-labelledby="borderless-compound-expansion-table-nested-table-12--dropdown-kebab-nested-tr3-button"
                     hidden
                   >
                     <li>
@@ -18739,7 +18874,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                 <div class="pf-c-dropdown">
                   <button
                     class="pf-c-dropdown__toggle pf-m-plain"
-                    id="borderless-compound-expansion-table-nested-table-12-dropdown-kebab-nested-tr4-button"
+                    id="borderless-compound-expansion-table-nested-table-12--dropdown-kebab-nested-tr4-button"
                     aria-expanded="false"
                     type="button"
                     aria-label="Actions"
@@ -18748,7 +18883,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                   </button>
                   <ul
                     class="pf-c-dropdown__menu pf-m-align-right"
-                    aria-labelledby="borderless-compound-expansion-table-nested-table-12-dropdown-kebab-nested-tr4-button"
+                    aria-labelledby="borderless-compound-expansion-table-nested-table-12--dropdown-kebab-nested-tr4-button"
                     hidden
                   >
                     <li>
@@ -18797,7 +18932,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                 <div class="pf-c-dropdown">
                   <button
                     class="pf-c-dropdown__toggle pf-m-plain"
-                    id="borderless-compound-expansion-table-nested-table-12-dropdown-kebab-nested-tr5-button"
+                    id="borderless-compound-expansion-table-nested-table-12--dropdown-kebab-nested-tr5-button"
                     aria-expanded="false"
                     type="button"
                     aria-label="Actions"
@@ -18806,7 +18941,7 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
                   </button>
                   <ul
                     class="pf-c-dropdown__menu pf-m-align-right"
-                    aria-labelledby="borderless-compound-expansion-table-nested-table-12-dropdown-kebab-nested-tr5-button"
+                    aria-labelledby="borderless-compound-expansion-table-nested-table-12--dropdown-kebab-nested-tr5-button"
                     hidden
                   >
                     <li>
@@ -18874,11 +19009,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
   <thead>
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="table-width-modifiers-check-all"
-          aria-label="Check all rows"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="table-width-modifiers-checkrowthead"
+            aria-label="Select all rows"
+          />
+        </label>
       </td>
       <th
         class="pf-m-width-30 pf-c-table__sort pf-m-selected"
@@ -18933,13 +19070,15 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
   <tbody role="rowgroup">
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="table-width-modifiers-checkrow1"
-          aria-labelledby="table-width-modifiers-node1"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="table-width-modifiers-checkrow1"
+            aria-labelledby="table-width-modifiers-node1"
+          />
+        </label>
       </td>
-      <th role="columnheader" data-label="Repository name">
+      <th role="columnheader" data-label="Data label name">
         <div id="table-width-modifiers-node1">Node 1</div>
       </th>
       <td role="cell" data-label="Branches">10</td>
@@ -18950,17 +19089,17 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="table-width-modifiers-checkrow2"
-          aria-labelledby="table-width-modifiers-node2"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="table-width-modifiers-checkrow2"
+            aria-labelledby="table-width-modifiers-node2"
+          />
+        </label>
       </td>
-      <th role="columnheader" data-label="Repository name">
-        <div>
-          <div id="table-width-modifiers-node2">Node 2</div>
-          <a href="#">siemur/test-space</a>
-        </div>
+      <th role="columnheader" data-label="Data label name">
+        <div id="table-width-modifiers-node2">Node 2</div>
+        <a href="#">siemur/test-space</a>
       </th>
       <td role="cell" data-label="Branches">10</td>
       <td role="cell" data-label="Pull requests">25</td>
@@ -18970,17 +19109,17 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="table-width-modifiers-checkrow3"
-          aria-labelledby="table-width-modifiers-node3"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="table-width-modifiers-checkrow3"
+            aria-labelledby="table-width-modifiers-node3"
+          />
+        </label>
       </td>
-      <th role="columnheader" data-label="Repository name">
-        <div>
-          <div id="table-width-modifiers-node3">Node 3</div>
-          <a href="#">siemur/test-space</a>
-        </div>
+      <th role="columnheader" data-label="Data label name">
+        <div id="table-width-modifiers-node3">Node 3</div>
+        <a href="#">siemur/test-space</a>
       </th>
       <td role="cell" data-label="Branches">10</td>
       <td role="cell" data-label="Pull requests">25</td>
@@ -18990,17 +19129,17 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="table-width-modifiers-checkrow4"
-          aria-labelledby="table-width-modifiers-node4"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="table-width-modifiers-checkrow4"
+            aria-labelledby="table-width-modifiers-node4"
+          />
+        </label>
       </td>
-      <th role="columnheader" data-label="Repository name">
-        <div>
-          <div id="table-width-modifiers-node4">Node 4</div>
-          <a href="#">siemur/test-space</a>
-        </div>
+      <th role="columnheader" data-label="Data label name">
+        <div id="table-width-modifiers-node4">Node 4</div>
+        <a href="#">siemur/test-space</a>
       </th>
       <td role="cell" data-label="Branches">10</td>
       <td role="cell" data-label="Pull requests">25</td>
@@ -19014,6 +19153,8 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 
 ### Width modifiers usage
 
+Width modifiers control the width of the columns. To control the responsive behavior of the table at different screen widths, see [responsive table behavior](#responsive-table-behavior).
+
 | Class                                                                 | Applied to     | Outcome                                                                                     |
 | --------------------------------------------------------------------- | -------------- | ------------------------------------------------------------------------------------------- |
 | `.pf-m-width-[10, 15, 20, 25, 30, 35, 40, 45, 50, 60, 70, 80, or 90]` | `<th>`, `<td>` | Percentage based modifier for `th` and `td` widths. **Recommended for sortable title cell** |
@@ -19145,19 +19286,11 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
 | `.pf-m-hidden{-on-[breakpoint]}`  | `.pf-c-table tr > *` | Hides a table cell at a given breakpoint, or hides it at all breakpoints with `.pf-m-hidden`. **Note: Needs to apply to all cells in the column you want to hide.** |
 | `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-table tr > *` | Shows a table cell at a given breakpoint.                                                                                                                           |
 
-## Controlling text modifiers
+## Text control modifiers
 
 To better control table cell behavior, PatternFly provides a series of modifiers to help contextually control layout. By default, `thead` cells are set to truncate, whereas `tbody` cells are set to wrap. Both `th` and `td` cells use a set of shared css properties mapped to customizable css variable values. Because only the shared css variables are changed by the modifier selector and not the properties, the modifier can be applied to any parent element up until `.pf-c-table` itself [`thead`, `tbody`, `tr`, `th`, `td`, `.pf-c-table__text`].
 
-| Class               | Applied to                                              | Outcome                                                                                                                                                                                                                                                                                                                                                                                                  |
-| ------------------- | ------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `.pf-m-wrap`        | `thead`, `tbody`, `tr`, `th`, `td`, `.pf-c-table__text` | Sets table cell content to wrap. If applied to `thead`, `tbody` or `tr`, then all child cells will be affected. This is the default behavior for <code>tbody</code> cells.                                                                                                                                                                                                                               |
-| `.pf-m-truncate`    | `thead`, `tbody`, `tr`, `th`, `td`, `.pf-c-table__text` | Sets text to truncate based on a minimum width and available space adjacent table cells.  If applied to `thead`, `tbody` or `tr`, then all child cells will be affected. This is the default behavior for <code>thead</code> cells.                                                                                                                                                                      |
-| `.pf-m-nowrap`      | `thead`, `tbody`, `tr`, `th`, `td`, `.pf-c-table__text` | Unsets min/max width and sets whitespace to nowrap.  If applied to `thead`, `tbody` or `tr`, then all child cells will be affected. This is specifically beneficial for cell's whose <code>thead th</code> cells are blank. The following example highlights link text that should display inline. Be careful with this modifier, it will prioritize its cell's content above all other cell's contents. |
-| `.pf-m-fit-content` | `thead`, `tbody`, `tr`, `th`, `td`, `.pf-c-table__text` | Fit column width to cell content.  If applied to `thead`, `tbody` or `tr`, then all child cells will be affected.                                                                                                                                                                                                                                                                                        |
-| `.pf-m-break-word`  | `thead`, `tbody`, `tr`, `th`, `td`, `.pf-c-table__text` | Breaks long strings wherever necessary as defined by the table layout. If applied to `thead`, `tbody` or `tr`, then all child cells will be affected.                                                                                                                                                                                                                                                    |
-
-### Controlling text example
+### Text control example
 
 ```html
 <table
@@ -19220,7 +19353,7 @@ To better control table cell behavior, PatternFly provides a series of modifiers
 
 By default, truncation and wrapping settings do not affect the grid layout, but text will fallback gracefully by passively wrapping long strings. Truncation and wrapping settings will persist with the addition of a `.pf-c-table__text` wrapper on table cell content. In addition to `.pf-c-table__text`, all PatternFly layouts can be used in table cells and contain table text elements.
 
-### Controlling text using the table text element example
+### Text control using the table text element example
 
 ```html
 <table
@@ -19432,24 +19565,9 @@ By default, truncation and wrapping settings do not affect the grid layout, but
 
 ```
 
-### Controlling text modifiers usage
-
-| Class                | Applied to                                              | Outcome                                       |
-| -------------------- | ------------------------------------------------------- | --------------------------------------------- |
-| `.pf-c-table__text`  | `th > *`, `td > *`                                      | Initiates a table text element.               |
-| `.pf-m-truncate`     | `thead`, `tbody`, `tr`, `th`, `td`, `.pf-c-table__text` | Modifies text to truncate.                    |
-| `.pf-m-nowrap`       | `thead`, `tbody`, `tr`, `th`, `td`, `.pf-c-table__text` | Modifies text to not wrap.                    |
-| `.pf-m-wrap`         | `thead`, `tbody`, `tr`, `th`, `td`, `.pf-c-table__text` | Modifies text to wrap.                        |
-| `.pf-m-fit-content`  | `thead`, `tr`, `th`, `.pf-c-table__text`                | Modifies `th` to fit its contents.            |
-| `.pf-m-break-word`   | `thead`, `tbody`, `tr`, `th`, `td`, `.pf-c-table__text` | Modifies text strings to break.               |
-| `.pf-m-border-right` | `<th>`, `<td>`                                          | Modifies a table cell to show a right border. |
-| `.pf-m-border-left`  | `<th>`, `<td>`                                          | Modifies a table cell to show a left border.  |
-
-## Table header modifiers
+### Table with long strings in the content
 
-### th truncation
-
-Long strings in table cells will push content. Add a width modifier to `thead th` to limit string length or add `.pf-m-truncate` to `tbody td`.
+Long strings in table cells will push that column wider and possible take from other columns. This can cause content or headers to be truncated.
 
 ```html
 <div class="pf-c-tooltip pf-m-top" role="tooltip">
@@ -19508,6 +19626,8 @@ Long strings in table cells will push content. Add a width modifier to `thead th
 
 ### Width constrained
 
+Add a [width modifier](#width-modifiers) to `thead th` to limit string length or add `.pf-m-truncate` to `tbody td`.
+
 ```html
 <table
   class="pf-c-table pf-m-grid-md"
@@ -19560,6 +19680,19 @@ Long strings in table cells will push content. Add a width modifier to `thead th
 
 ```
 
+### Text control modifiers usage
+
+| Class               | Applied to                                              | Outcome                                                                                                                                                                                                                                                                                                                                                                                                  |
+| ------------------- | ------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `.pf-c-table__text` | `th > *`, `td > *`                                      | Initiates a table text element.                                                                                                                                                                                                                                                                                                                                                                          |
+| `.pf-m-wrap`        | `thead`, `tbody`, `tr`, `th`, `td`, `.pf-c-table__text` | Sets table cell content to wrap. If applied to `thead`, `tbody` or `tr`, then all child cells will be affected. This is the default behavior for <code>tbody</code> cells.                                                                                                                                                                                                                               |
+| `.pf-m-truncate`    | `thead`, `tbody`, `tr`, `th`, `td`, `.pf-c-table__text` | Sets text to truncate based on a minimum width and available space adjacent table cells.  If applied to `thead`, `tbody` or `tr`, then all child cells will be affected. This is the default behavior for <code>thead</code> cells.                                                                                                                                                                      |
+| `.pf-m-nowrap`      | `thead`, `tbody`, `tr`, `th`, `td`, `.pf-c-table__text` | Unsets min/max width and sets whitespace to nowrap.  If applied to `thead`, `tbody` or `tr`, then all child cells will be affected. This is specifically beneficial for cell's whose <code>thead th</code> cells are blank. The following example highlights link text that should display inline. Be careful with this modifier, it will prioritize its cell's content above all other cell's contents. |
+| `.pf-m-fit-content` | `thead`, `tbody`, `tr`, `th`, `td`, `.pf-c-table__text` | Fit column width to cell content.  If applied to `thead`, `tbody` or `tr`, then all child cells will be affected.                                                                                                                                                                                                                                                                                        |
+| `.pf-m-break-word`  | `thead`, `tbody`, `tr`, `th`, `td`, `.pf-c-table__text` | Breaks long strings to break wherever necessary as defined by the table layout. If applied to `thead`, `tbody` or `tr`, then all child cells will be affected.                                                                                                                                                                                                                                           |
+
+## Sticky table modifiers
+
 ### Sticky header
 
 ```html
@@ -19624,7 +19757,7 @@ Long strings in table cells will push content. Add a width modifier to `thead th
     class="pf-c-table"
     role="grid"
     aria-label="This is a scrollable table"
-    id="-table"
+    id="sticky-column-example"
   >
     <thead>
       <tr role="row">
@@ -20126,7 +20259,7 @@ Long strings in table cells will push content. Add a width modifier to `thead th
     class="pf-c-table"
     role="grid"
     aria-label="This is a scrollable table"
-    id="-table"
+    id="sticky-multi-column-example"
   >
     <thead>
       <tr role="row">
@@ -20684,7 +20817,7 @@ Long strings in table cells will push content. Add a width modifier to `thead th
       class="pf-c-table pf-m-sticky-header"
       role="grid"
       aria-label="This is a scrollable table"
-      id="-table"
+      id="sticky-header-columns-example"
     >
       <thead>
         <tr role="row">
@@ -21234,15 +21367,18 @@ Long strings in table cells will push content. Add a width modifier to `thead th
 
 ```
 
-### Sticky column usage
+### Sticky table usage
 
 For sticky columns to function correctly, the parent table's width must be controlled with `.pf-c-scroll-inner-wrapper`. For sticky columns and sticky headers to function correctly, the parent table needs an inner and outer wrapper (`.pf-c-scroll-outer-wrapper` and `.pf-c-scroll-inner-wrapper`)
 
-| Class                        | Applied to     | Outcome                                                   |
-| ---------------------------- | -------------- | --------------------------------------------------------- |
-| `.pf-c-scroll-outer-wrapper` | `<div>`        | Initiates a table container sticky columns outer wrapper. |
-| `.pf-c-scroll-inner-wrapper` | `<div>`        | Initiates a table container sticky columns inner wrapper. |
-| `.pf-c-table__sticky-column` | `<th>`, `<td>` | Initiates a sticky table cell.                            |
+| Class                        | Applied to     | Outcome                                                                      |
+| ---------------------------- | -------------- | ---------------------------------------------------------------------------- |
+| `.pf-m-sticky-header`        | `.pf-c-table`  | Makes the table cells in `<thead>` sticky to the top of the table on scroll. |
+| `.pf-c-scroll-outer-wrapper` | `<div>`        | Initiates a table container sticky columns outer wrapper.                    |
+| `.pf-c-scroll-inner-wrapper` | `<div>`        | Initiates a table container sticky columns inner wrapper.                    |
+| `.pf-c-table__sticky-column` | `<th>`, `<td>` | Initiates a sticky table cell.                                               |
+
+## Nested column headers
 
 ### Nested column headers and expandable rows
 
@@ -21264,11 +21400,13 @@ For sticky columns to function correctly, the parent table's width must be contr
       <tr role="row">
         <td rowspan="2"></td>
         <td class="pf-c-table__check" role="cell" rowspan="2">
-          <input
-            type="checkbox"
-            name="nested-columns-expandable-example-check-all"
-            aria-label="Select all rows"
-          />
+          <label>
+            <input
+              type="checkbox"
+              name="nested-columns-expandable-example-checkrow"
+              aria-label="Select all rows"
+            />
+          </label>
         </td>
         <th
           class="pf-m-border-right pf-c-table__sort"
@@ -21333,11 +21471,13 @@ For sticky columns to function correctly, the parent table's width must be contr
         </td>
 
         <td class="pf-c-table__check" role="cell">
-          <input
-            type="checkbox"
-            name="nested-columns-expandable-example-checkrow1"
-            aria-labelledby="nested-columns-expandable-example-node1"
-          />
+          <label>
+            <input
+              type="checkbox"
+              name="nested-columns-expandable-example-checkrow1"
+              aria-labelledby="nested-columns-expandable-example-node1"
+            />
+          </label>
         </td>
         <th
           class
@@ -21433,11 +21573,13 @@ For sticky columns to function correctly, the parent table's width must be contr
         </td>
 
         <td class="pf-c-table__check" role="cell">
-          <input
-            type="checkbox"
-            name="nested-columns-expandable-example-checkrow2"
-            aria-labelledby="nested-columns-expandable-example-node2"
-          />
+          <label>
+            <input
+              type="checkbox"
+              name="nested-columns-expandable-example-checkrow2"
+              aria-labelledby="nested-columns-expandable-example-node2"
+            />
+          </label>
         </td>
         <th
           class
@@ -21533,11 +21675,13 @@ For sticky columns to function correctly, the parent table's width must be contr
         </td>
 
         <td class="pf-c-table__check" role="cell">
-          <input
-            type="checkbox"
-            name="nested-columns-expandable-example-checkrow3"
-            aria-labelledby="nested-columns-expandable-example-node3"
-          />
+          <label>
+            <input
+              type="checkbox"
+              name="nested-columns-expandable-example-checkrow3"
+              aria-labelledby="nested-columns-expandable-example-node3"
+            />
+          </label>
         </td>
         <th
           class
@@ -21854,6 +21998,14 @@ For sticky columns to function correctly, the parent table's width must be contr
 
 ```
 
+### Nested column header modifier usage
+
+| Class                        | Applied to     | Outcome                                                |
+| ---------------------------- | -------------- | ------------------------------------------------------ |
+| `.pf-m-nested-column-header` | `<thead>`      | Modifies a table header to handle nested header cells. |
+| `.pf-m-border-right`         | `<th>`, `<td>` | Modifies a table cell to show a right border.          |
+| `.pf-m-border-left`          | `<th>`, `<td>` | Modifies a table cell to show a left border.           |
+
 ## Favorites
 
 ### Favorites examples
@@ -21868,11 +22020,13 @@ For sticky columns to function correctly, the parent table's width must be contr
   <thead>
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="table-favorites-check-all"
-          aria-label="Select all rows"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="table-favorites-checkrowthead"
+            aria-label="Select all rows"
+          />
+        </label>
       </td>
       <td></td>
       <th role="columnheader" scope="col">Repositories</th>
@@ -21887,11 +22041,13 @@ For sticky columns to function correctly, the parent table's width must be contr
   <tbody role="rowgroup">
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="table-favorites-checkrow1"
-          aria-labelledby="table-favorites-node1"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="table-favorites-checkrow1"
+            aria-labelledby="table-favorites-node1"
+          />
+        </label>
       </td>
       <td class="pf-c-table__favorite pf-m-favorited" role="cell">
         <button
@@ -21917,7 +22073,7 @@ For sticky columns to function correctly, the parent table's width must be contr
         <div class="pf-c-dropdown">
           <button
             class="pf-c-dropdown__toggle pf-m-plain"
-            id="table-favorites-dropdown-kebab-11-button"
+            id="table-favorites-dropdown-kebab-1-button"
             aria-expanded="false"
             type="button"
             aria-label="Actions"
@@ -21926,7 +22082,7 @@ For sticky columns to function correctly, the parent table's width must be contr
           </button>
           <ul
             class="pf-c-dropdown__menu pf-m-align-right"
-            aria-labelledby="table-favorites-dropdown-kebab-11-button"
+            aria-labelledby="table-favorites-dropdown-kebab-1-button"
             hidden
           >
             <li>
@@ -21961,11 +22117,13 @@ For sticky columns to function correctly, the parent table's width must be contr
 
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="table-favorites-checkrow2"
-          aria-labelledby="table-favorites-node2"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="table-favorites-checkrow2"
+            aria-labelledby="table-favorites-node2"
+          />
+        </label>
       </td>
       <td class="pf-c-table__favorite" role="cell">
         <button
@@ -21989,7 +22147,7 @@ For sticky columns to function correctly, the parent table's width must be contr
         <div class="pf-c-dropdown">
           <button
             class="pf-c-dropdown__toggle pf-m-plain"
-            id="table-favorites-dropdown-kebab-22-button"
+            id="table-favorites-dropdown-kebab-2-button"
             aria-expanded="false"
             type="button"
             aria-label="Actions"
@@ -21998,7 +22156,7 @@ For sticky columns to function correctly, the parent table's width must be contr
           </button>
           <ul
             class="pf-c-dropdown__menu pf-m-align-right"
-            aria-labelledby="table-favorites-dropdown-kebab-22-button"
+            aria-labelledby="table-favorites-dropdown-kebab-2-button"
             hidden
           >
             <li>
@@ -22033,11 +22191,13 @@ For sticky columns to function correctly, the parent table's width must be contr
 
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="table-favorites-checkrow3"
-          aria-labelledby="table-favorites-node3"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="table-favorites-checkrow3"
+            aria-labelledby="table-favorites-node3"
+          />
+        </label>
       </td>
       <td class="pf-c-table__favorite pf-m-favorited" role="cell">
         <button
@@ -22061,7 +22221,7 @@ For sticky columns to function correctly, the parent table's width must be contr
         <div class="pf-c-dropdown">
           <button
             class="pf-c-dropdown__toggle pf-m-plain"
-            id="table-favorites-dropdown-kebab-33-button"
+            id="table-favorites-dropdown-kebab-3-button"
             aria-expanded="false"
             type="button"
             aria-label="Actions"
@@ -22070,7 +22230,7 @@ For sticky columns to function correctly, the parent table's width must be contr
           </button>
           <ul
             class="pf-c-dropdown__menu pf-m-align-right"
-            aria-labelledby="table-favorites-dropdown-kebab-33-button"
+            aria-labelledby="table-favorites-dropdown-kebab-3-button"
             hidden
           >
             <li>
@@ -22105,11 +22265,13 @@ For sticky columns to function correctly, the parent table's width must be contr
 
     <tr role="row">
       <td class="pf-c-table__check" role="cell">
-        <input
-          type="checkbox"
-          name="table-favorites-checkrow4"
-          aria-labelledby="table-favorites-node4"
-        />
+        <label>
+          <input
+            type="checkbox"
+            name="table-favorites-checkrow4"
+            aria-labelledby="table-favorites-node4"
+          />
+        </label>
       </td>
       <td class="pf-c-table__favorite" role="cell">
         <button
@@ -22133,7 +22295,7 @@ For sticky columns to function correctly, the parent table's width must be contr
         <div class="pf-c-dropdown">
           <button
             class="pf-c-dropdown__toggle pf-m-plain"
-            id="table-favorites-dropdown-kebab-44-button"
+            id="table-favorites-dropdown-kebab-4-button"
             aria-expanded="false"
             type="button"
             aria-label="Actions"
@@ -22142,7 +22304,7 @@ For sticky columns to function correctly, the parent table's width must be contr
           </button>
           <ul
             class="pf-c-dropdown__menu pf-m-align-right"
-            aria-labelledby="table-favorites-dropdown-kebab-44-button"
+            aria-labelledby="table-favorites-dropdown-kebab-4-button"
             hidden
           >
             <li>
@@ -22514,11 +22676,3 @@ By default, all table header cells are set to `white-space: nowrap`. If a `<th>`
 -   One action button, positioned in the last cell of a non-expandable row.
 -   Tabular data.
 -   Compact presentation modifier (not compatible with expandable table).
-
-### Responsive layout modifiers
-
-| Class                                                               | Applied to    | Outcome                                                                                                                                               |
-| ------------------------------------------------------------------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `.pf-m-grid-md`, `.pf-m-grid-lg`, `.pf-m-grid-xl`, `.pf-m-grid-2xl` | `.pf-c-table` | Changes tabular layout to responsive, grid based layout at suffixed breakpoint.                                                                       |
-| `.pf-m-grid`                                                        | `.pf-c-table` | Changes tabular layout to responsive, grid based layout. This approach requires JavaScript to set this class at some prescribed viewport width value. |
-| `.pf-m-sticky-header`                                               | `.pf-c-table` | Makes the table cells in `<thead>` sticky to the top of the table on scroll.                                                                          |