[ARIA] Add more Accessible Tags in Input and MenuList

Added combo box role for Input item, listbox role to MenuList and option role to MenuItems. Added relationship between elements by ID. Signed-off-by: Progyan Bhattacharya <bprogyan@gmail.com>
JedWatson · Dec 9, 2020 · 890b5f2 · 890b5f2
1 parent 998c979
commit 890b5f2
Show file tree

Hide file tree

Showing 8 changed files with 23 additions and 1 deletion.
diff --git a/packages/react-select/src/Select.js b/packages/react-select/src/Select.js
@@ -1420,9 +1420,12 @@ export default class Select extends Component<Props, State> {
     const { inputIsHidden } = this.state;
 
     const id = inputId || this.getElementId('input');
+    const listBoxId = this.getElementId('listbox');
 
     // aria attributes makes the JSX "noisy", separated for clarity
     const ariaAttributes = {
+      role: 'combobox',
+      'aria-owns': listBoxId,
       'aria-autocomplete': 'list',
       'aria-label': this.props['aria-label'],
       'aria-labelledby': this.props['aria-labelledby'],
@@ -1727,6 +1730,8 @@ export default class Select extends Component<Props, State> {
       menuShouldScrollIntoView,
     };
 
+    const listBoxId = this.getElementId('listbox');
+
     const menuElement = (
       <MenuPlacer {...commonProps} {...menuPlacementProps}>
         {({ ref, placerProps: { placement, maxHeight } }) => (
@@ -1749,6 +1754,7 @@ export default class Select extends Component<Props, State> {
               <ScrollBlock isEnabled={menuShouldBlockScroll}>
                 <MenuList
                   {...commonProps}
+                  id={listBoxId}
                   innerRef={this.getMenuListRef}
                   isLoading={isLoading}
                   maxHeight={maxHeight}

diff --git a/packages/react-select/src/__tests__/__snapshots__/Async.test.js.snap b/packages/react-select/src/__tests__/__snapshots__/Async.test.js.snap
@@ -160,10 +160,12 @@ exports[`defaults - snapshot 1`] = `
           >
             <input
               aria-autocomplete="list"
+              aria-owns="react-select-2-listbox"
               autocapitalize="none"
               autocomplete="off"
               autocorrect="off"
               id="react-select-2-input"
+              role="combobox"
               spellcheck="false"
               style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
               tabindex="0"

diff --git a/packages/react-select/src/__tests__/__snapshots__/AsyncCreatable.test.js.snap b/packages/react-select/src/__tests__/__snapshots__/AsyncCreatable.test.js.snap
@@ -160,10 +160,12 @@ exports[`defaults - snapshot 1`] = `
           >
             <input
               aria-autocomplete="list"
+              aria-owns="react-select-2-listbox"
               autocapitalize="none"
               autocomplete="off"
               autocorrect="off"
               id="react-select-2-input"
+              role="combobox"
               spellcheck="false"
               style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
               tabindex="0"

diff --git a/packages/react-select/src/__tests__/__snapshots__/Creatable.test.js.snap b/packages/react-select/src/__tests__/__snapshots__/Creatable.test.js.snap
@@ -160,10 +160,12 @@ exports[`defaults - snapshot 1`] = `
           >
             <input
               aria-autocomplete="list"
+              aria-owns="react-select-2-listbox"
               autocapitalize="none"
               autocomplete="off"
               autocorrect="off"
               id="react-select-2-input"
+              role="combobox"
               spellcheck="false"
               style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
               tabindex="0"

diff --git a/packages/react-select/src/__tests__/__snapshots__/Select.test.js.snap b/packages/react-select/src/__tests__/__snapshots__/Select.test.js.snap
@@ -160,10 +160,12 @@ exports[`snapshot - defaults 1`] = `
           >
             <input
               aria-autocomplete="list"
+              aria-owns="react-select-2-listbox"
               autocapitalize="none"
               autocomplete="off"
               autocorrect="off"
               id="react-select-2-input"
+              role="combobox"
               spellcheck="false"
               style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
               tabindex="0"

diff --git a/packages/react-select/src/__tests__/__snapshots__/StateManaged.test.js.snap b/packages/react-select/src/__tests__/__snapshots__/StateManaged.test.js.snap
@@ -160,10 +160,12 @@ exports[`defaults > snapshot 1`] = `
           >
             <input
               aria-autocomplete="list"
+              aria-owns="react-select-2-listbox"
               autocapitalize="none"
               autocomplete="off"
               autocorrect="off"
               id="react-select-2-input"
+              role="combobox"
               spellcheck="false"
               style="box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;"
               tabindex="0"

diff --git a/packages/react-select/src/components/Menu.js b/packages/react-select/src/components/Menu.js
@@ -350,6 +350,8 @@ export type MenuListProps = {
   children: Node,
   /** Inner ref to DOM Node */
   innerRef: InnerRef,
+  /** ID of DOM Element */
+  id?: string,
 };
 export type MenuListComponentProps = CommonProps &
   MenuListProps &
@@ -368,9 +370,11 @@ export const menuListCSS = ({
   WebkitOverflowScrolling: 'touch',
 });
 export const MenuList = (props: MenuListComponentProps) => {
-  const { children, className, cx, getStyles, isMulti, innerRef } = props;
+  const { children, className, cx, getStyles, isMulti, innerRef, id } = props;
   return (
     <div
+      id={id}
+      role="listbox"
       css={getStyles('menuList', props)}
       className={cx(
         {
@@ -380,6 +384,7 @@ export const MenuList = (props: MenuListComponentProps) => {
         className
       )}
       ref={innerRef}
+      aria-expanded="true"
     >
       {children}
     </div>

diff --git a/packages/react-select/src/components/Option.js b/packages/react-select/src/components/Option.js
@@ -84,6 +84,7 @@ const Option = (props: OptionProps) => {
   } = props;
   return (
     <div
+      role="option"
       css={getStyles('option', props)}
       className={cx(
         {