chore(Table): added more arialabeling for empty/nontext Table headers (…

…#10205)

packages/react-table/src/components/Table/examples/TableDraggable.tsx

@@ -150,20 +150,23 @@ export const TableDraggable: React.FunctionComponent = () => {
         </Tr>
       </Thead>
       <Tbody ref={bodyRef} onDragOver={onDragOver} onDrop={onDragOver} onDragLeave={onDragLeave}>
-        {rows.map((row, rowIndex) => (
-          <Tr key={rowIndex} id={row.id} draggable onDrop={onDrop} onDragEnd={onDragEnd} onDragStart={onDragStart}>
-            <Td
-              draggableRow={{
-                id: `draggable-row-${row.id}`
-              }}
-            />
-            {Object.keys(row).map((key, keyIndex) => (
-              <Td key={`${rowIndex}_${keyIndex}`} dataLabel={columns[keyIndex]}>
-                {row[key]}
-              </Td>
-            ))}
-          </Tr>
-        ))}
+        {rows.map((row, rowIndex) => {
+          const rowCellsToBuild = Object.keys(row).filter((rowCell) => rowCell !== 'id');
+          return (
+            <Tr key={rowIndex} id={row.id} draggable onDrop={onDrop} onDragEnd={onDragEnd} onDragStart={onDragStart}>
+              <Td
+                draggableRow={{
+                  id: `draggable-row-${row.id}`
+                }}
+              />
+              {rowCellsToBuild.map((key, keyIndex) => (
+                <Td key={`${rowIndex}_${keyIndex}`} dataLabel={columns[keyIndex]}>
+                  {row[key]}
+                </Td>
+              ))}
+            </Tr>
+          );
+        })}
       </Tbody>
     </Table>
   );

packages/react-table/src/components/Table/examples/TableSelectable.tsx

@@ -93,6 +93,7 @@ export const TableSelectable: React.FunctionComponent = () => {
               onSelect: (_event, isSelecting) => selectAllRepos(isSelecting),
               isSelected: areAllReposSelected
             }}
+            aria-label="Row select"
           />
           <Th>{columnNames.name}</Th>
           <Th>{columnNames.branches}</Th>

packages/react-table/src/demos/Table.md

@@ -103,7 +103,7 @@ import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 
 ### Column management with draggable
 
-```js isFullscreen file="./examples/TableColumnManagementWithDraggable.tsx"
+```js isDeprecated isFullscreen file="./examples/TableColumnManagementWithDraggable.tsx"
 
 ```
 

packages/react-table/src/demos/examples/TableExpandCollapseAll.tsx

@@ -164,7 +164,8 @@ export const TableExpandCollapseAll: React.FunctionComponent = () => {
                       collapseAllAriaLabel,
                       onToggle: onCollapseAll
                     }}
-                  ></Th>
+                    aria-label="Row expansion"
+                  />
                   {expandableColumns.map((column) => (
                     <Th key={column}>{column}</Th>
                   ))}