@patternfly/patternfly 4.162.0 → 4.164.0

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

@@ -250,11 +250,13 @@ These classes can be used to ensure that the table changes between the tabular a
   <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>
@@ -268,13 +270,15 @@ These classes can be used to ensure that the table changes between the tabular a
   <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>
@@ -329,17 +333,17 @@ These classes can be used to ensure that the table changes between the tabular a
 
     <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>
@@ -393,17 +397,17 @@ These classes can be used to ensure that the table changes between the tabular a
 
     <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>
@@ -457,17 +461,17 @@ These classes can be used to ensure that the table changes between the tabular a
 
     <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>
@@ -547,13 +551,15 @@ These classes can be used to ensure that the table changes between the tabular a
   <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>
@@ -608,17 +614,17 @@ These classes can be used to ensure that the table changes between the tabular a
 
     <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>
@@ -672,17 +678,17 @@ These classes can be used to ensure that the table changes between the tabular a
 
     <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>
@@ -736,17 +742,17 @@ These classes can be used to ensure that the table changes between the tabular a
 
     <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>
@@ -836,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"
@@ -910,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>
@@ -1002,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>
@@ -1092,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>
@@ -1182,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>
@@ -1275,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"
@@ -1349,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>
@@ -1492,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>
@@ -1587,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>
@@ -1682,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>
@@ -1853,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"
       >
@@ -5125,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>
@@ -5145,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>
@@ -5212,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>
@@ -5279,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>
@@ -5346,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>
@@ -5428,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>
@@ -5460,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>
@@ -5549,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>
@@ -5641,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>
@@ -5728,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>
@@ -5819,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">
@@ -5906,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>
@@ -6005,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>
@@ -6092,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>
@@ -6188,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>
@@ -6280,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"
@@ -6306,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">
@@ -6362,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>
@@ -6420,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">
@@ -6476,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">
@@ -6532,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>
@@ -6590,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>
@@ -6648,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>
@@ -6706,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">
@@ -6762,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">
@@ -6818,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>
@@ -6876,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">
@@ -6947,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"
@@ -7007,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>
@@ -7019,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>
@@ -7088,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>
@@ -7100,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>
@@ -7112,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>
@@ -7183,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>
@@ -7195,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>
@@ -7207,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>
@@ -7276,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>
@@ -7288,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>
@@ -7300,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>
@@ -7369,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>
@@ -7381,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>
@@ -7393,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>
@@ -7464,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>
@@ -7476,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>
@@ -7488,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>
@@ -7559,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>
@@ -7571,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>
@@ -7583,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>
@@ -7654,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>
@@ -7666,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>
@@ -7678,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>
@@ -7747,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>
@@ -7759,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>
@@ -7771,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>
@@ -7840,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>
@@ -7852,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>
@@ -7864,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>
@@ -7933,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>
@@ -7949,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">
@@ -7962,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>
@@ -8033,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>
@@ -8045,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>
@@ -8056,16 +8144,18 @@ 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-12"
-          aria-labelledby="table-tbody-expandable-hoverable-node-12"
-        />
+      <td class="pf-c-table__check" role="cell">
+        <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>
@@ -8126,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>
@@ -8142,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">
@@ -8155,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>
@@ -8226,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>
@@ -8242,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">
@@ -8255,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>
@@ -8326,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>
@@ -8338,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">
@@ -8351,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>
@@ -8422,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>
@@ -8434,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>
@@ -8446,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>
@@ -8515,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>
@@ -8527,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">
@@ -8540,16 +8638,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-17"
-          aria-labelledby="table-tbody-expandable-hoverable-node-17"
-        />
+        <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>
@@ -8611,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>
@@ -8623,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>
@@ -8635,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>
@@ -8704,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>
@@ -8716,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>
@@ -8728,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>
@@ -8797,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>
@@ -8821,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
@@ -10250,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
@@ -11795,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
@@ -13432,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>
@@ -13452,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>
@@ -13519,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>
@@ -13586,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>
@@ -13653,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>
@@ -13734,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>
@@ -13754,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>
@@ -13821,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>
@@ -13888,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>
@@ -13955,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>
@@ -14037,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"
@@ -14111,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>
@@ -14208,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>
@@ -14303,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>
@@ -14398,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>
@@ -14638,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>
@@ -14678,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"
@@ -14687,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>
@@ -14736,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"
@@ -14745,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>
@@ -14794,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"
@@ -14803,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>
@@ -14852,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"
@@ -14861,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>
@@ -14910,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"
@@ -14919,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>
@@ -14967,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>
@@ -15007,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"
@@ -15016,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>
@@ -15065,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"
@@ -15074,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>
@@ -15123,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"
@@ -15132,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>
@@ -15181,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"
@@ -15190,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>
@@ -15239,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"
@@ -15248,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>
@@ -15296,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>
@@ -15336,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"
@@ -15345,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>
@@ -15394,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"
@@ -15403,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>
@@ -15452,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"
@@ -15461,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>
@@ -15510,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"
@@ -15519,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>
@@ -15568,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"
@@ -15577,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>
@@ -15716,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>
@@ -15756,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"
@@ -15765,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>
@@ -15814,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"
@@ -15823,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>
@@ -15872,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"
@@ -15881,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>
@@ -15930,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"
@@ -15939,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>
@@ -15988,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"
@@ -15997,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>
@@ -16045,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>
@@ -16085,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"
@@ -16094,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>
@@ -16143,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"
@@ -16152,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>
@@ -16201,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"
@@ -16210,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>
@@ -16259,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"
@@ -16268,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>
@@ -16317,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"
@@ -16326,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>
@@ -16374,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>
@@ -16414,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"
@@ -16423,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>
@@ -16472,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"
@@ -16481,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>
@@ -16530,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"
@@ -16539,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>
@@ -16588,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"
@@ -16597,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>
@@ -16646,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"
@@ -16655,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>
@@ -16714,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"
       >
