Merge pull request #504 from Lemoncode/fixaccessibilitybug/custom-select

Fixaccessibilitybug/custom select

Author: brauliodiez

src/common/a11y/click-outside.hook.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+
+export const useClickOutside = (
+  isOpen: boolean,
+  ref: React.RefObject<HTMLElement>,
+  callback: (e: MouseEvent) => void
+) => {
+  const handleClickOutside = (e: MouseEvent) => {
+    callback(e);
+  };
+
+  React.useEffect(() => {
+    ref.current?.addEventListener('click', handleClickOutside);
+
+    return () => {
+      ref.current?.removeEventListener('click', handleClickOutside);
+    };
+  }, [isOpen]);
+};

src/common/a11y/common.model.ts

@@ -0,0 +1,15 @@
+export type BaseA11yOption<Option> = Option & {
+  tabIndex: number;
+};
+
+export type NestedOption<Option> = {
+  id: string;
+  children?: Option[];
+};
+
+export type FlatOption<Option extends NestedOption<Option>> = Omit<
+  Option,
+  'children'
+> & {
+  parentId?: string;
+};

src/common/a11y/focus.common-helpers.ts

@@ -0,0 +1,13 @@
+export const getArrowUpIndex = (currentIndex: number) => {
+  const isFirstOption = currentIndex === 0;
+  return isFirstOption ? currentIndex : currentIndex - 1;
+};
+
+export const getArrowDownIndex = (currentIndex: number, options: any[]) => {
+  const isLastOption = currentIndex === options.length - 1;
+  return isLastOption ? currentIndex : currentIndex + 1;
+};
+
+export const getFocusedOption = <FocusableOption extends { tabIndex: number }>(
+  options: FocusableOption[]
+) => options.find(option => option.tabIndex === 0);

src/common/a11y/index.ts

@@ -0,0 +1,6 @@
+export * from './select';
+export * from './nested-select';
+export * from './on-key.hook';
+export * from './focus.common-helpers';
+export * from './nested-list';
+export * from './common.model';

src/common/a11y/list/focus.helpers.ts

@@ -0,0 +1,26 @@
+import { BaseA11yOption } from '../common.model';
+
+export const setInitialFocus = <
+  Option,
+  A11yOption extends BaseA11yOption<Option>,
+>(
+  options: Option[]
+): A11yOption[] => {
+  const a11ySelectionOptions = options.map<A11yOption>(
+    (option, index) =>
+      ({
+        ...option,
+        tabIndex: index === 0 ? 0 : -1,
+      }) as unknown as A11yOption
+  );
+
+  return a11ySelectionOptions;
+};
+
+export const onFocusOption =
+  <Option>(option: BaseA11yOption<Option>) =>
+  (element: any) => {
+    if (option.tabIndex === 0) {
+      element?.focus();
+    }
+  };

src/common/a11y/list/index.ts

@@ -0,0 +1,2 @@
+export * from './list.hooks';
+export * from './list.model';

src/common/a11y/list/list.hooks.ts

@@ -0,0 +1,95 @@
+import React from 'react';
+import { BaseA11yOption } from '../common.model';
+import { getArrowDownIndex, getArrowUpIndex } from '../focus.common-helpers';
+import { useOnKey } from '../on-key.hook';
+import { onFocusOption, setInitialFocus } from './focus.helpers';
+import { SetInitialFocusFn } from './list.model';
+import { useOnTwoKeys } from '../on-two-Keys.hook';
+
+export const useA11yList = <Option, A11yOption extends BaseA11yOption<Option>>(
+  options: Option[],
+  onSetInitialFocus: SetInitialFocusFn<Option, A11yOption> = setInitialFocus
+) => {
+  const optionListRef = React.useRef<any>(null);
+  const [internalOptions, setInternalOptions] = React.useState<A11yOption[]>(
+    onSetInitialFocus(options)
+  );
+
+  const handleFocus = (event: KeyboardEvent) => {
+    const currentIndex = internalOptions.findIndex(
+      option => option.tabIndex === 0
+    );
+    const nextIndex =
+      event.key === 'ArrowUp'
+        ? getArrowUpIndex(currentIndex)
+        : getArrowDownIndex(currentIndex, internalOptions);
+
+    if (currentIndex !== nextIndex) {
+      setInternalOptions(prevOptions =>
+        prevOptions.map((option, index) => {
+          switch (index) {
+            case currentIndex:
+              return {
+                ...option,
+                tabIndex: -1,
+              };
+            case nextIndex:
+              return {
+                ...option,
+                tabIndex: 0,
+              };
+            default:
+              return option;
+          }
+        })
+      );
+    }
+  };
+
+  const handleFirstAndLast = (value: number) => {
+    setInternalOptions(prevOptions =>
+      prevOptions.map((option, index) => {
+        switch (index) {
+          case value:
+            return {
+              ...option,
+              tabIndex: 0,
+            };
+          default:
+            return {
+              ...option,
+              tabIndex: -1,
+            };
+        }
+      })
+    );
+  };
+
+  //Need this for Mac users
+  useOnTwoKeys(
+    optionListRef,
+    ['ArrowUp', 'ArrowDown'],
+    'Meta',
+    (event: KeyboardEvent) =>
+      event.key === 'ArrowUp'
+        ? handleFirstAndLast(0)
+        : handleFirstAndLast(internalOptions.length - 1)
+  );
+
+  useOnKey(optionListRef, ['ArrowDown', 'ArrowUp'], (event: KeyboardEvent) => {
+    handleFocus(event);
+  });
+
+  useOnKey(optionListRef, ['Home', 'End'], (event: KeyboardEvent) =>
+    event.key === 'Home'
+      ? handleFirstAndLast(0)
+      : handleFirstAndLast(internalOptions.length - 1)
+  );
+
+  return {
+    optionListRef,
+    options: internalOptions,
+    setOptions: setInternalOptions,
+    onFocusOption,
+  };
+};

src/common/a11y/list/list.model.ts

@@ -0,0 +1,3 @@
+export type SetInitialFocusFn<Option, A11yOption> = (
+  options: Option[]
+) => A11yOption[];

src/common/a11y/nested-list/index.ts

@@ -0,0 +1,2 @@
+export * from './nested-list.hooks';
+export * from './nested-list.model';

src/common/a11y/nested-list/nested-list.hooks.ts

@@ -0,0 +1,29 @@
+import {
+  mapFlatOptionsToNestedListOptions,
+  mapNestedListOptionsToFlatOptions,
+} from './nested-list.mappers';
+import { NestedOption } from '../common.model';
+import { useA11yNested } from '../nested.hooks';
+import { useA11yList } from '../list';
+
+export const useA11yNestedList = <Option extends NestedOption<Option>>(
+  options: Option[]
+) => {
+  const flatOptions = mapNestedListOptionsToFlatOptions(options);
+
+  const {
+    optionListRef,
+    options: internalOptions,
+    setOptions,
+    onFocusOption,
+  } = useA11yList(flatOptions);
+
+  useA11yNested(optionListRef, internalOptions, setOptions);
+
+  return {
+    optionListRef,
+    options: mapFlatOptionsToNestedListOptions(internalOptions),
+    setOptions,
+    onFocusOption,
+  };
+};