Merge pull request #3 from AdmitHub/tabbable-skin-tones-2

Make skin tone menu tabbable
AdmitHub · Jan 10, 2023 · f96c2e5 · f96c2e5
2 parents db60c6d + 855258e
commit f96c2e5
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 6 deletions.
diff --git a/src/components/Layout/Relative.tsx b/src/components/Layout/Relative.tsx
@@ -4,11 +4,14 @@ type Props = Readonly<{
   children: React.ReactNode;
   className?: string;
   style?: React.CSSProperties;
+  tabIndex?: number;
+  onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
 }>;
 
-export default function Relative({ children, className, style }: Props) {
+export default function Relative({ children, className, style, tabIndex, onKeyDown }: Props) {
   return (
-    <div style={{ ...style, position: 'relative' }} className={className}>
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    <div style={{ ...style, position: 'relative' }} className={className} tabIndex={tabIndex} onKeyDown={onKeyDown}>
       {children}
     </div>
   );

diff --git a/src/components/header/SkinTonePicker.tsx b/src/components/header/SkinTonePicker.tsx
@@ -9,6 +9,7 @@ import skinToneVariations, {
 import { setSkinTone } from '../../dataUtils/skinTone';
 import { useCloseAllOpenToggles } from '../../hooks/useCloseAllOpenToggles';
 import { useFocusSearchInput } from '../../hooks/useFocus';
+import { KeyboardEvents } from '../../hooks/useKeyboardNavigation';
 import { SkinTones } from '../../types/exposedTypes';
 import Absolute from '../Layout/Absolute';
 import Relative from '../Layout/Relative';
@@ -66,8 +67,18 @@ export function SkinTonePicker({
           ? { flexBasis: expandedSize, height: expandedSize }
           : { flexBasis: expandedSize }
       }
+      tabIndex={0}
+      onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => {
+        const { key } = event;
+        if (key === KeyboardEvents.Enter) {
+          if (!isOpen) {
+            setIsOpen(true)
+          }
+          closeAllOpenToggles();
+        }
+      }}
     >
-      <div className="epr-skin-tone-select" ref={SkinTonePickerRef}>
+      <div className="epr-skin-tone-select" ref={SkinTonePickerRef} >
         {skinToneVariations.map((skinToneVariation, i) => {
           const active = skinToneVariation === activeSkinTone;
           return (
@@ -90,11 +101,24 @@ export function SkinTonePicker({
                 }
                 closeAllOpenToggles();
               }}
+              // when tabbed onto the SkinTonePicker, allow Enter to open and close the fan of colors
+              onKeyDown={(event) => {
+                const { key } = event;
+                if (key === KeyboardEvents.Enter) {
+                  if (isOpen) {
+                    setActiveSkinTone(skinToneVariation);
+                    focusSearchInput();
+                  } else {
+                    setIsOpen(true);
+                  }
+                  closeAllOpenToggles();
+                }
+              }}
+              tabIndex={isOpen ? 0 : -1}
               key={skinToneVariation}
               className={clsx(`epr-tone-${skinToneVariation}`, 'epr-tone', {
                 [ClassNames.active]: active
               })}
-              tabIndex={isOpen ? 0 : -1}
               aria-pressed={active}
               aria-label={`Skin tone ${skinTonesNamed[skinToneVariation as SkinTones]
                 }`}

diff --git a/src/hooks/useKeyboardNavigation.ts b/src/hooks/useKeyboardNavigation.ts
@@ -43,7 +43,7 @@ import {
   useIsSkinToneInSearch
 } from './useShouldShowSkinTonePicker';
 
-enum KeyboardEvents {
+export enum KeyboardEvents {
   ArrowDown = 'ArrowDown',
   ArrowUp = 'ArrowUp',
   ArrowLeft = 'ArrowLeft',

diff --git a/src/index.tsx b/src/index.tsx
@@ -16,7 +16,7 @@ export {
   SkinTonePickerLocation
 } from './types/exposedTypes';
 
-export interface Props extends PickerConfig {}
+export interface Props extends PickerConfig { }
 
 export default function EmojiPicker(props: Props) {
   return (