@@ -16797,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>
@@ -16837,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"
@@ -16846,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>
@@ -16895,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"
@@ -16904,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>
@@ -16953,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"
@@ -16962,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>
@@ -17011,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"
@@ -17020,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>
@@ -17069,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"
@@ -17078,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>
@@ -17126,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>
@@ -17166,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"
@@ -17175,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>
@@ -17224,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"
@@ -17233,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>
@@ -17282,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"
@@ -17291,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>
@@ -17340,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"
@@ -17349,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>
@@ -17398,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"
@@ -17407,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>
@@ -17455,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>
@@ -17495,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"
@@ -17504,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>
@@ -17553,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"
@@ -17562,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>
@@ -17611,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"
@@ -17620,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>
@@ -17669,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"
@@ -17678,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>
@@ -17727,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"
@@ -17736,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>
@@ -17878,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>
@@ -17918,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"
@@ -17927,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>
@@ -17976,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"
@@ -17985,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>
@@ -18034,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"
@@ -18043,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>
@@ -18092,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"
@@ -18101,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>
@@ -18150,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"
@@ -18159,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>
@@ -18207,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>
@@ -18247,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"
@@ -18256,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>
@@ -18305,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"
@@ -18314,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>
@@ -18363,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"
@@ -18372,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>
@@ -18421,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"
@@ -18430,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>
@@ -18479,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"
@@ -18488,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>
@@ -18536,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>
@@ -18576,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"
@@ -18585,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>
@@ -18634,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"
@@ -18643,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>
@@ -18692,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"
@@ -18701,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>
@@ -18750,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"
@@ -18759,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>
@@ -18808,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"
@@ -18817,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>
@@ -18885,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"
@@ -18944,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>
@@ -18961,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>
@@ -18981,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>
@@ -19001,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>
@@ -19629,7 +19757,7 @@ Add a [width modifier](#width-modifiers) to `thead th` to limit string length or
     class="pf-c-table"
     role="grid"
     aria-label="This is a scrollable table"
-    id="-table"
+    id="sticky-column-example"
   >
     <thead>
       <tr role="row">
@@ -20131,7 +20259,7 @@ Add a [width modifier](#width-modifiers) to `thead th` to limit string length or
     class="pf-c-table"
     role="grid"
     aria-label="This is a scrollable table"
-    id="-table"
+    id="sticky-multi-column-example"
   >
     <thead>
       <tr role="row">
@@ -20689,7 +20817,7 @@ Add a [width modifier](#width-modifiers) to `thead th` to limit string length or
       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">
@@ -21272,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"
@@ -21341,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
@@ -21441,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
@@ -21541,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
@@ -21884,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>
@@ -21903,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
@@ -21933,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"
@@ -21942,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>
@@ -21977,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
@@ -22005,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"
@@ -22014,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>
@@ -22049,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
@@ -22077,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"
@@ -22086,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>
@@ -22121,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
@@ -22149,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"
@@ -22158,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>