@moda/om 21.6.9 → 21.6.11

package/src/components/Select/SelectOption.tsx

@@ -7,6 +7,7 @@ import { SelectableOption } from './Select';
 import './SelectOption.scss';
 
 export type SelectOptionProps = Omit<React.HTMLAttributes<HTMLLIElement>, 'onClick'> & {
+  id?: string;
   active: boolean;
   selected: boolean;
   option: SelectableOption;
@@ -15,6 +16,7 @@ export type SelectOptionProps = Omit<React.HTMLAttributes<HTMLLIElement>, 'onCli
 };
 
 export const SelectOption: React.FC<SelectOptionProps> = ({
+  id,
   active,
   selected,
   option,
@@ -42,6 +44,7 @@ export const SelectOption: React.FC<SelectOptionProps> = ({
 
   return (
     <li
+      id={id}
       ref={ref}
       className={classNames('SelectOption', className, {
         'SelectOption--active': active,
@@ -50,8 +53,8 @@ export const SelectOption: React.FC<SelectOptionProps> = ({
       })}
       onClick={handleClick}
       data-test-id={dataTestId ? `${dataTestId}--${label.replace(' ', '-')}` : undefined}
-      aria-label={label}
       aria-selected={selected}
+      aria-disabled={disabled || undefined}
       role='option'
     >
       {colorSwatch && (

package/src/components/Select/SelectOptions.tsx

@@ -78,12 +78,17 @@ export const SelectOptions: React.FC<SelectOptionsProps> = ({
       )}
 
       <ul
+        id={`Select__listbox--${idRef}`}
         className='SelectOptions__list'
         tabIndex={-1}
         role='listbox'
         ref={ref}
-        aria-labelledby={`Select__label${idRef ? `--${idRef}` : ''}`}
-        aria-activedescendant={`SelectOption--${activeOption?.value}${idRef ? `-${idRef}` : ''}`}
+        aria-label='Options'
+        aria-activedescendant={
+          activeOption
+            ? `SelectOption--${activeOption.value}${idRef ? `-${idRef}` : ''}`
+            : undefined
+        }
         {...rest}
       >
         {options.map(option => (

package/src/components/Select/useSelect.ts

@@ -19,12 +19,12 @@ type Action =
   | { type: 'SELECT'; payload: { value: string | string[] } }
   | { type: 'FOCUS'; payload: { value: string } };
 
-const reducer = (state: State, action: Action) => {
+const reducer = (state: State, action: Action): State => {
   switch (action.type) {
     case 'OPEN':
       return { ...state, mode: Mode.Open };
     case 'CLOSE':
-      return { ...state, mode: Mode.Resting };
+      return { ...state, mode: Mode.Resting, focused: undefined };
     case 'SELECT':
       return {
         ...state,
@@ -44,6 +44,7 @@ interface UseSelectProps {
 
 export const useSelect = ({ value, defaultValue }: UseSelectProps) => {
   const selectRef = useRef<HTMLDivElement>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
 
   const initialValue = value ?? defaultValue;
 
@@ -57,7 +58,9 @@ export const useSelect = ({ value, defaultValue }: UseSelectProps) => {
     switch (event.key) {
       case 'Escape': {
         event.preventDefault();
-        return dispatch({ type: 'CLOSE' });
+        dispatch({ type: 'CLOSE' });
+        buttonRef.current?.focus();
+        break;
       }
       default:
         break;
@@ -81,5 +84,5 @@ export const useSelect = ({ value, defaultValue }: UseSelectProps) => {
     dispatch({ type: 'SELECT', payload: { value: value ?? '' } });
   }, [value]);
 
-  return { state, dispatch, Mode, selectRef };
+  return { state, dispatch, Mode, selectRef, buttonRef };
 };