Fix a11y errors (#413)

ericgio · Jan 29, 2019 · 6b45fbb · 6b45fbb
1 parent c208e82
commit 6b45fbb
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/src/containers/inputContainer.js b/src/containers/inputContainer.js
@@ -41,7 +41,7 @@ function inputContainer(Input) {
         'aria-autocomplete': multiple ? 'list' : 'both',
         'aria-expanded': isMenuShown,
         'aria-haspopup': 'listbox',
-        'aria-owns': menuId,
+        'aria-owns': isMenuShown ? menuId : '',
         autoComplete: this.props.inputProps.autoComplete || 'nope',
         disabled,
         inputRef,
@@ -63,11 +63,12 @@ function inputContainer(Input) {
       if (multiple) {
         inputProps = {
           ...inputProps,
+          'aria-expanded': undefined,
           inputClassName: className,
           labelKey,
           onRemove,
           renderToken,
-          role: '',
+          role: undefined,
           selected,
         };
       }

diff --git a/test/components/TypeaheadSpec.js b/test/components/TypeaheadSpec.js
@@ -918,6 +918,8 @@ describe('<Typeahead>', () => {
 
   describe('accessibility attributes', () => {
     it('adds an id to the menu for accessibility', () => {
+      expect(getInput(typeahead).prop('aria-owns')).to.equal('');
+
       focus(typeahead);
 
       // Default id.
@@ -937,7 +939,7 @@ describe('<Typeahead>', () => {
 
       // Multi-select
       typeahead.setProps({multiple: true});
-      expect(getInput(typeahead).prop('role')).to.equal('');
+      expect(getInput(typeahead).prop('role')).to.equal(undefined);
     });
 
     it('sets the input `aria-autocomplete` description', () => {
@@ -950,10 +952,15 @@ describe('<Typeahead>', () => {
     });
 
     it('sets the input `aria-expanded` description', () => {
+      // Single-select
       expect(getInput(typeahead).prop('aria-expanded')).to.equal(false);
 
       focus(typeahead);
       expect(getInput(typeahead).prop('aria-expanded')).to.equal(true);
+
+      // Multi-select
+      typeahead.setProps({multiple: true});
+      expect(getInput(typeahead).prop('aria-expanded')).to.equal(undefined);
     });
 
     it('sets the input `aria-activedescendant` description', () => {