When dropdown has a search box, aria properties should be on the sear…

…ch box instead of the trigger
cibernox · Nov 22, 2021 · 11b6a89 · 11b6a89
1 parent 0d96890
commit 11b6a89
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 6 deletions.
diff --git a/addon/components/power-select.hbs b/addon/components/power-select.hbs
@@ -38,10 +38,10 @@
       {{on "focus" this.handleFocus}}
       {{on "blur" this.handleBlur}}
       class="ember-power-select-trigger {{@triggerClass}}{{if publicAPI.isActive " ember-power-select-trigger--active"}}"
-      aria-activedescendant={{concat publicAPI.uniqueId "-" this.highlightedIndex}}
-      aria-controls={{listboxId}}
+      aria-activedescendant={{unless @searchEnabled (concat publicAPI.uniqueId "-" this.highlightedIndex)}}
+      aria-controls={{unless @searchEnabled listboxId}}
       aria-describedby={{@ariaDescribedBy}}
-      aria-haspopup="listbox"
+      aria-haspopup={{unless @searchEnabled "listbox"}}
       aria-invalid={{@ariaInvalid}}
       aria-label={{@ariaLabel}}
       aria-labelledby={{@ariaLabelledBy}}
@@ -88,6 +88,7 @@
           @placeholderComponent={{this.placeholderComponent}}
           @extra={{@extra}}
           @listboxId={{listboxId}}
+          @ariaActiveDescendant={{concat publicAPI.uniqueId "-" this.highlightedIndex}}
           @selectedItemComponent={{@selectedItemComponent}}
           @searchPlaceholder={{@searchPlaceholder}}
           />

diff --git a/addon/components/power-select/before-options.hbs b/addon/components/power-select/before-options.hbs
@@ -5,7 +5,9 @@
       spellcheck={{false}} role="combobox"
       class="ember-power-select-search-input"
       value={{@select.searchText}}
+      aria-activedescendant={{@ariaActiveDescendant}}
       aria-controls={{@listboxId}}
+      aria-haspopup="listbox"
       placeholder={{@searchPlaceholder}}
       {{on "input" @onInput}}
       {{on "focus" @onFocus}}
@@ -14,4 +16,4 @@
       {{did-insert this.focusInput}}
       {{will-destroy this.clearSearch}}>
   </div>
-{{/if}}
+{{/if}}
diff --git a/tests/integration/components/power-select/a11y-test.js b/tests/integration/components/power-select/a11y-test.js
@@ -449,12 +449,18 @@ module('Integration | Component | Ember Power Select (Accessibility)', function(
     assert.dom('.ember-power-select-trigger').hasAttribute('role', 'button', 'The `role` was defaults to `button`.');
   });
 
-  test('Trigger has proper aria attributes to associate it with the options', async function(assert) {
+  test('Dropdown with search disabled has proper aria attributes to associate trigger with the options', async function(assert) {
     assert.expect(3);
     this.numbers = numbers;
 
     await render(hbs`
-      <PowerSelect @options={{this.numbers}} @selected={{this.selected}} @onChange={{action (mut this.selected)}} as |number|>
+      <PowerSelect
+        @options={{this.numbers}}
+        @selected={{this.selected}}
+        @searchEnabled={{false}}
+        @onChange={{action (mut this.selected)}}
+        as |number|
+      >
         {{number}}
       </PowerSelect>
     `);
@@ -466,6 +472,31 @@ module('Integration | Component | Ember Power Select (Accessibility)', function(
     assert.dom('.ember-power-select-trigger').hasAttribute('aria-controls', document.querySelector('.ember-power-select-options').id);
   });
 
+  test('Dropdown with search enabled has proper aria attributes to associate search box with the options', async function(assert) {
+    assert.expect(5);
+    this.numbers = numbers;
+
+    await render(hbs`
+      <PowerSelect
+        @options={{this.numbers}}
+        @selected={{this.selected}}
+        @searchEnabled={{true}}
+        @onChange={{action (mut this.selected)}}
+        as |number|
+      >
+        {{number}}
+      </PowerSelect>
+    `);
+
+    await clickTrigger();
+
+    assert.dom('.ember-power-select-trigger').hasNoAttribute('aria-haspopup');
+    assert.dom('.ember-power-select-trigger').hasNoAttribute('aria-controls');
+    assert.dom('.ember-power-select-search-input').hasAttribute('role', 'combobox');
+    assert.dom('.ember-power-select-search-input').hasAttribute('aria-haspopup', 'listbox');
+    assert.dom('.ember-power-select-search-input').hasAttribute('aria-controls', document.querySelector('.ember-power-select-options').id);
+  });
+
   test('Trigger has aria-activedescendant attribute for the highlighted option', async function(assert) {
     assert.expect(4);
     this.numbers = numbers;