the-via · ungjinPark · Aug 30, 2024 · Aug 30, 2024 · Sep 2, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/inputs/accent-button.tsx b/src/components/inputs/accent-button.tsx
@@ -36,6 +36,9 @@ export const AccentButton = styled(AccentButtonBase)`
   &:hover {
     filter: brightness(0.7);
   }
+  &:focus {
+    filter: brightness(0.7);
+  }
 `;
 export const AccentButtonLarge = styled(AccentButton)`
   font-size: 24px;

diff --git a/src/components/inputs/accent-slider.tsx b/src/components/inputs/accent-slider.tsx
@@ -43,6 +43,7 @@ const Slider = styled.span<{$ischecked?: boolean}>`
 
 type Props = {
   isChecked: boolean;
+  id?:string
   onChange: (val: boolean) => void;
 };
 
@@ -70,6 +71,8 @@ export function AccentSlider(props: Props) {
     <Switch>
       <HiddenInput
         ref={ref}
+        role='switch'
+        id={props.id}
         type="checkbox"
         checked={isHiddenChecked}
         onChange={hiddenOnChange}

diff --git a/src/components/inputs/accent-upload-button.tsx b/src/components/inputs/accent-upload-button.tsx
@@ -5,6 +5,8 @@ type Props = {
   multiple?: boolean;
   inputRef?: React.MutableRefObject<HTMLInputElement | undefined>;
   children: string;
+  describedby?: string;
+  description?: string;
 };
 
 export function AccentUploadButton(props: Props) {
@@ -14,7 +16,7 @@ export function AccentUploadButton(props: Props) {
     (input.current as any).value = null;
   }
   return (
-    <AccentButton onClick={() => input.current && input.current.click()}>
+    <AccentButton aria-describedby={props.describedby} aria-description={props.description} onClick={() => input.current && input.current.click()}>
       {props.children}
       <input
         ref={input as any}

diff --git a/src/components/menus/global.tsx b/src/components/menus/global.tsx
@@ -40,7 +40,10 @@ export const UnconnectedGlobalMenu = () => {
         if (pane.key === 'debug' && !showDebugPane) return null;
         return (
           <Link key={pane.key} to={pane.path}>
-            <CategoryIconContainer $selected={pane.path === location}>
+            <CategoryIconContainer $selected={pane.path === location}
+            role='link'
+            tabIndex={0}
+            aria-current={pane.path === location ? "page" : "false"}>
               <FontAwesomeIcon size={'xl'} icon={pane.icon} />
               <CategoryMenuTooltip>{pane.title}</CategoryMenuTooltip>
             </CategoryIconContainer>

diff --git a/src/components/panes/configure-panes/keycode.tsx b/src/components/panes/configure-panes/keycode.tsx
@@ -1,4 +1,4 @@
-import {FC, useState, useEffect, useMemo} from 'react';
+import {FC, useState, useEffect, useMemo, useRef} from 'react';
 import styled from 'styled-components';
 import {Button} from '../../inputs/button';
 import {KeycodeModal} from '../../inputs/custom-keycode-modal';
@@ -73,6 +73,10 @@ const Keycode = styled(Button)<{disabled: boolean}>`
     border-color: var(--color_accent);
     transform: translate3d(0, -2px, 0);
   }
+  &:focus {
+    border-color: var(--color_accent);
+    transform: translate3d(0, -2px, 0);
+  }
   ${(props: any) => props.disabled && `cursor:not-allowed;filter:opacity(50%);`}
 `;
 
@@ -213,13 +217,44 @@ export const KeycodePane: FC = () => {
   };
 
   const renderCategories = () => {
+    const [focusedTab,setTabFocus] = useState(0);
+    const [didMount,mount] = useState(false);
+    const categoryTabRefs = useRef<HTMLDivElement[]>([]);
+    useEffect(()=>{didMount || mount(true)});
+    useEffect(()=>{
+      if (didMount){ 
+        categoryTabRefs.current[focusedTab]?.focus();
+        categoryTabRefs.current[focusedTab]?.click();
+        categoryTabRefs.current[focusedTab]?.scrollIntoView({block:"nearest"});
+      }
+    },[focusedTab]);
+    const availableMenus = getEnabledMenus();
+
     return (
-      <MenuContainer>
-        {getEnabledMenus().map(({id, label}) => (
+      <MenuContainer role='tablist'>
+        {availableMenus.map(({id, label},idx) => (
           <SubmenuRow
+          onKeyDown={(e)=>{
+            switch(e.code) {
+              case "ArrowUp":
+              case "ArrowLeft":
+                e.preventDefault();
+                setTabFocus(idx - 1 > -1 ? idx - 1 :  availableMenus.length-1 )
+                break;
+              case "ArrowDown":
+              case "ArrowRight":
+                e.preventDefault();
+                setTabFocus(idx + 1 < availableMenus.length ? idx + 1 :  0)
+                break;
+            }
+          }}
+            ref={(r)=>{ categoryTabRefs.current[idx] = r! }}
             $selected={id === selectedCategory}
             onClick={() => setSelectedCategory(id)}
+            aria-selected={id === selectedCategory}
             key={id}
+            tabIndex={id === selectedCategory ? 0 : -1}
+            role='tab'
           >
             {label}
           </SubmenuRow>
@@ -279,10 +314,22 @@ export const KeycodePane: FC = () => {
       <Keycode
         key={code}
         disabled={!keycodeInMaster(code, basicKeyToByte) && code != 'text'}
+        onKeyDown={(e)=>{
+          switch(e.code){
+            case "Space":
+            case "Enter":
+              e.currentTarget.click();
+              break;
+          }
+        }}
         onClick={() => handleClick(code, index)}
         onMouseOver={() => setMouseOverDesc(title ? `${code}: ${title}` : code)}
         onMouseOut={() => setMouseOverDesc(null)}
-      >
+        role='button'
+        tabIndex={0}
+        aria-label={name ? name : "Nothing"}
+        aria-roledescription={title ? `${code}: ${title}` : code}>
+
         <KeycodeContent>{name}</KeycodeContent>
       </Keycode>
     );
@@ -291,6 +338,16 @@ export const KeycodePane: FC = () => {
   const renderCustomKeycode = () => {
     return (
       <CustomKeycode
+        onKeyDown={(e)=>{
+          switch(e.code){
+            case "Space":
+            case "Enter":
+              e.currentTarget.click();
+              break;
+          }
+        }}
+        role='button'
+        tabIndex={0}
         key="customKeycode"
         onClick={() => selectedKey !== null && handleClick('text', 0)}
         onMouseOver={() => setMouseOverDesc('Enter any QMK Keycode')}
@@ -313,12 +370,12 @@ export const KeycodePane: FC = () => {
         return !macros.isFeatureSupported ? (
           renderMacroError()
         ) : (
-          <KeycodeList>{keycodeListItems}</KeycodeList>
+          <KeycodeList role='region' aria-label='Mecro keycodes'>{keycodeListItems}</KeycodeList>
         );
       }
       case 'special': {
         return (
-          <KeycodeList>
+          <KeycodeList role='region' aria-label='Special keycodes'>
             {keycodeListItems.concat(renderCustomKeycode())}
           </KeycodeList>
         );
@@ -332,7 +389,7 @@ export const KeycodePane: FC = () => {
           return null;
         }
         return (
-          <KeycodeList>
+          <KeycodeList role='region' aria-label='Custom keycodes'>
             {selectedDefinition.customKeycodes.map((keycode, idx) => {
               return renderKeycode(
                 {
@@ -346,7 +403,7 @@ export const KeycodePane: FC = () => {
         );
       }
       default: {
-        return <KeycodeList>{keycodeListItems}</KeycodeList>;
+        return <KeycodeList role='region' aria-label='Keycodes'>{keycodeListItems}</KeycodeList>;
       }
     }
   };

diff --git a/src/components/panes/configure-panes/layer-control.tsx b/src/components/panes/configure-panes/layer-control.tsx
@@ -1,4 +1,4 @@
-import {useMemo} from 'react';
+import {useEffect, useMemo, useRef, useState} from 'react';
 import {useDispatch} from 'react-redux';
 import {useAppSelector} from 'src/store/hooks';
 import {
@@ -21,7 +21,6 @@ const Label = styled.label`
   margin-right: 6px;
 `;
 const LayerButton = styled.button<{$selected?: boolean}>`
-  outline: none;
   font-variant-numeric: tabular-nums;
   border: none;
   background: ${(props) =>
@@ -39,32 +38,64 @@ const LayerButton = styled.button<{$selected?: boolean}>`
     color: ${(props) =>
       props.$selected ? 'auto' : 'var(--color_label-highlighted)'};
   }
+  &:focus {
+    border: none;
+    background: ${(props) => (props.$selected ? 'auto' : 'var(--bg_menu)')};
+    color: ${(props) =>
+      props.$selected ? 'auto' : 'var(--color_label-highlighted)'};
+  }
 `;
 
 export const LayerControl = () => {
   const dispatch = useDispatch();
+  const [layerTabFocus,setLayerTabFocus] = useState(0);
+  const [didMount,mount] = useState(false);
+  const layerTabRef = useRef<HTMLButtonElement[]>([]);
   const numberOfLayers = useAppSelector(getNumberOfLayers);
   const selectedLayerIndex = useAppSelector(getSelectedLayerIndex);
-
+
+  useEffect(()=>{didMount || mount(true);});
+  useEffect(()=>{ 
+    if(didMount) {
+      layerTabRef.current[layerTabFocus]?.focus();
+      layerTabRef.current[layerTabFocus]?.click();
+    }
+  },[layerTabFocus])
   const Layers = useMemo(
     () =>
       new Array(numberOfLayers)
         .fill(0)
         .map((_, idx) => idx)
-        .map((layerLabel) => (
+        .map((layerLabel,idx) => (
           <LayerButton
+            ref={(r)=>{
+              layerTabRef.current[idx] = r!
+
+            }}
+            role='tab'
+            onKeyDown={(e)=>{
+              switch(e.code) {
+                case "ArrowUp":
+                case "ArrowLeft":
+                  setLayerTabFocus(idx - 1 > -1 ? idx - 1 :  numberOfLayers-1 )
+                  break;
+                case "ArrowDown":
+                case "ArrowRight":
+                  setLayerTabFocus(idx + 1 < numberOfLayers ? idx + 1 :  0)
+                  break;
+              }
+            }}
             key={layerLabel}
             $selected={layerLabel === selectedLayerIndex}
-            onClick={() => dispatch(setLayer(layerLabel))}
-          >
+            onClick={() => dispatch(setLayer(layerLabel))}>
             {layerLabel}
           </LayerButton>
         )),
     [numberOfLayers, selectedLayerIndex],
   );
 
   return (
-    <Container>
+    <Container role='tablist' aria-label='Keyboard Layers'>
       <Label>Layer</Label>
       {Layers}
     </Container>

diff --git a/src/components/panes/configure-panes/save-load.tsx b/src/components/panes/configure-panes/save-load.tsx
@@ -247,15 +247,17 @@ export const Pane: FC = () => {
       <SaveLoadPane>
         <Container>
           <ControlRow>
-            <Label>Save Current Layout</Label>
+            <Label id='label_save'>Save Current Layout</Label>
             <Detail>
-              <AccentButton onClick={saveLayout}>Save</AccentButton>
+              <AccentButton onClick={saveLayout} aria-describedby='label_save'>Save</AccentButton>
             </Detail>
           </ControlRow>
           <ControlRow>
-            <Label>Load Saved Layout</Label>
+            <Label id="label_load">Load Saved Layout</Label>
             <Detail>
-              <AccentUploadButton onLoad={loadLayout}>Load</AccentUploadButton>
+              <AccentUploadButton 
+              describedby='label_load'
+              onLoad={loadLayout}>Load</AccentUploadButton>
             </Detail>
           </ControlRow>
           {errorMessage ? <ErrorMessage>{errorMessage}</ErrorMessage> : null}

diff --git a/src/components/panes/configure.tsx b/src/components/panes/configure.tsx
@@ -1,4 +1,4 @@
-import React, {useState, useEffect} from 'react';
+import React, {useState, useEffect, useRef} from 'react';
 import {faPlus} from '@fortawesome/free-solid-svg-icons';
 import styled from 'styled-components';
 import ChippyLoader from '../chippy-loader';
@@ -219,15 +219,26 @@ const ConfigureGrid = () => {
   const KeyboardRows = getRowsForKeyboard();
   const SelectedPane = KeyboardRows[selectedRow]?.Pane;
   const selectedTitle = KeyboardRows[selectedRow]?.Title;
-
+  const [didMount,mount] = useState(false);
+  const [focusedTab,setTabFocus] = useState(0);
+  const tabRefs = useRef<HTMLDivElement[]>([]);
   useEffect(() => {
     if (selectedTitle !== 'Keymap') {
       dispatch(setConfigureKeyboardIsSelectable(false));
     } else {
       dispatch(setConfigureKeyboardIsSelectable(true));
     }
   }, [selectedTitle]);
+
+  useEffect(()=>{didMount || mount(true);})
+  useEffect(()=>{ // keyboard navigation
+    if (didMount) { 
+      tabRefs.current[focusedTab]?.focus();
+      tabRefs.current[focusedTab]?.click();
+    }
+  },[focusedTab]);
 
+  const menuItems = (KeyboardRows || [])
   return (
     <>
       <ConfigureFlexCell
@@ -250,11 +261,27 @@ const ConfigureGrid = () => {
       </ConfigureFlexCell>
       <Grid style={{pointerEvents: 'none'}}>
         <MenuCell style={{pointerEvents: 'all'}}>
-          <MenuContainer>
-            {(KeyboardRows || []).map(
+          <MenuContainer role='tablist' aria-label='Configure Menu'>
+            {menuItems.map(
               ({Icon, Title}: {Icon: any; Title: string}, idx: number) => (
                 <Row
                   key={idx}
+                  role='tab'
+                  onKeyDown={(e)=>{
+                    switch(e.code) {
+                      case "ArrowUp":
+                      case "ArrowLeft":
+                        setTabFocus(idx - 1 > -1 ? idx - 1 :  menuItems.length-1 )
+                        break;
+                      case "ArrowDown":
+                      case "ArrowRight":
+                        setTabFocus(idx + 1 < menuItems.length ? idx + 1 :  0)
+                        break;
+                    }
+                  }}
+                  ref={(r)=>{tabRefs.current[idx] = r!;}}
+                  aria-selected={selectedRow === idx}
+                  tabIndex={selectedRow === idx ? 0 : -1}
                   onClick={(_) => setRow(idx)}
                   $selected={selectedRow === idx}
                 >
@@ -272,4 +299,4 @@ const ConfigureGrid = () => {
       </Grid>
     </>
   );
-};
+};