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

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

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

@@ -0,0 +1,47 @@
+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`
+    {{#power-select 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');
+});