From f60a8214045aa7ce6271a9f15d02b8b9a7ef66fe Mon Sep 17 00:00:00 2001 From: "James C. Davis" Date: Wed, 2 Mar 2022 03:59:42 -0500 Subject: [PATCH] use hasAria/doesNotHaveAria --- .../components/power-select/a11y-test.js | 110 +++++++++--------- .../power-select/custom-search-test.js | 8 +- .../components/power-select/disabled-test.js | 10 +- .../power-select/general-behaviour-test.js | 10 +- .../power-select/mouse-control-test.js | 10 +- .../components/power-select/multiple-test.js | 6 +- 6 files changed, 77 insertions(+), 77 deletions(-) diff --git a/tests/integration/components/power-select/a11y-test.js b/tests/integration/components/power-select/a11y-test.js index 0f75cd4cd..bf1cb3fab 100644 --- a/tests/integration/components/power-select/a11y-test.js +++ b/tests/integration/components/power-select/a11y-test.js @@ -82,7 +82,7 @@ module('Integration | Component | Ember Power Select (Accessibility)', function( `); await clickTrigger(); - assert.dom(findContains('.ember-power-select-option', 'two')).hasAttribute('aria-selected', 'true', 'the selected option has aria-selected=true'); + assert.dom(findContains('.ember-power-select-option', 'two')).hasAria('selected', 'true', 'the selected option has aria-selected=true'); assert.dom('.ember-power-select-option[aria-selected="false"]').exists({ count: numbers.length - 1 }, 'All other options have aria-selected=false'); }); @@ -98,8 +98,8 @@ module('Integration | Component | Ember Power Select (Accessibility)', function( `); await clickTrigger(); - assert.dom(findContains('.ember-power-select-option', 'two')).hasAttribute('aria-selected', 'true', 'the first selected option has aria-selected=true'); - assert.dom(findContains('.ember-power-select-option', 'four')).hasAttribute('aria-selected', 'true', 'the second selected option has aria-selected=true'); + assert.dom(findContains('.ember-power-select-option', 'two')).hasAria('selected', 'true', 'the first selected option has aria-selected=true'); + assert.dom(findContains('.ember-power-select-option', 'four')).hasAria('selected', 'true', 'the second selected option has aria-selected=true'); assert.dom('.ember-power-select-option[aria-selected="false"]').exists({ count: numbers.length - 2 }, 'All other options have aria-selected=false'); }); @@ -114,11 +114,11 @@ module('Integration | Component | Ember Power Select (Accessibility)', function( `); await clickTrigger(); - assert.dom(findContains('.ember-power-select-option', 'one')).hasAttribute('aria-current', 'true', 'the highlighted option has aria-current=true'); + assert.dom(findContains('.ember-power-select-option', 'one')).hasAria('current', 'true', 'the highlighted option has aria-current=true'); assert.dom('.ember-power-select-option[aria-current="false"]').exists({ count: numbers.length - 1 }, 'All other options have aria-current=false'); await triggerKeyEvent('.ember-power-select-search-input', 'keydown', 40); - assert.dom(findContains('.ember-power-select-option', 'one')).hasAttribute('aria-current', 'false', 'the first option has now aria-current=false'); - assert.dom(findContains('.ember-power-select-option', 'two')).hasAttribute('aria-current', 'true', 'the second option has now aria-current=false'); + assert.dom(findContains('.ember-power-select-option', 'one')).hasAria('current', 'false', 'the first option has now aria-current=false'); + assert.dom(findContains('.ember-power-select-option', 'two')).hasAria('current', 'true', 'the second option has now aria-current=false'); }); test('Multiple-select: The highlighted option has `aria-current=true` and the rest `aria-current=false`', async function(assert) { @@ -132,11 +132,11 @@ module('Integration | Component | Ember Power Select (Accessibility)', function( `); await clickTrigger(); - assert.dom(findContains('.ember-power-select-option', 'one')).hasAttribute('aria-current', 'true', 'the highlighted option has aria-current=true'); + assert.dom(findContains('.ember-power-select-option', 'one')).hasAria('current', 'true', 'the highlighted option has aria-current=true'); assert.dom('.ember-power-select-option[aria-current="false"]').exists({ count: numbers.length - 1 }, 'All other options have aria-current=false'); await triggerKeyEvent('.ember-power-select-search-input', 'keydown', 40); - assert.dom(findContains('.ember-power-select-option', 'one')).hasAttribute('aria-current', 'false', 'the first option has now aria-current=false'); - assert.dom(findContains('.ember-power-select-option', 'two')).hasAttribute('aria-current', 'true', 'the second option has now aria-current=false'); + assert.dom(findContains('.ember-power-select-option', 'one')).hasAria('current', 'false', 'the first option has now aria-current=false'); + assert.dom(findContains('.ember-power-select-option', 'two')).hasAria('current', 'true', 'the second option has now aria-current=false'); }); test('Single-select: Options with a disabled field have `aria-disabled=true`', async function(assert) { @@ -205,9 +205,9 @@ module('Integration | Component | Ember Power Select (Accessibility)', function( `); - assert.dom('.ember-power-select-trigger').hasAttribute('aria-expanded', 'false', 'Not expanded'); + assert.dom('.ember-power-select-trigger').hasAria('expanded', 'false', 'Not expanded'); await clickTrigger(); - assert.dom('.ember-power-select-trigger').hasAttribute('aria-expanded', 'true', 'Expanded'); + assert.dom('.ember-power-select-trigger').hasAria('expanded', 'true', 'Expanded'); }); test('Multiple-select: The trigger attribute `aria-expanded` is true when the dropdown is opened', async function(assert) { @@ -220,9 +220,9 @@ module('Integration | Component | Ember Power Select (Accessibility)', function( `); - assert.dom('.ember-power-select-trigger').hasAttribute('aria-expanded', 'false', 'Not expanded'); + assert.dom('.ember-power-select-trigger').hasAria('expanded', 'false', 'Not expanded'); await clickTrigger(); - assert.dom('.ember-power-select-trigger').hasAttribute('aria-expanded', 'true', 'Expanded'); + assert.dom('.ember-power-select-trigger').hasAria('expanded', 'true', 'Expanded'); }); test('Single-select: The listbox has a unique id`', async function(assert) { @@ -265,7 +265,7 @@ module('Integration | Component | Ember Power Select (Accessibility)', function( await clickTrigger(); assert.dom('.ember-power-select-search-input').hasAttribute('type', 'search', 'The type of the input is `search`'); - assert.dom('.ember-power-select-search-input').hasAttribute('aria-controls', /^ember-power-select-options-ember\d+$/, 'The `aria-controls` points to the id of the listbox'); + assert.dom('.ember-power-select-search-input').hasAria('controls', /^ember-power-select-options-ember\d+$/, 'The `aria-controls` points to the id of the listbox'); }); test('Multiple-select: The searchbox has type `search` and `aria-controls=`', async function(assert) { @@ -280,7 +280,7 @@ module('Integration | Component | Ember Power Select (Accessibility)', function( await clickTrigger(); assert.dom('.ember-power-select-trigger-multiple-input').hasAttribute('type', 'search', 'The type of the input is `search`'); - assert.dom('.ember-power-select-trigger-multiple-input').hasAttribute('aria-controls', /^ember-power-select-options-ember\d+$/, 'The `aria-controls` points to the id of the listbox'); + assert.dom('.ember-power-select-trigger-multiple-input').hasAria('controls', /^ember-power-select-options-ember\d+$/, 'The `aria-controls` points to the id of the listbox'); }); test('Multiple-select: The selected elements are
  • s inside an
      , and have an item with `role=button` with `aria-label="remove element"`', async function(assert) { @@ -299,7 +299,7 @@ module('Integration | Component | Ember Power Select (Accessibility)', function( assert.equal(e.parentElement.tagName, 'UL', 'The parent element is a list'); let closeButton = e.querySelector('.ember-power-select-multiple-remove-btn'); assert.dom(closeButton).hasAttribute('role', 'button', 'The role of the close button is "button"'); - assert.dom(closeButton).hasAttribute('aria-label', 'remove element', 'The close button has a helpful aria label'); + assert.dom(closeButton).hasAria('label', 'remove element', 'The close button has a helpful aria label'); }); }); @@ -319,9 +319,9 @@ module('Integration | Component | Ember Power Select (Accessibility)', function( {{option}} `); - assert.dom('.ember-power-select-trigger').hasAttribute('aria-label', 'ariaLabelString', 'aria-label set correctly'); - assert.dom('.ember-power-select-trigger').hasAttribute('aria-invalid', 'true', 'aria-invalid set correctly'); - assert.dom('.ember-power-select-trigger').hasAttribute('aria-required', 'true', 'aria-required set correctly'); + assert.dom('.ember-power-select-trigger').hasAria('label', 'ariaLabelString', 'aria-label set correctly'); + assert.dom('.ember-power-select-trigger').hasAria('invalid', 'true', 'aria-invalid set correctly'); + assert.dom('.ember-power-select-trigger').hasAria('required', 'true', 'aria-required set correctly'); }); test('Multiple-select: The trigger element correctly passes through WAI-ARIA widget attributes', async function(assert) { @@ -340,9 +340,9 @@ module('Integration | Component | Ember Power Select (Accessibility)', function( {{option}} `); - assert.dom('.ember-power-select-trigger').hasAttribute('aria-label', 'ariaLabelString', 'aria-label set correctly'); - assert.dom('.ember-power-select-trigger').hasAttribute('aria-invalid', 'true', 'aria-invalid set correctly'); - assert.dom('.ember-power-select-trigger').hasAttribute('aria-required', 'true', 'aria-required set correctly'); + assert.dom('.ember-power-select-trigger').hasAria('label', 'ariaLabelString', 'aria-label set correctly'); + assert.dom('.ember-power-select-trigger').hasAria('invalid', 'true', 'aria-invalid set correctly'); + assert.dom('.ember-power-select-trigger').hasAria('required', 'true', 'aria-required set correctly'); }); test('Single-select: The trigger element correctly passes through WAI-ARIA relationship attributes', async function(assert) { @@ -360,8 +360,8 @@ module('Integration | Component | Ember Power Select (Accessibility)', function( {{option}} `); - assert.dom('.ember-power-select-trigger').hasAttribute('aria-describedby', 'ariaDescribedByString', 'aria-describedby set correctly'); - assert.dom('.ember-power-select-trigger').hasAttribute('aria-labelledby', 'ariaLabelledByString', 'aria-required set correctly'); + assert.dom('.ember-power-select-trigger').hasAria('describedby', 'ariaDescribedByString', 'aria-describedby set correctly'); + assert.dom('.ember-power-select-trigger').hasAria('labelledby', 'ariaLabelledByString', 'aria-required set correctly'); }); test('Multiple-select: The trigger element correctly passes through WAI-ARIA relationship attributes', async function(assert) { @@ -379,8 +379,8 @@ module('Integration | Component | Ember Power Select (Accessibility)', function( {{option}} `); - assert.dom('.ember-power-select-trigger').hasAttribute('aria-describedby', 'ariaDescribedByString', 'aria-describedby set correctly'); - assert.dom('.ember-power-select-trigger').hasAttribute('aria-labelledby', 'ariaLabelledByString', 'aria-required set correctly'); + assert.dom('.ember-power-select-trigger').hasAria('describedby', 'ariaDescribedByString', 'aria-describedby set correctly'); + assert.dom('.ember-power-select-trigger').hasAria('labelledby', 'ariaLabelledByString', 'aria-required set correctly'); }); test('Trigger can have a custom aria-role passing @triggerRole', async function(assert) { @@ -419,9 +419,9 @@ module('Integration | Component | Ember Power Select (Accessibility)', function( await clickTrigger(); - assert.dom('.ember-power-select-trigger').hasAttribute('aria-haspopup', 'listbox'); - assert.dom('.ember-power-select-trigger').hasAttribute('aria-owns', /ember-basic-dropdown-content-ember\d+/); - assert.dom('.ember-power-select-trigger').hasAttribute('aria-controls', document.querySelector('.ember-power-select-options').id); + assert.dom('.ember-power-select-trigger').hasAria('haspopup', 'listbox'); + assert.dom('.ember-power-select-trigger').hasAria('owns', /ember-basic-dropdown-content-ember\d+/); + assert.dom('.ember-power-select-trigger').hasAria('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) { @@ -442,11 +442,11 @@ module('Integration | Component | Ember Power Select (Accessibility)', function( 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-trigger').doesNotHaveAria('haspopup'); + assert.dom('.ember-power-select-trigger').doesNotHaveAria('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); + assert.dom('.ember-power-select-search-input').hasAria('haspopup', 'listbox'); + assert.dom('.ember-power-select-search-input').hasAria('controls', document.querySelector('.ember-power-select-options').id); }); test('Trigger has aria-activedescendant attribute for the highlighted option', async function(assert) { @@ -459,18 +459,18 @@ module('Integration | Component | Ember Power Select (Accessibility)', function( `); - assert.dom('.ember-power-select-trigger').hasNoAttribute('aria-activedescendant', 'aria-activedescendant is not present when the dropdown is closed'); + assert.dom('.ember-power-select-trigger').doesNotHaveAria('activedescendant', 'aria-activedescendant is not present when the dropdown is closed'); await clickTrigger(); // by default, the first option is highlighted and marked as aria-activedescendant - assert.dom('.ember-power-select-option').hasAttribute('aria-current', 'true', 'The first element is highlighted'); - assert.dom('.ember-power-select-trigger').hasAttribute('aria-activedescendant', document.querySelector('.ember-power-select-option:nth-child(1)').id, 'The first element is the aria-activedescendant'); + assert.dom('.ember-power-select-option').hasAria('current', 'true', 'The first element is highlighted'); + assert.dom('.ember-power-select-trigger').hasAria('activedescendant', document.querySelector('.ember-power-select-option:nth-child(1)').id, 'The first element is the aria-activedescendant'); await triggerEvent('.ember-power-select-option:nth-child(4)', 'mouseover'); - assert.dom('.ember-power-select-option:nth-child(4)').hasAttribute('aria-current', 'true', 'The 4th element is highlighted'); - assert.dom('.ember-power-select-trigger').hasAttribute('aria-activedescendant', document.querySelector('.ember-power-select-option:nth-child(4)').id, 'The 4th element is the aria-activedescendant'); + assert.dom('.ember-power-select-option:nth-child(4)').hasAria('current', 'true', 'The 4th element is highlighted'); + assert.dom('.ember-power-select-trigger').hasAria('activedescendant', document.querySelector('.ember-power-select-option:nth-child(4)').id, 'The 4th element is the aria-activedescendant'); }); test('PowerSelectMultiple with search disabled has proper aria attributes', async function(assert) { @@ -489,20 +489,20 @@ module('Integration | Component | Ember Power Select (Accessibility)', function( `); - assert.dom('.ember-power-select-trigger').hasAttribute('aria-controls', /^ember-power-select-options-ember\d+$/, 'The trigger has aria-controls value'); - assert.dom('.ember-power-select-trigger').hasNoAttribute('aria-activedescendant', 'aria-activedescendant is not present when the dropdown is closed'); - assert.dom('.ember-power-select-trigger').hasAttribute('aria-haspopup', 'listbox', 'aria-haspopup is present on the trigger'); + assert.dom('.ember-power-select-trigger').hasAria('controls', /^ember-power-select-options-ember\d+$/, 'The trigger has aria-controls value'); + assert.dom('.ember-power-select-trigger').doesNotHaveAria('activedescendant', 'aria-activedescendant is not present when the dropdown is closed'); + assert.dom('.ember-power-select-trigger').hasAria('haspopup', 'listbox', 'aria-haspopup is present on the trigger'); await clickTrigger(); // by default, the first option is highlighted and marked as aria-activedescendant - assert.dom('.ember-power-select-option').hasAttribute('aria-current', 'true', 'The first element is highlighted'); - assert.dom('.ember-power-select-trigger').hasAttribute('aria-activedescendant', document.querySelector('.ember-power-select-option:nth-child(1)').id, 'The first element is the aria-activedescendant'); + assert.dom('.ember-power-select-option').hasAria('current', 'true', 'The first element is highlighted'); + assert.dom('.ember-power-select-trigger').hasAria('activedescendant', document.querySelector('.ember-power-select-option:nth-child(1)').id, 'The first element is the aria-activedescendant'); await triggerEvent('.ember-power-select-option:nth-child(4)', 'mouseover'); - assert.dom('.ember-power-select-option:nth-child(4)').hasAttribute('aria-current', 'true', 'The 4th element is highlighted'); - assert.dom('.ember-power-select-trigger').hasAttribute('aria-activedescendant', document.querySelector('.ember-power-select-option:nth-child(4)').id, 'The 4th element is the aria-activedescendant'); + assert.dom('.ember-power-select-option:nth-child(4)').hasAria('current', 'true', 'The 4th element is highlighted'); + assert.dom('.ember-power-select-trigger').hasAria('activedescendant', document.querySelector('.ember-power-select-option:nth-child(4)').id, 'The 4th element is the aria-activedescendant'); }); test('PowerSelectMultiple with search enabled has proper aria attributes', async function(assert) { @@ -521,24 +521,24 @@ module('Integration | Component | Ember Power Select (Accessibility)', function( `); - assert.dom('.ember-power-select-trigger').hasNoAttribute('aria-controls', 'The trigger has no aria-controls value'); - assert.dom('.ember-power-select-trigger').hasNoAttribute('aria-activedescendant', 'aria-activedescendant is not present on the trigger'); - assert.dom('.ember-power-select-trigger').hasNoAttribute('aria-haspopup', 'aria-haspopup is not present on the trigger'); + assert.dom('.ember-power-select-trigger').doesNotHaveAria('controls', 'The trigger has no aria-controls value'); + assert.dom('.ember-power-select-trigger').doesNotHaveAria('activedescendant', 'aria-activedescendant is not present on the trigger'); + assert.dom('.ember-power-select-trigger').doesNotHaveAria('haspopup', 'aria-haspopup is not present on the trigger'); 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('aria-controls', /^ember-power-select-options-ember\d+$/, 'Multi select search box has aria-controls value'); - assert.dom('.ember-power-select-trigger-multiple-input').hasAttribute('aria-haspopup', 'listbox', 'Multi select search box has aria-haspopup value'); - assert.dom('.ember-power-select-trigger-multiple-input').hasAttribute('aria-expanded', 'true', 'Multi select search box has aria-expanded value'); + assert.dom('.ember-power-select-trigger-multiple-input').hasAria('controls', /^ember-power-select-options-ember\d+$/, 'Multi select search box has aria-controls value'); + assert.dom('.ember-power-select-trigger-multiple-input').hasAria('haspopup', 'listbox', 'Multi select search box has aria-haspopup value'); + assert.dom('.ember-power-select-trigger-multiple-input').hasAria('expanded', 'true', 'Multi select search box has aria-expanded value'); // by default, the first option is highlighted and marked as aria-activedescendant - assert.dom('.ember-power-select-option').hasAttribute('aria-current', 'true', 'The first element is highlighted'); - assert.dom('.ember-power-select-trigger-multiple-input').hasAttribute('aria-activedescendant', document.querySelector('.ember-power-select-option:nth-child(1)').id, 'The first element is the aria-activedescendant'); + assert.dom('.ember-power-select-option').hasAria('current', 'true', 'The first element is highlighted'); + assert.dom('.ember-power-select-trigger-multiple-input').hasAria('activedescendant', document.querySelector('.ember-power-select-option:nth-child(1)').id, 'The first element is the aria-activedescendant'); await triggerEvent('.ember-power-select-option:nth-child(4)', 'mouseover'); - assert.dom('.ember-power-select-option:nth-child(4)').hasAttribute('aria-current', 'true', 'The 4th element is highlighted'); - assert.dom('.ember-power-select-trigger-multiple-input').hasAttribute('aria-activedescendant', document.querySelector('.ember-power-select-option:nth-child(4)').id, 'The 4th element is the aria-activedescendant'); + assert.dom('.ember-power-select-option:nth-child(4)').hasAria('current', 'true', 'The 4th element is highlighted'); + assert.dom('.ember-power-select-trigger-multiple-input').hasAria('activedescendant', document.querySelector('.ember-power-select-option:nth-child(4)').id, 'The 4th element is the aria-activedescendant'); }); }); diff --git a/tests/integration/components/power-select/custom-search-test.js b/tests/integration/components/power-select/custom-search-test.js index 9d750dfaa..10a51098d 100644 --- a/tests/integration/components/power-select/custom-search-test.js +++ b/tests/integration/components/power-select/custom-search-test.js @@ -270,7 +270,7 @@ module('Integration | Component | Ember Power Select (Custom search function)', typeInSearch('teen'); await settled(); - assert.dom('.ember-power-select-option').hasAttribute('aria-current', 'true', 'The first result is highlighted'); + assert.dom('.ember-power-select-option').hasAria('current', 'true', 'The first result is highlighted'); }); test('On an empty select, when a syncronous search result complete, the first element is highlighted like with regular filtering', async function(assert) { assert.expect(1); @@ -289,7 +289,7 @@ module('Integration | Component | Ember Power Select (Custom search function)', typeInSearch('teen'); await settled(); - assert.dom('.ember-power-select-option').hasAttribute('aria-current', 'true', 'The first result is highlighted'); + assert.dom('.ember-power-select-option').hasAria('current', 'true', 'The first result is highlighted'); }); test('On an select with a selected value, if after a search this value is not among the options the first element is highlighted', async function(assert) { @@ -312,11 +312,11 @@ module('Integration | Component | Ember Power Select (Custom search function)', `); await clickTrigger(); - assert.dom('.ember-power-select-option:nth-child(3)').hasAttribute('aria-current', 'true', 'The 3rd result is highlighted'); + assert.dom('.ember-power-select-option:nth-child(3)').hasAria('current', 'true', 'The 3rd result is highlighted'); typeInSearch('teen'); await settled(); - assert.dom('.ember-power-select-option').hasAttribute('aria-current', 'true', 'The first result is highlighted'); + assert.dom('.ember-power-select-option').hasAria('current', 'true', 'The first result is highlighted'); }); test('Closing a component with a custom search cleans the search box and the results list', async function(assert) { diff --git a/tests/integration/components/power-select/disabled-test.js b/tests/integration/components/power-select/disabled-test.js index a6333f1f3..c572b0140 100644 --- a/tests/integration/components/power-select/disabled-test.js +++ b/tests/integration/components/power-select/disabled-test.js @@ -19,7 +19,7 @@ module('Integration | Component | Ember Power Select (Disabled)', function(hooks `); - assert.dom('.ember-power-select-trigger').hasAttribute('aria-disabled', 'true'); + assert.dom('.ember-power-select-trigger').hasAria('disabled', 'true'); await clickTrigger(); assert.dom('.ember-power-select-dropdown').doesNotExist('The select is still closed'); await triggerKeyEvent('.ember-power-select-trigger', 'keydown', 13); @@ -50,7 +50,7 @@ module('Integration | Component | Ember Power Select (Disabled)', function(hooks await clickTrigger(); await triggerEvent('.ember-power-select-option[aria-disabled="true"]', 'mouseover'); - assert.dom('.ember-power-select-option[aria-disabled="true"]').hasAttribute('aria-current', 'false', 'The hovered option was not highlighted because it\'s disabled'); + assert.dom('.ember-power-select-option[aria-disabled="true"]').hasAria('current', 'false', 'The hovered option was not highlighted because it\'s disabled'); }); test('Disabled options are skipped when highlighting items with the keyboard', async function(assert) { @@ -110,9 +110,9 @@ module('Integration | Component | Ember Power Select (Disabled)', function(hooks `); - assert.dom('.ember-power-select-trigger').hasAttribute('aria-disabled', 'true', 'The trigger has `aria-disabled=true`'); + assert.dom('.ember-power-select-trigger').hasAria('disabled', 'true', 'The trigger has `aria-disabled=true`'); this.set('shouldBeDisabled', false); - assert.dom('.ember-power-select-trigger').hasAttribute('aria-expanded', 'false') + assert.dom('.ember-power-select-trigger').hasAria('expanded', 'false') assert.dom('.ember-power-select-trigger-multiple-input').doesNotHaveAttribute('disabled'); }); @@ -283,7 +283,7 @@ module('Integration | Component | Ember Power Select (Disabled)', function(hooks await clickTrigger(); await click(document.querySelectorAll('.ember-power-select-option')[1]); assert.dom('.ember-power-select-trigger').hasText('two', 'The option is selected'); - assert.dom('.ember-power-select-trigger').hasAttribute('aria-disabled', 'true'); + assert.dom('.ember-power-select-trigger').hasAria('disabled', 'true'); }); test('Disabled options cannot be selected', async function(assert) { diff --git a/tests/integration/components/power-select/general-behaviour-test.js b/tests/integration/components/power-select/general-behaviour-test.js index 099dcef22..4ce230e04 100644 --- a/tests/integration/components/power-select/general-behaviour-test.js +++ b/tests/integration/components/power-select/general-behaviour-test.js @@ -500,7 +500,7 @@ module('Integration | Component | Ember Power Select (General behavior)', functi await clickTrigger(); assert.dom('.ember-power-select-dropdown').exists('Dropdown is rendered'); assert.dom('.ember-power-select-option[aria-current="true"]').exists({ count: 1 }, 'One element is highlighted'); - assert.dom('.ember-power-select-option').hasAttribute('aria-current', 'true', 'The first one to be precise'); + assert.dom('.ember-power-select-option').hasAria('current', 'true', 'The first one to be precise'); }); test('When `selected` option is provided, it appears in the trigger yielded with the same block as the options', async function(assert) { @@ -549,7 +549,7 @@ module('Integration | Component | Ember Power Select (General behavior)', functi `); await clickTrigger(); - assert.dom('.ember-power-select-option:nth-child(3)').hasAttribute('aria-selected', 'true', 'The third option is marked as selected'); + assert.dom('.ember-power-select-option:nth-child(3)').hasAria('selected', 'true', 'The third option is marked as selected'); }); test('The default search strategy matches disregarding diacritics differences and capitalization', async function(assert) { @@ -610,7 +610,7 @@ module('Integration | Component | Ember Power Select (General behavior)', functi await clickTrigger(); assert.dom('.ember-power-select-dropdown').exists('Dropdown is rendered'); assert.dom('.ember-power-select-option[aria-current="true"]').exists({ count: 1 }, 'One element is highlighted'); - assert.dom('.ember-power-select-option:nth-child(1)').hasAttribute('aria-current', 'true', 'The first one to be precise'); + assert.dom('.ember-power-select-option:nth-child(1)').hasAria('current', 'true', 'The first one to be precise'); }); test('When a option is provided that options is rendered in the trigger using the same block as the options', async function(assert) { @@ -656,7 +656,7 @@ module('Integration | Component | Ember Power Select (General behavior)', functi await clickTrigger(); let selectedOption = findContains('.ember-power-select-option', 'ES: Spain'); - assert.dom(selectedOption).hasAttribute('aria-selected', 'true', 'The second option is marked as selected'); + assert.dom(selectedOption).hasAria('selected', 'true', 'The second option is marked as selected'); }); test('The default search strategy matches disregarding diacritics differences and capitalization', async function(assert) { @@ -1106,7 +1106,7 @@ module('Integration | Component | Ember Power Select (General behavior)', functi await click('.ember-power-select-option:nth-child(2)'); await clickTrigger(); await typeInSearch('i'); - assert.dom('.ember-power-select-option:nth-child(1)').hasAttribute('aria-selected', 'true', 'The item in the list is marked as selected'); + assert.dom('.ember-power-select-option:nth-child(1)').hasAria('selected', 'true', 'The item in the list is marked as selected'); await click('.ember-power-select-option:nth-child(1)'); assert.equal(onChangeInvocationsCount, 1); }); diff --git a/tests/integration/components/power-select/mouse-control-test.js b/tests/integration/components/power-select/mouse-control-test.js index 16c05a7c1..490c45de8 100644 --- a/tests/integration/components/power-select/mouse-control-test.js +++ b/tests/integration/components/power-select/mouse-control-test.js @@ -20,9 +20,9 @@ module('Integration | Component | Ember Power Select (Mouse control)', function( `); await clickTrigger(); - assert.dom('.ember-power-select-option').hasAttribute('aria-current', 'true', 'The first element is highlighted'); + assert.dom('.ember-power-select-option').hasAria('current', 'true', 'The first element is highlighted'); await triggerEvent('.ember-power-select-option:nth-child(4)', 'mouseover'); - assert.dom('.ember-power-select-option:nth-child(4)').hasAttribute('aria-current', 'true', 'The 4th element is highlighted'); + assert.dom('.ember-power-select-option:nth-child(4)').hasAria('current', 'true', 'The 4th element is highlighted'); assert.dom('.ember-power-select-option:nth-child(4)').hasText('four'); }); @@ -37,11 +37,11 @@ module('Integration | Component | Ember Power Select (Mouse control)', function( `); await clickTrigger(); - assert.dom('.ember-power-select-option').hasAttribute('aria-current', 'true', 'The first element is highlighted'); + assert.dom('.ember-power-select-option').hasAria('current', 'true', 'The first element is highlighted'); await triggerEvent('.ember-power-select-option:nth-child(4)', 'mouseover'); - assert.dom('.ember-power-select-option:nth-child(4)').hasAttribute('aria-current', 'false', 'The 4th element is not highlighted'); - assert.dom('.ember-power-select-option:nth-child(1)').hasAttribute('aria-current', 'true', 'The 1st element is still highlighted'); + assert.dom('.ember-power-select-option:nth-child(4)').hasAria('current', 'false', 'The 4th element is not highlighted'); + assert.dom('.ember-power-select-option:nth-child(1)').hasAria('current', 'true', 'The 1st element is still highlighted'); }); test('Clicking an item selects it, closes the dropdown and focuses the trigger', async function(assert) { diff --git a/tests/integration/components/power-select/multiple-test.js b/tests/integration/components/power-select/multiple-test.js index 4b9bbc964..96e08257a 100644 --- a/tests/integration/components/power-select/multiple-test.js +++ b/tests/integration/components/power-select/multiple-test.js @@ -146,8 +146,8 @@ module('Integration | Component | Ember Power Select (Multiple)', function(hooks `); await clickTrigger(); - assert.dom('.ember-power-select-option:nth-child(2)').hasAttribute('aria-selected', 'true', 'The second option is styled as selected'); - assert.dom('.ember-power-select-option:nth-child(4)').hasAttribute('aria-selected', 'true', 'The 4th option is styled as selected'); + assert.dom('.ember-power-select-option:nth-child(2)').hasAria('selected', 'true', 'The second option is styled as selected'); + assert.dom('.ember-power-select-option:nth-child(4)').hasAria('selected', 'true', 'The 4th option is styled as selected'); }); test('When the popup opens, the first items is highlighed, even if there is only one selection', async function(assert) { @@ -830,7 +830,7 @@ module('Integration | Component | Ember Power Select (Multiple)', function(hooks await typeInSearch('M'); await click('.ember-power-select-option:nth-child(2)'); await typeInSearch('Mi'); - assert.dom('.ember-power-select-option').hasAttribute('aria-selected', 'true', 'The item in the list is marked as selected'); + assert.dom('.ember-power-select-option').hasAria('selected', 'true', 'The item in the list is marked as selected'); await click('.ember-power-select-option'); // select the same user again should remove it assert.dom('.ember-power-select-multiple-option').exists({ count: 0 }); });