[a11y] Update dropdown component for keyboard usage

src/shared-components/dropdown/__snapshots__/test.js.snap → src/shared-components/dropdown/__snapshots__/test.tsx.snap

@@ -40,6 +40,9 @@ exports[`<MobileDropdown /> UI snapshots renders correctly 1`] = `
 
 .emotion-0:focus {
   outline: none;
+  box-shadow: 0 1px 3px 0 rgba(51,46,84,0.15);
+  -webkit-transition: 200ms ease-in-out;
+  transition: 200ms ease-in-out;
 }
 
 .emotion-0::-moz-focus-inner {

src/shared-components/dropdown/desktopDropdown.tsx

@@ -0,0 +1,151 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { css } from '@emotion/core';
+import useResetFocus from 'src/utils/accessibility/useResetFocus';
+
+import OffClickWrapper from '../offClickWrapper';
+import ChevronIcon from '../../svgs/icons/chevron-icon.svg';
+import {
+  DropdownContainer,
+  dropdownInputStyle,
+  IconContainer,
+  DropdownOptionsContainer,
+  DropdownOption,
+} from './style';
+
+import { OptionType } from './index';
+
+type DesktopDropdownProps = {
+  value?: string;
+  options: OptionType[];
+  currentOption: OptionType;
+  textAlign: 'left' | 'center';
+  closeDropdown: () => void;
+  onOptionClick: (event: any) => void;
+  onSelectClick: () => void;
+  isOpen: boolean;
+  optionsContainerMaxHeight?: string;
+};
+
+const DesktopDropdown = ({
+  value,
+  options,
+  textAlign,
+  currentOption,
+  closeDropdown,
+  onOptionClick,
+  onSelectClick,
+  isOpen,
+  optionsContainerMaxHeight,
+}: DesktopDropdownProps) => {
+  const { initialFocus, resetFocus } = useResetFocus<HTMLDivElement>();
+
+  return (
+    <OffClickWrapper
+      onOffClick={closeDropdown}
+      css={css`
+        width: 100%;
+      `}
+    >
+      <DropdownContainer textAlign={textAlign}>
+        <div
+          id="select-input-box"
+          onClick={onSelectClick}
+          onKeyDown={(event: React.KeyboardEvent) => {
+            if (event.key === 'Enter') {
+              onSelectClick();
+            }
+          }}
+          tabIndex={0}
+          aria-label="Open dropdown option"
+          aria-haspopup="listbox"
+          role="button"
+          ref={initialFocus}
+        >
+          <div css={dropdownInputStyle({ textAlign })}>
+            {currentOption && currentOption.label}
+          </div>
+          <IconContainer>
+            <ChevronIcon width={10} height={10} rotate={isOpen ? 90 : 0} />
+          </IconContainer>
+        </div>
+
+        <DropdownOptionsContainer
+          isOpen={isOpen}
+          optionsContainerMaxHeight={optionsContainerMaxHeight}
+          role="listbox"
+          aria-activedescendant={value}
+          tabIndex={isOpen ? 0 : -1}
+          aria-labelledby="select-input-box"
+        >
+          {options.map(option => {
+            const {
+              value: optionValue, disabled, label, ...rest 
+            } = option;
+
+            return (
+              <DropdownOption
+                key={optionValue}
+                value={optionValue}
+                selected={value === optionValue}
+                disabled={!!disabled}
+                onClick={onOptionClick}
+                onKeyDown={event => {
+                  if (event.key === 'Enter') {
+                    onOptionClick(event);
+                    resetFocus();
+                  }
+                }}
+                role="option"
+                aria-selected={value === optionValue}
+                tabIndex={isOpen && !disabled ? 0 : -1}
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...rest}
+              >
+                {label}
+              </DropdownOption>
+            );
+          })}
+        </DropdownOptionsContainer>
+      </DropdownContainer>
+    </OffClickWrapper>
+  );
+};
+
+DesktopDropdown.defaultProps = {
+  value: undefined,
+  options: [{ value: null, label: '' }],
+  currentOption: { value: null, label: '' },
+  textAlign: 'left',
+  closeDropdown: () => undefined,
+  onOptionClick: () => undefined,
+  onSelectClick: () => undefined,
+  isOpen: false,
+};
+
+DesktopDropdown.propTypes = {
+  // eslint-disable-next-line react/forbid-prop-types
+  value: PropTypes.any,
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      // eslint-disable-next-line react/forbid-prop-types
+      value: PropTypes.any,
+      label: PropTypes.string,
+      disabled: PropTypes.bool,
+    }),
+  ),
+  textAlign: PropTypes.oneOf(['left', 'center']),
+  currentOption: PropTypes.shape({
+    // eslint-disable-next-line react/forbid-prop-types
+    value: PropTypes.any,
+    label: PropTypes.string,
+    disabled: PropTypes.bool,
+  }),
+  closeDropdown: PropTypes.func,
+  onOptionClick: PropTypes.func,
+  onSelectClick: PropTypes.func,
+  isOpen: PropTypes.bool,
+  optionsContainerMaxHeight: PropTypes.string.isRequired,
+};
+
+export default DesktopDropdown;

src/shared-components/dropdown/index.js → src/shared-components/dropdown/index.tsx

@@ -5,6 +5,20 @@ import MobileDropdown from './mobileDropdown';
 import DesktopDropdown from './desktopDropdown';
 import allowNullPropType from '../../utils/allowNullPropType';
 
+export type OptionType = {
+  value: string;
+  label: string;
+  disabled?: boolean;
+};
+
+type DropdownProps = {
+  value?: string;
+  onChange: (option: OptionType) => void;
+  options: OptionType[];
+  optionsContainerMaxHeight?: string;
+  textAlign: 'left' | 'center';
+};
+
 const defaultProps = {
   textAlign: 'left',
   onChange: () => undefined,
@@ -28,7 +42,11 @@ const propTypes = {
   optionsContainerMaxHeight: PropTypes.string,
 };
 
-class Dropdown extends React.Component {
+class Dropdown extends React.Component<DropdownProps> {
+  static defaultProps = defaultProps;
+
+  static propTypes = propTypes;
+
   state = { isOpen: false };
 
   onSelectClick = () => {
@@ -37,10 +55,10 @@ class Dropdown extends React.Component {
     this.setState({ isOpen: !isOpen });
   };
 
-  onSelectChange = event => {
+  onSelectChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
     const { onChange } = this.props;
-
-    const { value, selectedOptions } = event.target;
+    const {target} = event;
+    const { value, selectedOptions } = target;
 
     if (selectedOptions && selectedOptions.length) {
       const { label } = selectedOptions[0];
@@ -50,15 +68,15 @@ class Dropdown extends React.Component {
     this.closeDropdown();
   };
 
-  onOptionClick = event => {
+  onOptionClick = (event: React.MouseEvent<HTMLLIElement>) => {
     const { onChange } = this.props;
-
-    if (event.target.hasAttribute('disabled')) {
+    const target = event.target as HTMLSelectElement;
+    if (target.hasAttribute('disabled')) {
       return;
     }
 
-    const value = event.target.getAttribute('value');
-    const label = event.target.innerText;
+    const value = target.getAttribute('value') as string;
+    const label = target.innerText;
     onChange({ value, label });
     this.closeDropdown();
   };
@@ -95,7 +113,4 @@ class Dropdown extends React.Component {
   }
 }
 
-Dropdown.defaultProps = defaultProps;
-Dropdown.propTypes = propTypes;
-
 export default Dropdown;

src/shared-components/dropdown/mobileDropdown.js → src/shared-components/dropdown/mobileDropdown.tsx

@@ -4,9 +4,21 @@ import PropTypes from 'prop-types';
 import ChevronIcon from '../../svgs/icons/chevron-icon.svg';
 import { DropdownContainer, dropdownInputStyle, IconContainer } from './style';
 
+import { OptionType } from './index';
+
+type MobileDropdownProps = {
+  value: string | null;
+  options: OptionType[];
+  textAlign: 'left' | 'center';
+  onSelectChange: (event: any) => void;
+};
+
 const MobileDropdown = ({
-  textAlign, value, onSelectChange, options, 
-}) => (
+  textAlign,
+  value,
+  onSelectChange,
+  options,
+}: MobileDropdownProps) => (
   <DropdownContainer textAlign={textAlign}>
     <select
       css={dropdownInputStyle({ textAlign })}
@@ -39,7 +51,7 @@ MobileDropdown.defaultProps = {
   value: null,
   options: [{ value: null, label: '' }],
   textAlign: 'left',
-  onSelectChange() {},
+  onSelectChange: () => undefined,
 };
 
 MobileDropdown.propTypes = {
@@ -51,7 +63,7 @@ MobileDropdown.propTypes = {
       value: PropTypes.any,
       label: PropTypes.string,
       disabled: PropTypes.bool,
-    })
+    }),
   ),
   textAlign: PropTypes.oneOf(['left', 'center']),
   onSelectChange: PropTypes.func,