feat(datatable): keyboard support header and checkbox. PLAT-951

src/components/Datatable/Table/components/TableCheckbox.tsx

@@ -41,6 +41,7 @@ const TableCheckbox = forwardRef(
         disabled={isDisabled}
         id={checkboxId}
         name={name}
+        tabIndex={0}
         type="checkbox"
         {...props}
       />

src/components/FocusTrap/useFocusTrap.ts

@@ -113,6 +113,7 @@ const useFocusTrap = ({
             event.preventDefault();
             lastElement.focus();
           }
+          return;
         }
 
         // Tab: going forwards

src/components/_internal/BaseTable/BaseTable.styles.tsx

@@ -161,6 +161,11 @@ export const StyledBaseTable = styled.table`
           display: block;
         }
       }
+
+      &:focus-visible + .ds-table-checkbox-mark {
+        outline: 3px solid var(--sscds-focus-indicator-color);
+        outline-offset: 1px;
+      }
     }
 
     .ds-table-checkbox-mark {

src/components/_internal/BaseTable/Head/Head.tsx

@@ -21,6 +21,12 @@ const StyledTh = styled.th<{ sticky?: string }>`
 
   ${makeStickyColumn};
 
+  &[data-focus-visible='true']:focus-visible {
+    outline: 3px solid var(--sscds-focus-indicator-color);
+    outline-offset: -3px;
+    box-shadow: none;
+  }
+
   ${({ sticky }) =>
     sticky === 'left' &&
     css`
@@ -50,6 +56,16 @@ function Head<D extends Record<string, unknown>>({
                 ...column.getSortByToggleProps({
                   ...column.getSortByToggleProps(),
                   title: column.canSort ? `Sort ${column.Header}` : undefined,
+                  ...(column.canSort && {
+                    tabIndex: 0,
+                    'data-focus-visible': true,
+                    onKeyDown: (event: React.KeyboardEvent) => {
+                      if (event.key === 'Enter' || event.key === ' ') {
+                        event.preventDefault();
+                        column.toggleSortBy();
+                      }
+                    },
+                  }),
                 }),
                 ...shrinkIfSticky(column.sticky),
               });