feat: enhance keyboard navigation

Orfium · May 14, 2024 · 8a19c4e · 8a19c4e
1 parent 1485ed3
commit 8a19c4e
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 18 deletions.
diff --git a/src/__storyshots__/Updated Components/Table/Table-ColumnAndRowSizing.snap b/src/__storyshots__/Updated Components/Table/Table-ColumnAndRowSizing.snap
@@ -41,12 +41,16 @@
   letter-spacing: 0.015625rem;
 }
 
-.emotion-3 [data-header-role='options'] {
+.emotion-3 [data-header-role='options'] button {
   opacity: 0;
 }
 
-.emotion-3:hover [data-header-role='options'],
-.emotion-3:focus-visible [data-header-role='options'] {
+.emotion-3:hover [data-header-role='options'] button,
+.emotion-3:focus-visible [data-header-role='options'] button {
+  opacity: 1;
+}
+
+.emotion-3 button:focus-visible {
   opacity: 1;
 }
 

diff --git a/src/__storyshots__/Updated Components/Table/Table-ColumnChooser.snap b/src/__storyshots__/Updated Components/Table/Table-ColumnChooser.snap
@@ -141,12 +141,16 @@
   letter-spacing: 0.015625rem;
 }
 
-.emotion-9 [data-header-role='options'] {
+.emotion-9 [data-header-role='options'] button {
   opacity: 0;
 }
 
-.emotion-9:hover [data-header-role='options'],
-.emotion-9:focus-visible [data-header-role='options'] {
+.emotion-9:hover [data-header-role='options'] button,
+.emotion-9:focus-visible [data-header-role='options'] button {
+  opacity: 1;
+}
+
+.emotion-9 button:focus-visible {
   opacity: 1;
 }
 

diff --git a/src/__storyshots__/Updated Components/Table/Table-Sorting.snap b/src/__storyshots__/Updated Components/Table/Table-Sorting.snap
@@ -141,12 +141,16 @@
   letter-spacing: 0.015625rem;
 }
 
-.emotion-9 [data-header-role='options'] {
+.emotion-9 [data-header-role='options'] button {
   opacity: 0;
 }
 
-.emotion-9:hover [data-header-role='options'],
-.emotion-9:focus-visible [data-header-role='options'] {
+.emotion-9:hover [data-header-role='options'] button,
+.emotion-9:focus-visible [data-header-role='options'] button {
+  opacity: 1;
+}
+
+.emotion-9 button:focus-visible {
   opacity: 1;
 }
 

diff --git a/src/components/Table/components/TH/TH.style.ts b/src/components/Table/components/TH/TH.style.ts
@@ -25,15 +25,23 @@ export const thContainer =
       ${generateStylesFromTokens(theme.tokens.typography.get('normal.body02'))};
 
       [data-header-role='options'] {
-        opacity: ${hasVisibleOptions ? 1 : 0};
+        button {
+          opacity: ${hasVisibleOptions ? 1 : 0};
+        }
       }
 
       &:hover,
       &:focus-visible {
         [data-header-role='options'] {
-          opacity: 1;
+          button {
+            opacity: 1;
+          }
         }
       }
+
+      button:focus-visible {
+        opacity: 1;
+      }
     `;
   };
 

diff --git a/src/components/Table/components/TH/components/THOptions/THOptions.tsx b/src/components/Table/components/TH/components/THOptions/THOptions.tsx
@@ -17,16 +17,17 @@ type Props = {
 };
 
 const THOptions: React.FC<Props> = ({ isMultiSortable, onSort, onButtonClick }) => {
-  const [isBtnOpen, setBtnOpen] = React.useState<boolean>(false);
+  const [isBtnOpen, setIsBtnOpen] = React.useState<boolean>(false);
 
   const btnRef = useRef(null);
+  const listRef = useRef(null);
 
   const handleBtnClick = (e) => {
     if (e?.preventDefault) {
       e?.preventDefault();
     }
 
-    setBtnOpen((isOpen) => {
+    setIsBtnOpen((isOpen) => {
       onButtonClick(!isOpen);
 
       return !isOpen;
@@ -42,7 +43,7 @@ const THOptions: React.FC<Props> = ({ isMultiSortable, onSort, onButtonClick })
 
     if (key === 'sortAscending' || key === 'sortDescending') {
       onButtonClick(false);
-      setBtnOpen(false);
+      setIsBtnOpen(false);
     }
   };
 
@@ -58,13 +59,18 @@ const THOptions: React.FC<Props> = ({ isMultiSortable, onSort, onButtonClick })
         aria-expanded={isBtnOpen ? 'true' : undefined}
         type="tertiary"
         size="compact"
+        onKeyDown={(e) => {
+          if (e.key === 'ArrowDown') {
+            listRef.current.focus();
+          }
+        }}
       />
       <Popover
         triggerRef={btnRef}
         css={popoverStyle}
         isOpen={isBtnOpen}
         onOpenChange={() => {
-          setBtnOpen((isOpen) => {
+          setIsBtnOpen((isOpen) => {
             onButtonClick(!isOpen);
 
             return !isOpen;
@@ -74,6 +80,7 @@ const THOptions: React.FC<Props> = ({ isMultiSortable, onSort, onButtonClick })
         crossOffset={72}
       >
         <MenuWrapper
+          ref={listRef}
           aria-label="Menu"
           selectionMode="multiple"
           css={[listStyle({}), menuStyle()]}

diff --git a/src/components/Table/components/TTitle/components/ColumnChooser/ColumnChooser.tsx b/src/components/Table/components/TTitle/components/ColumnChooser/ColumnChooser.tsx
@@ -16,10 +16,12 @@ type Props = Pick<TableProps<any>, 'columns' | 'columnsConfig'>;
 /** @TODO create a generic Popover component */
 
 const ColumnChooser: React.FC<Props> = ({ columns, columnsConfig }) => {
-  const [isBtnOpen, setBtnOpen] = React.useState<boolean>(false);
+  const [isBtnOpen, setIsBtnOpen] = React.useState<boolean>(false);
 
   const options = flattenColumns(columns);
 
+  const menuRef = useRef(null);
+
   const [selectedKeys, setSelectedKeys] = React.useState(
     new Set<string>(
       Object.keys(columnsConfig.columnVisibility).filter(
@@ -39,7 +41,7 @@ const ColumnChooser: React.FC<Props> = ({ columns, columnsConfig }) => {
       e?.preventDefault();
     }
 
-    setBtnOpen((isOpen) => !isOpen);
+    setIsBtnOpen((isOpen) => !isOpen);
   };
 
   const handleSelectionChange = (keys) => {
@@ -66,17 +68,23 @@ const ColumnChooser: React.FC<Props> = ({ columns, columnsConfig }) => {
         aria-expanded={isBtnOpen ? 'true' : undefined}
         iconLeftName="columnChooser"
         type="secondary"
+        onKeyDown={(e) => {
+          if (e.key === 'ArrowDown') {
+            menuRef.current.focus();
+          }
+        }}
       >
         Edit Columns
       </Button>
       <Popover
         triggerRef={btnRef}
         css={popoverStyle}
         isOpen={isBtnOpen}
-        onOpenChange={() => setBtnOpen((isOpen) => !isOpen)}
+        onOpenChange={() => setIsBtnOpen((isOpen) => !isOpen)}
         shouldCloseOnInteractOutside={() => true}
       >
         <MenuWrapper
+          ref={menuRef}
           aria-label="Menu"
           selectionMode="multiple"
           selectedKeys={selectedKeys}