Add aria-labelledby, aria-describedby and required properties to the search input

addon/components/power-select.js

@@ -94,6 +94,14 @@ export default Ember.Component.extend({
     return !this.get('loading') && this.get('results.length') === 0;
   }),
 
+  listboxId: computed(function() {
+    return `${this.get('elementId')}-listbox`;
+  }),
+
+  selectedOptionId: computed(function() {
+    return `${this.get('elementId')}-selected-option`;
+  }),
+
   results: computed('options.[]', {
     get() {
       let options = this.get('options') || [];

addon/helpers/ember-power-select-is-selected.js

@@ -0,0 +1,13 @@
+import Ember from 'ember';
+
+const { isArray } = Ember;
+
+export function emberPowerSelectIsSelected([option, selected]) {
+  if (isArray(selected)) {
+    return selected.indexOf(option) > -1;
+  } else {
+    return option === selected;
+  }
+}
+
+export default Ember.Helper.helper(emberPowerSelectIsSelected);

addon/templates/components/power-select.hbs

@@ -1,6 +1,25 @@
-{{#basic-dropdown class=(readonly concatenatedClasses) dir=(readonly dir) tabindex=(readonly tabindex) renderInPlace=(readonly renderInPlace) matchTriggerWidth=true
-  disabled=(readonly disabled) verticalPosition=(readonly verticalPosition) triggerClass=(readonly concatenatedTriggerClasses) dropdownClass=(readonly concatenatedDropdownClasses)
-  opened=opened onOpen=(action "handleOpen") onClose=(action "handleClose") onFocus=(action "handleFocus") onKeydown=(action "handleKeydown") registerActionsInParent=(action "registerDropdown") as |dropdown|}}
+{{#basic-dropdown
+    class=(readonly concatenatedClasses)
+    dir=(readonly dir)
+    tabindex=(readonly tabindex)
+    role="combobox"
+    renderInPlace=(readonly renderInPlace)
+    matchTriggerWidth=true
+    disabled=(readonly disabled)
+    verticalPosition=(readonly verticalPosition)
+    triggerClass=(readonly concatenatedTriggerClasses)
+    dropdownClass=(readonly concatenatedDropdownClasses)
+    opened=opened
+    onOpen=(action "handleOpen")
+    onClose=(action "handleClose")
+    onFocus=(action "handleFocus")
+    onKeydown=(action "handleKeydown")
+    registerActionsInParent=(action "registerDropdown")
+    ariaLabelledBy=ariaLabelledBy
+    ariaDescribedBy=ariaDescribedBy
+    ariaRequired=ariaRequired
+    ariaInvalid=ariaInvalid
+    as |dropdown|}}
   {{#with (hash
     isOpen=dropdown.isOpen
     actions=(hash
@@ -12,17 +31,17 @@
       search=(action "search" dropdown)
       handleKeydown=(action "handleKeydown" dropdown)
     )) as |select|}}
-      {{component beforeOptionsComponent onkeydown=(readonly onkeydown) select=(readonly select) searchPlaceholder=(readonly searchPlaceholder) searchEnabled=(readonly searchEnabled) highlighted=(readonly highlighted)}}
+      {{component beforeOptionsComponent listboxId=listboxId selectedOptionId=selectedOptionId onkeydown=(readonly onkeydown) select=(readonly select) searchPlaceholder=(readonly searchPlaceholder) searchEnabled=(readonly searchEnabled) highlighted=(readonly highlighted)}}
       {{#if mustShowSearchMessage}}
-        <ul class="ember-power-select-options" role="listbox"><li class="ember-power-select-option" role="option">{{searchMessage}}</li></ul>
+        <ul id={{listboxId}} class="ember-power-select-options" role="listbox"><li class="ember-power-select-option" role="option">{{searchMessage}}</li></ul>
       {{else if mustShowNoMessages}}
         {{#if (hasBlock "inverse")}}
           {{yield to="inverse"}}
         {{else if noMatchesMessage}}
-          <ul class="ember-power-select-options" role="listbox"><li class="ember-power-select-option" role="option">{{noMatchesMessage}}</li></ul>
+          <ul id={{listboxId}} class="ember-power-select-options" role="listbox"><li class="ember-power-select-option" role="option">{{noMatchesMessage}}</li></ul>
         {{/if}}
       {{else}}
-        {{#component optionsComponent options=(readonly results) loading=(readonly loading) allOptions=(readonly results) highlighted=(readonly highlighted)
+        {{#component optionsComponent id=listboxId selectedOptionId=selectedOptionId options=(readonly results) loading=(readonly loading) allOptions=(readonly results) highlighted=(readonly highlighted)
           selected=(readonly selected) optionsComponent=(readonly optionsComponent) searchText=(readonly searchText)
           select=(readonly select) extra=(readonly extra) loadingMessage=(readonly loadingMessage)
           class="ember-power-select-options" as |option term|}}
@@ -46,8 +65,9 @@
     {{#component triggerComponent options=(readonly results) selected=(readonly selected) searchText=(readonly searchText)
       placeholder=(readonly placeholder) disabled=(readonly disabled) highlighted=(readonly highlighted) allowClear=(readonly allowClear)
       select=(readonly select) extra=(readonly extra) onkeydown=(readonly onkeydown)
-      selectedItemComponent=(readonly selectedItemComponent) searchField=(readonly searchField) as |opt term|}}
+      selectedItemComponent=(readonly selectedItemComponent)
+      searchField=(readonly searchField) as |opt term|}}
       {{yield opt term}}
     {{/component}}
   {{/with}}
-{{/basic-dropdown}}
+{{/basic-dropdown}}

addon/templates/components/power-select/before-options.hbs

@@ -1,7 +1,17 @@
 {{#if searchEnabled}}
   <div class="ember-power-select-search">
-    <input type="search" autocomplete="off" autocorrect="off" autocapitalize="off"
-    spellcheck="false" role="combobox" oninput={{action select.actions.search value="target.value"}}
-    onkeydown={{action "handleKeydown"}} placeholder={{searchPlaceholder}}>
+    <input type="search"
+           autocomplete="off"
+           autocorrect="off"
+           autocapitalize="off"
+           spellcheck="false"
+           role="combobox"
+           aria-expanded="true"
+           aria-autocomplete="list"
+           aria-owns={{listboxId}}
+           aria-activedescendant={{selectedOptionId}}
+           oninput={{action select.actions.search value="target.value"}}
+           onkeydown={{action "handleKeydown"}}
+           placeholder={{searchPlaceholder}}>
   </div>
-{{/if}}
+{{/if}}

addon/templates/components/power-select/options.hbs

@@ -5,7 +5,7 @@
 {{/if}}
 {{#each options as |opt|}}
   {{#if opt.groupName}}
-    <li class="ember-power-select-group" role="option">
+    <li class="ember-power-select-group" role="option" >
       <span class="ember-power-select-group-name">{{opt.groupName}}</span>
       {{#component optionsComponent highlighted=(readonly highlighted) selected=(readonly selected)
         options=(readonly opt.options) allOptions=(readonly allOptions) optionsComponent=(readonly optionsComponent) select=(readonly select)
@@ -15,6 +15,8 @@
     </li>
   {{else}}
     <li class="ember-power-select-option {{ember-power-select-option-classes opt selected highlighted}}"
+      id={{if (ember-power-select-is-selected opt selected) selectedOptionId}}
+      aria-selected={{ember-power-select-is-selected opt selected}}
       onmouseup={{action select.actions.choose (ember-power-select-build-selection opt selected multiple=multiple)}}
       onmouseover={{action select.actions.highlight opt}} role="option">
       {{yield opt searchText}}

app/helpers/ember-power-select-is-selected.js

@@ -0,0 +1 @@
+export { default, emberPowerSelectIsSelected } from 'ember-power-select/helpers/ember-power-select-is-selected';

tests/integration/components/power-select/accessibility-test.js

@@ -0,0 +1,59 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+// import { clickTrigger } from '../../../helpers/ember-power-select';
+
+moduleForComponent('power-select', 'Integration | Component | Ember Power Select (Accessibility)', {
+  integration: true
+});
+
+test('The aria-labelledby property can be set', function(assert) {
+  assert.expect(1);
+  this.render(hbs`
+    <label id="foo123">Foo</label>
+    {{#power-select selected=selected options=options ariaRequired="true" ariaLabelledBy="foo123" onchange=(action (mut foo)) as |option|}}
+      {{option}}
+    {{/power-select}}
+  `);
+  assert.equal($('.ember-power-select-trigger').attr('aria-labelledby'), 'foo123');
+});
+
+test('The aria-describedby property can be set', function(assert) {
+  assert.expect(1);
+  this.render(hbs`
+    {{#power-select ariaDescribedBy="foo123" onchange=(action (mut foo)) as |option|}}
+      {{option}}
+    {{/power-select}}
+  `);
+  assert.equal($('.ember-power-select-trigger').attr('aria-describedBy'), 'foo123');
+});
+
+test('The aria-required property can be set', function(assert) {
+  assert.expect(1);
+  this.render(hbs`
+    {{#power-select ariaRequired=true onchange=(action (mut foo)) as |option|}}
+      {{option}}
+    {{/power-select}}
+  `);
+  assert.equal($('.ember-power-select-trigger').attr('aria-required'), 'true');
+});
+
+test('The aria-invalid property can be set', function(assert) {
+  assert.expect(1);
+  this.render(hbs`
+    {{#power-select ariaInvalid=true onchange=(action (mut foo)) as |option|}}
+      {{option}}
+    {{/power-select}}
+  `);
+  assert.equal($('.ember-power-select-trigger').attr('aria-invalid'), 'true');
+});
+
+test('The search input has the aria-autocomplete="list" attr', function(assert) {
+  assert.async();
+  this.options = ['male', 'female', 'unknown'];
+  this.selected = ['female'];
+  this.render(hbs`
+    {{#power-select options=options selected=selected onchange=(action (mut selected)) as |option|}}
+      {{option}}
+    {{/power-select}}
+  `);
+});

tests/unit/helpers/ember-power-select-is-selected-test.js

@@ -0,0 +1,10 @@
+import { emberPowerSelectIsSelected } from '../../../helpers/ember-power-select-is-selected';
+import { module, test } from 'qunit';
+
+module('Unit | Helper | ember power select is selected');
+
+// Replace this with your real tests.
+test('it works', function(assert) {
+  let result = emberPowerSelectIsSelected([42]);
+  assert.ok(result);
+});