Merge pull request #8 from AdmitHub/accessibility-review

Changes post accessibility review
AdmitHub · Jan 10, 2023 · d276f4b · d276f4b
2 parents 2680c79 + 7256bb6
commit d276f4b
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/src/components/header/SkinTonePicker.tsx b/src/components/header/SkinTonePicker.tsx
@@ -87,7 +87,10 @@ export function SkinTonePicker({
                 transform: clsx(
                   vertical
                     ? `translateY(-${i * (isOpen ? ITEM_SIZE : 0)}px)`
-                    : `translateX(-${i * (isOpen ? ITEM_SIZE : 0)}px)`,
+                    // library fans out colors to the left of the selected one
+                    // it was requested that the selected one should move left and the rest of the colors should fan out to the right
+                    // to aid with tab-accessibility
+                    : `translateX(${(i * (isOpen ? ITEM_SIZE : 0)) - (isOpen ? ((skinToneVariations.length - 1) * ITEM_SIZE) : 0)}px)`,
                   isOpen && active && 'scale(1.3)'
                 )
               }}

diff --git a/src/hooks/useKeyboardNavigation.ts b/src/hooks/useKeyboardNavigation.ts
@@ -81,14 +81,16 @@ function usePickerMainKeyboardEvents() {
         switch (key) {
           // eslint-disable-next-line no-fallthrough
           case KeyboardEvents.Escape:
-            event.preventDefault();
+            // event.preventDefault()
             if (hasOpenToggles()) {
               closeAllOpenToggles();
+              event.stopPropagation()
               return;
             }
             clearSearch();
             scrollTo(0);
             focusSearchInput();
+            event.stopPropagation()
             break;
         }
       },