@patternfly/patternfly 4.170.0 → 4.173.0

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

@@ -8944,7 +8944,9 @@ 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
+
+### Tree table basic
 
 ```html
 <table
@@ -10415,11 +10417,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
             </button>
           </span>
           <span class="pf-c-table__check">
-            <input
-              type="checkbox"
-              name="tree-table-with-checkboxes-example-checkrow-1"
-              aria-labelledby="tree-table-with-checkboxes-example-node-1"
-            />
+            <label>
+              <input
+                type="checkbox"
+                name="tree-table-with-checkboxes-example-checkrow-1"
+                aria-labelledby="tree-table-with-checkboxes-example-node-1"
+              />
+            </label>
           </span>
           <div class="pf-c-table__tree-view-text">
             <span
@@ -10513,11 +10517,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
             </button>
           </span>
           <span class="pf-c-table__check">
-            <input
-              type="checkbox"
-              name="tree-table-with-checkboxes-example-checkrow-2"
-              aria-labelledby="tree-table-with-checkboxes-example-node-2"
-            />
+            <label>
+              <input
+                type="checkbox"
+                name="tree-table-with-checkboxes-example-checkrow-2"
+                aria-labelledby="tree-table-with-checkboxes-example-node-2"
+              />
+            </label>
           </span>
           <div class="pf-c-table__tree-view-text">
             <span
@@ -10599,11 +10605,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <th class="pf-c-table__tree-view-title-cell">
         <div class="pf-c-table__tree-view-main">
           <span class="pf-c-table__check">
-            <input
-              type="checkbox"
-              name="tree-table-with-checkboxes-example-checkrow-3"
-              aria-labelledby="tree-table-with-checkboxes-example-node-3"
-            />
+            <label>
+              <input
+                type="checkbox"
+                name="tree-table-with-checkboxes-example-checkrow-3"
+                aria-labelledby="tree-table-with-checkboxes-example-node-3"
+              />
+            </label>
           </span>
           <div class="pf-c-table__tree-view-text">
             <span
@@ -10684,11 +10692,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <th class="pf-c-table__tree-view-title-cell">
         <div class="pf-c-table__tree-view-main">
           <span class="pf-c-table__check">
-            <input
-              type="checkbox"
-              name="tree-table-with-checkboxes-example-checkrow-4"
-              aria-labelledby="tree-table-with-checkboxes-example-node-4"
-            />
+            <label>
+              <input
+                type="checkbox"
+                name="tree-table-with-checkboxes-example-checkrow-4"
+                aria-labelledby="tree-table-with-checkboxes-example-node-4"
+              />
+            </label>
           </span>
           <div class="pf-c-table__tree-view-text">
             <span
@@ -10769,11 +10779,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <th class="pf-c-table__tree-view-title-cell">
         <div class="pf-c-table__tree-view-main">
           <span class="pf-c-table__check">
-            <input
-              type="checkbox"
-              name="tree-table-with-checkboxes-example-checkrow-5"
-              aria-labelledby="tree-table-with-checkboxes-example-node-5"
-            />
+            <label>
+              <input
+                type="checkbox"
+                name="tree-table-with-checkboxes-example-checkrow-5"
+                aria-labelledby="tree-table-with-checkboxes-example-node-5"
+              />
+            </label>
           </span>
           <div class="pf-c-table__tree-view-text">
             <span
@@ -10853,11 +10865,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <th class="pf-c-table__tree-view-title-cell">
         <div class="pf-c-table__tree-view-main">
           <span class="pf-c-table__check">
-            <input
-              type="checkbox"
-              name="tree-table-with-checkboxes-example-checkrow-6"
-              aria-labelledby="tree-table-with-checkboxes-example-node-6"
-            />
+            <label>
+              <input
+                type="checkbox"
+                name="tree-table-with-checkboxes-example-checkrow-6"
+                aria-labelledby="tree-table-with-checkboxes-example-node-6"
+              />
+            </label>
           </span>
           <div class="pf-c-table__tree-view-text">
             <span
@@ -10952,11 +10966,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
             </button>
           </span>
           <span class="pf-c-table__check">
-            <input
-              type="checkbox"
-              name="tree-table-with-checkboxes-example-checkrow-7"
-              aria-labelledby="tree-table-with-checkboxes-example-node-7"
-            />
+            <label>
+              <input
+                type="checkbox"
+                name="tree-table-with-checkboxes-example-checkrow-7"
+                aria-labelledby="tree-table-with-checkboxes-example-node-7"
+              />
+            </label>
           </span>
           <div class="pf-c-table__tree-view-text">
             <span
@@ -11036,11 +11052,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <th class="pf-c-table__tree-view-title-cell">
         <div class="pf-c-table__tree-view-main">
           <span class="pf-c-table__check">
-            <input
-              type="checkbox"
-              name="tree-table-with-checkboxes-example-checkrow-8"
-              aria-labelledby="tree-table-with-checkboxes-example-node-8"
-            />
+            <label>
+              <input
+                type="checkbox"
+                name="tree-table-with-checkboxes-example-checkrow-8"
+                aria-labelledby="tree-table-with-checkboxes-example-node-8"
+              />
+            </label>
           </span>
           <div class="pf-c-table__tree-view-text">
             <span
@@ -11134,11 +11152,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
             </button>
           </span>
           <span class="pf-c-table__check">
-            <input
-              type="checkbox"
-              name="tree-table-with-checkboxes-example-checkrow-9"
-              aria-labelledby="tree-table-with-checkboxes-example-node-9"
-            />
+            <label>
+              <input
+                type="checkbox"
+                name="tree-table-with-checkboxes-example-checkrow-9"
+                aria-labelledby="tree-table-with-checkboxes-example-node-9"
+              />
+            </label>
           </span>
           <div class="pf-c-table__tree-view-text">
             <span
@@ -11218,11 +11238,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <th class="pf-c-table__tree-view-title-cell">
         <div class="pf-c-table__tree-view-main">
           <span class="pf-c-table__check">
-            <input
-              type="checkbox"
-              name="tree-table-with-checkboxes-example-checkrow-10"
-              aria-labelledby="tree-table-with-checkboxes-example-node-10"
-            />
+            <label>
+              <input
+                type="checkbox"
+                name="tree-table-with-checkboxes-example-checkrow-10"
+                aria-labelledby="tree-table-with-checkboxes-example-node-10"
+              />
+            </label>
           </span>
           <div class="pf-c-table__tree-view-text">
             <span
@@ -11303,11 +11325,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <th class="pf-c-table__tree-view-title-cell">
         <div class="pf-c-table__tree-view-main">
           <span class="pf-c-table__check">
-            <input
-              type="checkbox"
-              name="tree-table-with-checkboxes-example-checkrow-11"
-              aria-labelledby="tree-table-with-checkboxes-example-node-11"
-            />
+            <label>
+              <input
+                type="checkbox"
+                name="tree-table-with-checkboxes-example-checkrow-11"
+                aria-labelledby="tree-table-with-checkboxes-example-node-11"
+              />
+            </label>
           </span>
           <div class="pf-c-table__tree-view-text">
             <span
@@ -11402,11 +11426,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
             </button>
           </span>
           <span class="pf-c-table__check">
-            <input
-              type="checkbox"
-              name="tree-table-with-checkboxes-example-checkrow-12"
-              aria-labelledby="tree-table-with-checkboxes-example-node-12"
-            />
+            <label>
+              <input
+                type="checkbox"
+                name="tree-table-with-checkboxes-example-checkrow-12"
+                aria-labelledby="tree-table-with-checkboxes-example-node-12"
+              />
+            </label>
           </span>
           <div class="pf-c-table__tree-view-text">
             <span
@@ -11486,11 +11512,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <th class="pf-c-table__tree-view-title-cell">
         <div class="pf-c-table__tree-view-main">
           <span class="pf-c-table__check">
-            <input
-              type="checkbox"
-              name="tree-table-with-checkboxes-example-checkrow-13"
-              aria-labelledby="tree-table-with-checkboxes-example-node-13"
-            />
+            <label>
+              <input
+                type="checkbox"
+                name="tree-table-with-checkboxes-example-checkrow-13"
+                aria-labelledby="tree-table-with-checkboxes-example-node-13"
+              />
+            </label>
           </span>
           <div class="pf-c-table__tree-view-text">
             <span
@@ -11570,11 +11598,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <th class="pf-c-table__tree-view-title-cell">
         <div class="pf-c-table__tree-view-main">
           <span class="pf-c-table__check">
-            <input
-              type="checkbox"
-              name="tree-table-with-checkboxes-example-checkrow-14"
-              aria-labelledby="tree-table-with-checkboxes-example-node-14"
-            />
+            <label>
+              <input
+                type="checkbox"
+                name="tree-table-with-checkboxes-example-checkrow-14"
+                aria-labelledby="tree-table-with-checkboxes-example-node-14"
+              />
+            </label>
           </span>
           <div class="pf-c-table__tree-view-text">
             <span
@@ -11668,11 +11698,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
             </button>
           </span>
           <span class="pf-c-table__check">
-            <input
-              type="checkbox"
-              name="tree-table-with-checkboxes-example-checkrow-15"
-              aria-labelledby="tree-table-with-checkboxes-example-node-15"
-            />
+            <label>
+              <input
+                type="checkbox"
+                name="tree-table-with-checkboxes-example-checkrow-15"
+                aria-labelledby="tree-table-with-checkboxes-example-node-15"
+              />
+            </label>
           </span>
           <div class="pf-c-table__tree-view-text">
             <span
@@ -11753,11 +11785,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <th class="pf-c-table__tree-view-title-cell">
         <div class="pf-c-table__tree-view-main">
           <span class="pf-c-table__check">
-            <input
-              type="checkbox"
-              name="tree-table-with-checkboxes-example-checkrow-16"
-              aria-labelledby="tree-table-with-checkboxes-example-node-16"
-            />
+            <label>
+              <input
+                type="checkbox"
+                name="tree-table-with-checkboxes-example-checkrow-16"
+                aria-labelledby="tree-table-with-checkboxes-example-node-16"
+              />
+            </label>
           </span>
           <div class="pf-c-table__tree-view-text">
             <span
@@ -11838,11 +11872,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <th class="pf-c-table__tree-view-title-cell">
         <div class="pf-c-table__tree-view-main">
           <span class="pf-c-table__check">
-            <input
-              type="checkbox"
-              name="tree-table-with-checkboxes-example-checkrow-17"
-              aria-labelledby="tree-table-with-checkboxes-example-node-17"
-            />
+            <label>
+              <input
+                type="checkbox"
+                name="tree-table-with-checkboxes-example-checkrow-17"
+                aria-labelledby="tree-table-with-checkboxes-example-node-17"
+              />
+            </label>
           </span>
           <div class="pf-c-table__tree-view-text">
             <span
@@ -11960,11 +11996,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
             </button>
           </span>
           <span class="pf-c-table__check">
-            <input
-              type="checkbox"
-              name="tree-table-with-checkboxes-icons-example-checkrow-1"
-              aria-labelledby="tree-table-with-checkboxes-icons-example-node-1"
-            />
+            <label>
+              <input
+                type="checkbox"
+                name="tree-table-with-checkboxes-icons-example-checkrow-1"
+                aria-labelledby="tree-table-with-checkboxes-icons-example-node-1"
+              />
+            </label>
           </span>
           <div class="pf-c-table__tree-view-text">
             <span class="pf-c-table__tree-view-icon">
@@ -12061,11 +12099,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
             </button>
           </span>
           <span class="pf-c-table__check">
-            <input
-              type="checkbox"
-              name="tree-table-with-checkboxes-icons-example-checkrow-2"
-              aria-labelledby="tree-table-with-checkboxes-icons-example-node-2"
-            />
+            <label>
+              <input
+                type="checkbox"
+                name="tree-table-with-checkboxes-icons-example-checkrow-2"
+                aria-labelledby="tree-table-with-checkboxes-icons-example-node-2"
+              />
+            </label>
           </span>
           <div class="pf-c-table__tree-view-text">
             <span class="pf-c-table__tree-view-icon">
@@ -12150,11 +12190,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <th class="pf-c-table__tree-view-title-cell">
         <div class="pf-c-table__tree-view-main">
           <span class="pf-c-table__check">
-            <input
-              type="checkbox"
-              name="tree-table-with-checkboxes-icons-example-checkrow-3"
-              aria-labelledby="tree-table-with-checkboxes-icons-example-node-3"
-            />
+            <label>
+              <input
+                type="checkbox"
+                name="tree-table-with-checkboxes-icons-example-checkrow-3"
+                aria-labelledby="tree-table-with-checkboxes-icons-example-node-3"
+              />
+            </label>
           </span>
           <div class="pf-c-table__tree-view-text">
             <span class="pf-c-table__tree-view-icon">
@@ -12238,11 +12280,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <th class="pf-c-table__tree-view-title-cell">
         <div class="pf-c-table__tree-view-main">
           <span class="pf-c-table__check">
-            <input
-              type="checkbox"
-              name="tree-table-with-checkboxes-icons-example-checkrow-4"
-              aria-labelledby="tree-table-with-checkboxes-icons-example-node-4"
-            />
+            <label>
+              <input
+                type="checkbox"
+                name="tree-table-with-checkboxes-icons-example-checkrow-4"
+                aria-labelledby="tree-table-with-checkboxes-icons-example-node-4"
+              />
+            </label>
           </span>
           <div class="pf-c-table__tree-view-text">
             <span class="pf-c-table__tree-view-icon">
@@ -12326,11 +12370,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <th class="pf-c-table__tree-view-title-cell">
         <div class="pf-c-table__tree-view-main">
           <span class="pf-c-table__check">
-            <input
-              type="checkbox"
-              name="tree-table-with-checkboxes-icons-example-checkrow-5"
-              aria-labelledby="tree-table-with-checkboxes-icons-example-node-5"
-            />
+            <label>
+              <input
+                type="checkbox"
+                name="tree-table-with-checkboxes-icons-example-checkrow-5"
+                aria-labelledby="tree-table-with-checkboxes-icons-example-node-5"
+              />
+            </label>
           </span>
           <div class="pf-c-table__tree-view-text">
             <span class="pf-c-table__tree-view-icon">
@@ -12413,11 +12459,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <th class="pf-c-table__tree-view-title-cell">
         <div class="pf-c-table__tree-view-main">
           <span class="pf-c-table__check">
-            <input
-              type="checkbox"
-              name="tree-table-with-checkboxes-icons-example-checkrow-6"
-              aria-labelledby="tree-table-with-checkboxes-icons-example-node-6"
-            />
+            <label>
+              <input
+                type="checkbox"
+                name="tree-table-with-checkboxes-icons-example-checkrow-6"
+                aria-labelledby="tree-table-with-checkboxes-icons-example-node-6"
+              />
+            </label>
           </span>
           <div class="pf-c-table__tree-view-text">
             <span class="pf-c-table__tree-view-icon">
@@ -12515,11 +12563,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
             </button>
           </span>
           <span class="pf-c-table__check">
-            <input
-              type="checkbox"
-              name="tree-table-with-checkboxes-icons-example-checkrow-7"
-              aria-labelledby="tree-table-with-checkboxes-icons-example-node-7"
-            />
+            <label>
+              <input
+                type="checkbox"
+                name="tree-table-with-checkboxes-icons-example-checkrow-7"
+                aria-labelledby="tree-table-with-checkboxes-icons-example-node-7"
+              />
+            </label>
           </span>
           <div class="pf-c-table__tree-view-text">
             <span class="pf-c-table__tree-view-icon">
@@ -12602,11 +12652,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <th class="pf-c-table__tree-view-title-cell">
         <div class="pf-c-table__tree-view-main">
           <span class="pf-c-table__check">
-            <input
-              type="checkbox"
-              name="tree-table-with-checkboxes-icons-example-checkrow-8"
-              aria-labelledby="tree-table-with-checkboxes-icons-example-node-8"
-            />
+            <label>
+              <input
+                type="checkbox"
+                name="tree-table-with-checkboxes-icons-example-checkrow-8"
+                aria-labelledby="tree-table-with-checkboxes-icons-example-node-8"
+              />
+            </label>
           </span>
           <div class="pf-c-table__tree-view-text">
             <span class="pf-c-table__tree-view-icon">
@@ -12703,11 +12755,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
             </button>
           </span>
           <span class="pf-c-table__check">
-            <input
-              type="checkbox"
-              name="tree-table-with-checkboxes-icons-example-checkrow-9"
-              aria-labelledby="tree-table-with-checkboxes-icons-example-node-9"
-            />
+            <label>
+              <input
+                type="checkbox"
+                name="tree-table-with-checkboxes-icons-example-checkrow-9"
+                aria-labelledby="tree-table-with-checkboxes-icons-example-node-9"
+              />
+            </label>
           </span>
           <div class="pf-c-table__tree-view-text">
             <span class="pf-c-table__tree-view-icon">
@@ -12790,11 +12844,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <th class="pf-c-table__tree-view-title-cell">
         <div class="pf-c-table__tree-view-main">
           <span class="pf-c-table__check">
-            <input
-              type="checkbox"
-              name="tree-table-with-checkboxes-icons-example-checkrow-10"
-              aria-labelledby="tree-table-with-checkboxes-icons-example-node-10"
-            />
+            <label>
+              <input
+                type="checkbox"
+                name="tree-table-with-checkboxes-icons-example-checkrow-10"
+                aria-labelledby="tree-table-with-checkboxes-icons-example-node-10"
+              />
+            </label>
           </span>
           <div class="pf-c-table__tree-view-text">
             <span class="pf-c-table__tree-view-icon">
@@ -12878,11 +12934,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <th class="pf-c-table__tree-view-title-cell">
         <div class="pf-c-table__tree-view-main">
           <span class="pf-c-table__check">
-            <input
-              type="checkbox"
-              name="tree-table-with-checkboxes-icons-example-checkrow-11"
-              aria-labelledby="tree-table-with-checkboxes-icons-example-node-11"
-            />
+            <label>
+              <input
+                type="checkbox"
+                name="tree-table-with-checkboxes-icons-example-checkrow-11"
+                aria-labelledby="tree-table-with-checkboxes-icons-example-node-11"
+              />
+            </label>
           </span>
           <div class="pf-c-table__tree-view-text">
             <span class="pf-c-table__tree-view-icon">
@@ -12980,11 +13038,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
             </button>
           </span>
           <span class="pf-c-table__check">
-            <input
-              type="checkbox"
-              name="tree-table-with-checkboxes-icons-example-checkrow-12"
-              aria-labelledby="tree-table-with-checkboxes-icons-example-node-12"
-            />
+            <label>
+              <input
+                type="checkbox"
+                name="tree-table-with-checkboxes-icons-example-checkrow-12"
+                aria-labelledby="tree-table-with-checkboxes-icons-example-node-12"
+              />
+            </label>
           </span>
           <div class="pf-c-table__tree-view-text">
             <span class="pf-c-table__tree-view-icon">
@@ -13067,11 +13127,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <th class="pf-c-table__tree-view-title-cell">
         <div class="pf-c-table__tree-view-main">
           <span class="pf-c-table__check">
-            <input
-              type="checkbox"
-              name="tree-table-with-checkboxes-icons-example-checkrow-13"
-              aria-labelledby="tree-table-with-checkboxes-icons-example-node-13"
-            />
+            <label>
+              <input
+                type="checkbox"
+                name="tree-table-with-checkboxes-icons-example-checkrow-13"
+                aria-labelledby="tree-table-with-checkboxes-icons-example-node-13"
+              />
+            </label>
           </span>
           <div class="pf-c-table__tree-view-text">
             <span class="pf-c-table__tree-view-icon">
@@ -13154,11 +13216,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <th class="pf-c-table__tree-view-title-cell">
         <div class="pf-c-table__tree-view-main">
           <span class="pf-c-table__check">
-            <input
-              type="checkbox"
-              name="tree-table-with-checkboxes-icons-example-checkrow-14"
-              aria-labelledby="tree-table-with-checkboxes-icons-example-node-14"
-            />
+            <label>
+              <input
+                type="checkbox"
+                name="tree-table-with-checkboxes-icons-example-checkrow-14"
+                aria-labelledby="tree-table-with-checkboxes-icons-example-node-14"
+              />
+            </label>
           </span>
           <div class="pf-c-table__tree-view-text">
             <span class="pf-c-table__tree-view-icon">
@@ -13255,11 +13319,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
             </button>
           </span>
           <span class="pf-c-table__check">
-            <input
-              type="checkbox"
-              name="tree-table-with-checkboxes-icons-example-checkrow-15"
-              aria-labelledby="tree-table-with-checkboxes-icons-example-node-15"
-            />
+            <label>
+              <input
+                type="checkbox"
+                name="tree-table-with-checkboxes-icons-example-checkrow-15"
+                aria-labelledby="tree-table-with-checkboxes-icons-example-node-15"
+              />
+            </label>
           </span>
           <div class="pf-c-table__tree-view-text">
             <span class="pf-c-table__tree-view-icon">
@@ -13343,11 +13409,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <th class="pf-c-table__tree-view-title-cell">
         <div class="pf-c-table__tree-view-main">
           <span class="pf-c-table__check">
-            <input
-              type="checkbox"
-              name="tree-table-with-checkboxes-icons-example-checkrow-16"
-              aria-labelledby="tree-table-with-checkboxes-icons-example-node-16"
-            />
+            <label>
+              <input
+                type="checkbox"
+                name="tree-table-with-checkboxes-icons-example-checkrow-16"
+                aria-labelledby="tree-table-with-checkboxes-icons-example-node-16"
+              />
+            </label>
           </span>
           <div class="pf-c-table__tree-view-text">
             <span class="pf-c-table__tree-view-icon">
@@ -13431,11 +13499,13 @@ Note: To apply padding to `.pf-c-table__expandable-row`, wrap the content in `.p
       <th class="pf-c-table__tree-view-title-cell">
         <div class="pf-c-table__tree-view-main">
           <span class="pf-c-table__check">
-            <input
-              type="checkbox"
-              name="tree-table-with-checkboxes-icons-example-checkrow-17"
-              aria-labelledby="tree-table-with-checkboxes-icons-example-node-17"
-            />
+            <label>
+              <input
+                type="checkbox"
+                name="tree-table-with-checkboxes-icons-example-checkrow-17"
+                aria-labelledby="tree-table-with-checkboxes-icons-example-node-17"
+              />
+            </label>
           </span>
           <div class="pf-c-table__tree-view-text">
             <span class="pf-c-table__tree-view-icon">
@@ -23260,7 +23330,7 @@ Basic striped table rows are supported on tables with a single `<tbody>` element
 
 ```html
 <table
-  class="pf-c-table pf-m-grid-md pf-m-striped"
+  class="pf-c-table pf-m-grid-md"
   role="grid"
   aria-label="This is a striped tr example"
   id="table-striped-tr"