Improve toolbar accessibility (#1542)

* Add custom toolbar example Signed-off-by: Joe Fusco <joe.fusco@wpengine.com> * Add newline at EOF Signed-off-by: Joe Fusco <joe.fusco@wpengine.com> * Remove top-level links for dropdown example Signed-off-by: Joe Fusco <joe.fusco@wpengine.com> * Update lockfile Signed-off-by: Joe Fusco <joe.fusco@wpengine.com> * Update lockfile Signed-off-by: Joe Fusco <joe.fusco@wpengine.com> * Linting fixes Signed-off-by: Joe Fusco <joe.fusco@wpengine.com> * Remove uncessary deps Signed-off-by: Joe Fusco <joe.fusco@wpengine.com> * Remove unused deps Signed-off-by: Joe Fusco <joe.fusco@wpengine.com> * Rename plugin Signed-off-by: Joe Fusco <joe.fusco@wpengine.com> * Use appropriate versions Signed-off-by: Joe Fusco <joe.fusco@wpengine.com> * Rename Signed-off-by: Joe Fusco <joe.fusco@wpengine.com> * Add changeset Signed-off-by: Joe Fusco <joe.fusco@wpengine.com> * Temp remove custom toolbar example Signed-off-by: Joe Fusco <joe.fusco@wpengine.com> * Remove unused prop Signed-off-by: Joe Fusco <joe.fusco@wpengine.com> * Remove custom toolbar example Signed-off-by: Joe Fusco <joe.fusco@wpengine.com> * Fix linting issues Signed-off-by: Joe Fusco <joe.fusco@wpengine.com> * Fix accessibility linting issue Signed-off-by: Joe Fusco <joe.fusco@wpengine.com> * Add exception due to wpadminbar styles Signed-off-by: Joe Fusco <joe.fusco@wpengine.com> * Update changelog entry Signed-off-by: Joe Fusco <joe.fusco@wpengine.com> * Clean up Signed-off-by: Joe Fusco <joe.fusco@wpengine.com> * Space should not open the menu to match WP core Signed-off-by: Joe Fusco <joe.fusco@wpengine.com> * Update changeset Signed-off-by: Joe Fusco <joe.fusco@wpengine.com> --------- Signed-off-by: Joe Fusco <joe.fusco@wpengine.com>
wpengine · Sep 4, 2023 · 795d956 · 795d956 · atlas-by-wp-engine · Sep 4, 2023
1 parent 350dc30
commit 795d956
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 18 deletions.
diff --git a/.changeset/poor-dragons-help.md b/.changeset/poor-dragons-help.md
@@ -0,0 +1,13 @@
+---
+'@faustwp/core': patch
+---
+
+Improved keyboard navigation within Toolbar menus, allowing for dropdowns to be toggled open with "enter"
+
+Note that the `ToolbarItem` component no longer uses the prop `handleClick`, instead relying on pass-through props in order to separate the click event from the the key event.
+
+```jsx
+<ToolbarItem onKeyDown={handleKeyDown} onClick={handleClick}>
+    Log Out
+</ToolbarItem>
+```
diff --git a/packages/faustwp-core/src/components/Toolbar/ToolbarItem.tsx b/packages/faustwp-core/src/components/Toolbar/ToolbarItem.tsx
@@ -3,19 +3,11 @@ import React, { PropsWithChildren } from 'react';
 type Props = PropsWithChildren<{
   href?: string;
   tabIndex?: number;
-  handleClick?: () => Promise<void>;
 }> & { [key: string]: unknown };
 
-export function ToolbarItem({ href, handleClick, children, ...props }: Props) {
+export function ToolbarItem({ href, children, ...props }: Props) {
   return (
-    <a
-      role="menuitem"
-      tabIndex={0}
-      className="ab-item"
-      onClick={handleClick}
-      onKeyDown={handleClick}
-      href={href}
-      {...props}>
+    <a role="menuitem" tabIndex={0} className="ab-item" href={href} {...props}>
       {children}
     </a>
   );

diff --git a/packages/faustwp-core/src/components/Toolbar/ToolbarNode.tsx b/packages/faustwp-core/src/components/Toolbar/ToolbarNode.tsx
@@ -25,16 +25,22 @@ export function ToolbarNode({
 }: Props) {
   const [hover, setHover] = useState(false);
 
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      setHover(!hover); // Toggle hover state when "Enter" is pressed
+    } else if (e.key === 'Escape') {
+      setHover(false); // Close the dropdown
+    }
+  };
+
   return (
+    /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */
     <li
       id={wpAdminBar(id)}
       className={className('menupop', { hover }, additionalClassNames)}
-      onMouseEnter={() => {
-        setHover(true);
-      }}
-      onMouseLeave={() => {
-        setHover(false);
-      }}
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => setHover(false)}
+      onKeyDown={handleKeyDown}
       {...props}>
       {children}
     </li>

diff --git a/packages/faustwp-core/src/components/Toolbar/nodes/MyAccount.tsx b/packages/faustwp-core/src/components/Toolbar/nodes/MyAccount.tsx
@@ -42,9 +42,21 @@ export function AuthenticatedAccount() {
     return <ToolbarNodeSkeleton />;
   }
 
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      void logout();
+    }
+  };
+
+  const handleClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    void logout();
+  };
+
   return (
     <>
-      <ToolbarItem aria-haspopup="true" href={getAdminUrl('profile.php')}>
+      <ToolbarItem aria-haspopup="true">
         Howdy, <span className="display-name">{data?.viewer?.name}</span>
         <img
           alt=""
@@ -81,7 +93,10 @@ export function AuthenticatedAccount() {
             </ToolbarItem>
           </li>
           <li id="wp-admin-bar-logout">
-            <ToolbarItem href="" handleClick={() => logout()}>
+            <ToolbarItem
+              href="#"
+              onKeyDown={handleKeyDown}
+              onClick={handleClick}>
               Log Out
             </ToolbarItem>
           </li>