Fix a11y issues with inputs (#1306)

* Pass aria-labelledby & aria-label through to multi select input Also remove `type="listbox"` from search input, as that is redundant and axe complains about it. * Only Add aria-controls to multi-select trigger if select is open Otherwise, axe complains that the aria-controls element it refers to doesn't exist. * Add aria-label & aria-labelled-by to single select search input Otherwise, the input has no label. This also removes the role="combobox" from the input, as that is redundant for input type="search" and axe also complains about it. * Add id, aria-label & aria-labelledby to all listboxes Co-authored-by: Francesco Novy <[email protected]>
cibernox · Sep 22, 2022 · ac29f10 · ac29f10
1 parent 8ce6f31
commit ac29f10
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 20 deletions.
diff --git a/addon/components/power-select-multiple/trigger.hbs b/addon/components/power-select-multiple/trigger.hbs
@@ -35,7 +35,6 @@
     <li>
       <input
         type="search"
-        role="combobox"
         class="ember-power-select-trigger-multiple-input"
         aria-activedescendant={{if @select.isOpen @ariaActiveDescendant}}
         aria-haspopup="listbox"
@@ -45,8 +44,10 @@
         autocapitalize="off"
         spellcheck={{false}}
         id="ember-power-select-trigger-multiple-input-{{@select.uniqueId}}"
+        aria-labelledby={{@ariaLabelledBy}}
+        aria-label={{@ariaLabel}}
         value={{@select.searchText}}
-        aria-controls={{@listboxId}}
+        aria-controls={{if @select.isOpen @listboxId}}
         style={{this.triggerMultipleInputStyle}}
         placeholder={{this.maybePlaceholder}}
         disabled={{@select.disabled}}

diff --git a/addon/components/power-select.hbs b/addon/components/power-select.hbs
@@ -81,6 +81,8 @@
             (component 'power-select/placeholder')
           }}
           @ariaActiveDescendant={{concat publicAPI.uniqueId "-" this.highlightedIndex}}
+          @ariaLabelledBy={{@ariaLabelledBy}}
+          @ariaLabel={{@ariaLabel}}
           as |opt term|>
           {{yield opt term}}
         </Trigger>
@@ -109,6 +111,8 @@
             @ariaActiveDescendant={{concat publicAPI.uniqueId "-" this.highlightedIndex}}
             @selectedItemComponent={{ensure-safe-component @selectedItemComponent}}
             @searchPlaceholder={{@searchPlaceholder}}
+            @ariaLabel={{@ariaLabel}}
+            @ariaLabelledBy={{@ariaLabelledBy}}
           />
         {{/let}}
       {{/if}}
@@ -120,7 +124,13 @@
             (component 'power-select/search-message')
           ) 
         as |SearchMessage|}}
-          <SearchMessage @searchMessage={{this.searchMessage}} @select={{publicAPI}}/>
+          <SearchMessage 
+            @searchMessage={{this.searchMessage}}
+            @select={{publicAPI}}
+            id={{listboxId}} 
+            aria-label={{@ariaLabel}}
+            aria-labelledby={{@ariaLabelledBy}} 
+          /> 
         {{/let}}
       {{else if this.mustShowNoMessages}}
         {{#let 
@@ -130,7 +140,13 @@
             (component 'power-select/no-matches-message')
           ) 
          as |NoMatchesMessage|}}
-          <NoMatchesMessage @noMatchesMessage={{this.noMatchesMessage}} @select={{publicAPI}} />
+          <NoMatchesMessage 
+            @noMatchesMessage={{this.noMatchesMessage}} 
+            @select={{publicAPI}} 
+            id={{listboxId}} 
+            aria-label={{@ariaLabel}}
+            aria-labelledby={{@ariaLabelledBy}} 
+          />
         {{/let}}
       {{else}}
         {{#let 

diff --git a/addon/components/power-select/before-options.hbs b/addon/components/power-select/before-options.hbs
@@ -1,14 +1,18 @@
 {{#if @searchEnabled}}
   <div class="ember-power-select-search">
-    <input type="search" autocomplete="off"
-      autocorrect="off" autocapitalize="off"
-      spellcheck={{false}} role="combobox"
+    <input type="search"
+      autocomplete="off"
+      autocorrect="off"
+      autocapitalize="off"
+      spellcheck={{false}}
       class="ember-power-select-search-input"
       value={{@select.searchText}}
       aria-activedescendant={{@ariaActiveDescendant}}
       aria-controls={{@listboxId}}
       aria-haspopup="listbox"
       placeholder={{@searchPlaceholder}}
+      aria-label={{@ariaLabel}}
+      aria-labelledby={{@ariaLabelledBy}}
       {{on "input" @onInput}}
       {{on "focus" @onFocus}}
       {{on "blur" @onBlur}}

diff --git a/addon/components/power-select/search-message.hbs b/addon/components/power-select/search-message.hbs
@@ -1,4 +1,4 @@
-<ul class="ember-power-select-options" role="listbox">
+<ul class="ember-power-select-options" role="listbox" ...attributes>
   <li class="ember-power-select-option ember-power-select-option--search-message" role="option">
     {{@searchMessage}}
   </li>

diff --git a/tests/integration/components/power-select/a11y-test.js b/tests/integration/components/power-select/a11y-test.js
@@ -652,7 +652,7 @@ module(
     });
 
     test('Dropdown with search enabled has proper aria attributes to associate search box with the options', async function (assert) {
-      assert.expect(5);
+      assert.expect(4);
       this.numbers = numbers;
 
       await render(hbs`
@@ -676,9 +676,7 @@ module(
           'aria-controls',
           document.querySelector('.ember-power-select-dropdown').id
         );
-      assert
-        .dom('.ember-power-select-search-input')
-        .hasAttribute('role', 'combobox');
+
       assert
         .dom('.ember-power-select-search-input')
         .hasAttribute('aria-haspopup', 'listbox');
@@ -815,7 +813,7 @@ module(
     });
 
     test('PowerSelectMultiple with search enabled has proper aria attributes', async function (assert) {
-      assert.expect(11);
+      assert.expect(10);
       this.numbers = numbers;
 
       await render(hbs`
@@ -852,13 +850,6 @@ module(
 
       await clickTrigger();
 
-      assert
-        .dom('.ember-power-select-trigger-multiple-input')
-        .hasAttribute(
-          'role',
-          'combobox',
-          'Multi select search box has role combobox'
-        );
       assert
         .dom('.ember-power-select-trigger-multiple-input')
         .hasAttribute(