From d3a7ab3cc4895515c699190bbdcafcaf56ef491d Mon Sep 17 00:00:00 2001 From: Andrew Kirwin Date: Tue, 10 Dec 2024 09:21:23 +0000 Subject: [PATCH] add dropdown primitive ctd --- README.md | 6 +- addon/components/dropdown/content.gjs | 2 + addon/components/select-box/index.gjs | 10 +- tests/acceptance/performance-test.js | 2 +- tests/dummy/app/components/example3.gjs | 6 +- tests/dummy/app/components/example4.gjs | 6 +- tests/dummy/app/components/example6.gjs | 4 +- tests/dummy/app/components/example7.gjs | 4 +- tests/dummy/app/styles/example.scss | 28 ++-- tests/dummy/app/styles/example1.scss | 4 - tests/dummy/app/styles/example3.scss | 18 +-- tests/dummy/app/styles/example4.scss | 18 +-- tests/dummy/app/styles/example6.scss | 15 +- tests/dummy/app/styles/example7.scss | 10 +- tests/dummy/app/templates/performance.hbs | 4 +- .../dropdown/content/render-test.gjs | 26 ++++ .../components/dropdown/index/focus-test.gjs | 4 +- .../components/select-box/index/api-test.gjs | 26 ++-- .../select-box/index/click-input-test.gjs | 6 +- .../select-box/index/click-option-test.gjs | 50 +++---- .../select-box/index/click-trigger-test.gjs | 30 ++-- .../select-box/index/closing-test.gjs | 106 ++++++++------ .../index/conditional-modifier-test.gjs | 6 +- .../select-box/index/disabling-test.gjs | 20 +-- .../select-box/index/focus-test.gjs | 135 ++++++++++-------- .../select-box/index/in-element-test.gjs | 12 +- .../select-box/index/jump-to-option-test.gjs | 70 ++++----- .../select-box/index/key-arrow-down-test.gjs | 106 +++++++++----- .../select-box/index/key-arrow-up-test.gjs | 100 ++++++++----- .../select-box/index/key-enter-test.gjs | 76 +++++----- .../select-box/index/key-escape-test.gjs | 50 ++++--- .../select-box/index/key-options-test.gjs | 6 +- .../select-box/index/key-space-test.gjs | 48 ++++--- .../select-box/index/mouse-option-test.gjs | 8 +- .../select-box/index/mouse-up-test.gjs | 22 +-- .../select-box/index/opening-test.gjs | 80 ++++++----- .../select-box/index/searching-test.gjs | 24 ++-- .../select-box/index/single-test.gjs | 16 +-- .../select-box/index/value-test.gjs | 8 +- .../select-box/options/render-test.gjs | 12 +- 40 files changed, 675 insertions(+), 509 deletions(-) diff --git a/README.md b/README.md index c7a324afa..e98533dcb 100644 --- a/README.md +++ b/README.md @@ -52,17 +52,17 @@ This addon intentionally... ```handlebars - + {{sb.value}} - + Foo - + ``` diff --git a/addon/components/dropdown/content.gjs b/addon/components/dropdown/content.gjs index 12253dee2..ee00beb5a 100644 --- a/addon/components/dropdown/content.gjs +++ b/addon/components/dropdown/content.gjs @@ -1,8 +1,10 @@ import lifecycle from '@zestia/ember-select-box/modifiers/lifecycle'; diff --git a/tests/dummy/app/components/example4.gjs b/tests/dummy/app/components/example4.gjs index 678b24edd..9e83b84d8 100644 --- a/tests/dummy/app/components/example4.gjs +++ b/tests/dummy/app/components/example4.gjs @@ -18,11 +18,11 @@ export default class extends Component { ...attributes as |sb| > - + {{yield sb.value to="trigger"}} - + {{#each @options as |value|}} @@ -38,7 +38,7 @@ export default class extends Component { {{/each}} - + diff --git a/tests/dummy/app/components/example6.gjs b/tests/dummy/app/components/example6.gjs index 236ece66b..875a75cbc 100644 --- a/tests/dummy/app/components/example6.gjs +++ b/tests/dummy/app/components/example6.gjs @@ -16,7 +16,7 @@ import { fn } from '@ember/helper'; {{#if dd.isOpen}} - + {{#each sb.options as |value|}} @@ -29,7 +29,7 @@ import { fn } from '@ember/helper'; {{/each}} - + {{/if}} diff --git a/tests/dummy/app/components/example7.gjs b/tests/dummy/app/components/example7.gjs index fac00eab0..6b8634195 100644 --- a/tests/dummy/app/components/example7.gjs +++ b/tests/dummy/app/components/example7.gjs @@ -38,7 +38,7 @@ export default class extends Component { {{#if dd.isOpen}} - + {{#if sb.isBusy}} @@ -56,7 +56,7 @@ export default class extends Component { {{/if}} - + {{/if}} diff --git a/tests/dummy/app/styles/example.scss b/tests/dummy/app/styles/example.scss index 10f692460..772bac8ff 100644 --- a/tests/dummy/app/styles/example.scss +++ b/tests/dummy/app/styles/example.scss @@ -20,18 +20,30 @@ border-color: var(--dark-grey); } -@mixin option { +@mixin trigger { cursor: pointer; - padding: var(--space-l); + padding: var(--space-m); + outline: none; + user-select: none; + border: 2px solid transparent; } -@mixin options { - outline: none; +@mixin dropdown-content { display: flex; flex-direction: column; overflow: auto; } +@mixin options { + outline: none; + overflow: auto; +} + +@mixin option { + cursor: pointer; + padding: var(--space-l); +} + @mixin option-current { box-shadow: inset 0 0 0 2px var(--white), @@ -50,14 +62,6 @@ font-weight: bold; } -@mixin trigger { - cursor: pointer; - padding: var(--space-m); - outline: none; - user-select: none; - border: 2px solid transparent; -} - @mixin trigger-focused { border-color: var(--blue); } diff --git a/tests/dummy/app/styles/example1.scss b/tests/dummy/app/styles/example1.scss index cd5022d1d..b48b6757c 100644 --- a/tests/dummy/app/styles/example1.scss +++ b/tests/dummy/app/styles/example1.scss @@ -7,10 +7,6 @@ @include example.box-focused; } - .select-box__options { - @include example.options; - } - .select-box__option { @include example.option; } diff --git a/tests/dummy/app/styles/example3.scss b/tests/dummy/app/styles/example3.scss index 13decbdc4..108723ebd 100644 --- a/tests/dummy/app/styles/example3.scss +++ b/tests/dummy/app/styles/example3.scss @@ -7,30 +7,30 @@ @include example.box-focused; } - .select-box__dropdown[data-open='false'] .select-box__options { + .dropdown[data-open='false'] .dropdown__content { @include example.screen-reader-only; } - .select-box__trigger { + .dropdown__trigger { @include example.trigger; width: 200px; } - .select-box__trigger:focus { + .dropdown__trigger:focus { @include example.trigger-focused; } - .select-box__option { - @include example.option; - } - - .select-box__options { - @include example.options; + .dropdown__content { + @include example.dropdown-content; height: 240px; } + .select-box__option { + @include example.option; + } + .select-box__option[aria-current='true'] { @include example.option-current; } diff --git a/tests/dummy/app/styles/example4.scss b/tests/dummy/app/styles/example4.scss index bf7171d36..070e92ac2 100644 --- a/tests/dummy/app/styles/example4.scss +++ b/tests/dummy/app/styles/example4.scss @@ -7,30 +7,30 @@ @include example.box-focused; } - .select-box__dropdown[data-open='false'] .select-box__options { + .dropdown[data-open='false'] .dropdown__content { @include example.screen-reader-only; } - .select-box__trigger { + .dropdown__trigger { @include example.trigger; width: 200px; } - .select-box__trigger:focus { + .dropdown__trigger:focus { @include example.trigger-focused; } - .select-box__option { - @include example.option; - } - - .select-box__options { - @include example.options; + .dropdown__content { + @include example.dropdown-content; height: 282px; } + .select-box__option { + @include example.option; + } + .select-box__option[aria-current='true'] { @include example.option-current; } diff --git a/tests/dummy/app/styles/example6.scss b/tests/dummy/app/styles/example6.scss index 716bbab59..2c0938885 100644 --- a/tests/dummy/app/styles/example6.scss +++ b/tests/dummy/app/styles/example6.scss @@ -7,17 +7,16 @@ @include example.box-focused; } - .dropdown__content { - display: flex; - flex-direction: column; - } - - .select-box__trigger { + .dropdown__trigger { @include example.trigger; width: 200px; } + .dropdown__content { + @include example.dropdown-content; + } + .select-box__input { @include example.input; } @@ -30,10 +29,6 @@ @include example.option; } - .select-box__options { - @include example.options; - } - .select-box__option[aria-current='true'] { @include example.option-current; } diff --git a/tests/dummy/app/styles/example7.scss b/tests/dummy/app/styles/example7.scss index 11cbdbcd1..a537e89f6 100644 --- a/tests/dummy/app/styles/example7.scss +++ b/tests/dummy/app/styles/example7.scss @@ -7,13 +7,17 @@ @include example.box-focused; } - .select-box__trigger { + .dropdown__trigger { @include example.trigger; width: 20px; text-align: center; } + .dropdown__content { + @include example.dropdown-content; + } + .select-box__input { @include example.input; } @@ -26,10 +30,6 @@ @include example.option; } - .select-box__options { - @include example.options; - } - .select-box__option[aria-current='true'] { @include example.option-current; } diff --git a/tests/dummy/app/templates/performance.hbs b/tests/dummy/app/templates/performance.hbs index edb72320c..d9fb4c219 100644 --- a/tests/dummy/app/templates/performance.hbs +++ b/tests/dummy/app/templates/performance.hbs @@ -14,7 +14,7 @@ {{if sb.value sb.value.name "None"}} {{#if dd.isOpen}} - + {{#each this.data as |value|}} @@ -22,7 +22,7 @@ {{/each}} - + {{/if}} \ No newline at end of file diff --git a/tests/integration/components/dropdown/content/render-test.gjs b/tests/integration/components/dropdown/content/render-test.gjs index f1cdb167f..be4c49c81 100644 --- a/tests/integration/components/dropdown/content/render-test.gjs +++ b/tests/integration/components/dropdown/content/render-test.gjs @@ -43,4 +43,30 @@ module('dropdown/content', function (hooks) { assert.dom('.dropdown__content').hasClass('foo'); }); + + test('tabindex', async function (assert) { + assert.expect(1); + + await render(); + + assert.dom('.dropdown__content').doesNotHaveAttribute('tabindex'); + }); + + test('tabindex (closure component)', async function (assert) { + assert.expect(1); + + // So we can disable keyboard-focusable-scrollers + + await render(); + + assert.dom('.dropdown__content').hasAttribute('tabindex', '-1'); + }); }); diff --git a/tests/integration/components/dropdown/index/focus-test.gjs b/tests/integration/components/dropdown/index/focus-test.gjs index 2d1c1d691..36deeb3cc 100644 --- a/tests/integration/components/dropdown/index/focus-test.gjs +++ b/tests/integration/components/dropdown/index/focus-test.gjs @@ -137,7 +137,9 @@ module('dropdownx (focus)', function (hooks) { assert.expect(2); // we use do not employ any methods to prevent - // keyboard-focusable-scrollers from taking affect. + // keyboard-focusable-scrollers from taking affect + // this allows focus to move to the dropdown content + // when it is overflowing. let event; diff --git a/tests/integration/components/select-box/index/api-test.gjs b/tests/integration/components/select-box/index/api-test.gjs index 058f5a5e2..6bc505080 100644 --- a/tests/integration/components/select-box/index/api-test.gjs +++ b/tests/integration/components/select-box/index/api-test.gjs @@ -27,13 +27,13 @@ module('select-box (api)', function (hooks) { await render(); @@ -159,7 +159,7 @@ module('select-box (api)', function (hooks) { assert.false(api.dropdown.isOpen); - await click('.select-box__trigger'); + await click('.select-box .dropdown__trigger'); assert.true(api.dropdown.isOpen); }); @@ -277,15 +277,15 @@ module('select-box (api)', function (hooks) { await render(); @@ -299,7 +299,7 @@ module('select-box (api)', function (hooks) { .hasAttribute('aria-selected', 'true'); assert.dom('.select-box__input').isNotFocused(); - assert.dom('.select-box__trigger').isNotFocused(); + assert.dom('.select-box .dropdown__trigger').isNotFocused(); assert.dom('.select-box__options').isNotFocused(); }); @@ -312,28 +312,28 @@ module('select-box (api)', function (hooks) { await render(); await click('.dropdown__trigger'); - assert.dom('.select-box__dropdown').hasAttribute('data-open', 'true'); + assert.dom('.select-box .dropdown').hasAttribute('data-open', 'true'); api.select('2'); await rerender(); assert - .dom('.select-box__dropdown') + .dom('.select-box .dropdown') .hasAttribute( 'data-open', 'false', diff --git a/tests/integration/components/select-box/index/click-input-test.gjs b/tests/integration/components/select-box/index/click-input-test.gjs index eebc0287a..c8ec7f19c 100644 --- a/tests/integration/components/select-box/index/click-input-test.gjs +++ b/tests/integration/components/select-box/index/click-input-test.gjs @@ -20,8 +20,10 @@ module('select-box (clicking input)', function (hooks) { await click('.select-box__input'); - assert.dom('.select-box__dropdown').hasAttribute('data-open', 'false'); + assert.dom('.select-box .dropdown').hasAttribute('data-open', 'false'); assert.dom('.select-box__input').hasAttribute('aria-expanded', 'false'); - assert.dom('.select-box__trigger').hasAttribute('aria-expanded', 'false'); + assert + .dom('.select-box .dropdown__trigger') + .hasAttribute('aria-expanded', 'false'); }); }); diff --git a/tests/integration/components/select-box/index/click-option-test.gjs b/tests/integration/components/select-box/index/click-option-test.gjs index 7c2d3c32c..9ef3f329c 100644 --- a/tests/integration/components/select-box/index/click-option-test.gjs +++ b/tests/integration/components/select-box/index/click-option-test.gjs @@ -54,25 +54,25 @@ module('select-box (clicking option)', function (hooks) { await render(); - await click('.select-box__trigger'); + await click('.select-box .dropdown__trigger'); assert - .dom('.select-box__dropdown') + .dom('.select-box .dropdown') .hasAttribute('data-open', 'true', 'precondition'); await click('a'); @@ -84,16 +84,18 @@ module('select-box (clicking option)', function (hooks) { you wish to have options that can be cmd clicked to open in a new tab` ); - assert.dom('.select-box__dropdown').hasAttribute( + assert.dom('.select-box .dropdown').hasAttribute( 'data-open', 'false', `the select box closes because an option was selected. even though the target was a child of the option.` ); - assert.dom('.select-box__trigger').hasText('#'); + assert.dom('.select-box .dropdown__trigger').hasText('#'); - assert.dom('.select-box__trigger').isFocused('does not lose focus'); + assert + .dom('.select-box .dropdown__trigger') + .isFocused('does not lose focus'); }); test('clicking an option closes single select boxes', async function (assert) { @@ -101,27 +103,27 @@ module('select-box (clicking option)', function (hooks) { await render(); - await click('.select-box__trigger'); + await click('.select-box .dropdown__trigger'); assert - .dom('.select-box__dropdown') + .dom('.select-box .dropdown') .hasAttribute('data-open', 'true', 'precondition'); await click('.select-box__option'); assert - .dom('.select-box__dropdown') + .dom('.select-box .dropdown') .hasAttribute( 'data-open', 'false', @@ -134,26 +136,26 @@ module('select-box (clicking option)', function (hooks) { await render(); - await click('.select-box__trigger'); + await click('.select-box .dropdown__trigger'); assert - .dom('.select-box__dropdown') + .dom('.select-box .dropdown') .hasAttribute('data-open', 'true', 'precondition'); await click('.select-box__option'); - assert.dom('.select-box__dropdown').hasAttribute( + assert.dom('.select-box .dropdown').hasAttribute( 'data-open', 'true', `assume that more options are to be selected. do not assume its ok to close @@ -197,21 +199,21 @@ module('select-box (clicking option)', function (hooks) { await render(); - await click('.select-box__trigger'); + await click('.select-box .dropdown__trigger'); await click('.select-box__option'); assert.ok(true, 'does not cause infinite revalidation bug'); diff --git a/tests/integration/components/select-box/index/click-trigger-test.gjs b/tests/integration/components/select-box/index/click-trigger-test.gjs index 5f92ebb36..d46a375a5 100644 --- a/tests/integration/components/select-box/index/click-trigger-test.gjs +++ b/tests/integration/components/select-box/index/click-trigger-test.gjs @@ -28,18 +28,24 @@ module('select-box (clicking trigger)', function (hooks) { ); - assert.dom('.select-box__dropdown').hasAttribute('data-open', 'false'); - assert.dom('.select-box__trigger').hasAttribute('aria-expanded', 'false'); + assert.dom('.select-box .dropdown').hasAttribute('data-open', 'false'); + assert + .dom('.select-box .dropdown__trigger') + .hasAttribute('aria-expanded', 'false'); - await triggerEvent('.select-box__trigger', 'mousedown'); + await triggerEvent('.select-box .dropdown__trigger', 'mousedown'); - assert.dom('.select-box__dropdown').hasAttribute('data-open', 'true'); - assert.dom('.select-box__trigger').hasAttribute('aria-expanded', 'true'); + assert.dom('.select-box .dropdown').hasAttribute('data-open', 'true'); + assert + .dom('.select-box .dropdown__trigger') + .hasAttribute('aria-expanded', 'true'); - await triggerEvent('.select-box__trigger', 'mousedown'); + await triggerEvent('.select-box .dropdown__trigger', 'mousedown'); - assert.dom('.select-box__dropdown').hasAttribute('data-open', 'false'); - assert.dom('.select-box__trigger').hasAttribute('aria-expanded', 'false'); + assert.dom('.select-box .dropdown').hasAttribute('data-open', 'false'); + assert + .dom('.select-box .dropdown__trigger') + .hasAttribute('aria-expanded', 'false'); assert.true( event.defaultPrevented, @@ -61,9 +67,11 @@ module('select-box (clicking trigger)', function (hooks) { ); - await click('.select-box__trigger', { button: 2 }); + await click('.select-box .dropdown__trigger', { button: 2 }); - assert.dom('.select-box__dropdown').hasAttribute('data-open', 'false'); - assert.dom('.select-box__trigger').hasAttribute('aria-expanded', 'false'); + assert.dom('.select-box .dropdown').hasAttribute('data-open', 'false'); + assert + .dom('.select-box .dropdown__trigger') + .hasAttribute('aria-expanded', 'false'); }); }); diff --git a/tests/integration/components/select-box/index/closing-test.gjs b/tests/integration/components/select-box/index/closing-test.gjs index fb212350c..8b38b1c67 100644 --- a/tests/integration/components/select-box/index/closing-test.gjs +++ b/tests/integration/components/select-box/index/closing-test.gjs @@ -28,13 +28,13 @@ module('select-box (closing)', function (hooks) { await render(); - await click('.select-box__trigger'); + await click('.select-box .dropdown__trigger'); - assert.dom('.select-box__dropdown').hasAttribute('data-open', 'true'); - assert.dom('.select-box__trigger').hasAttribute('aria-expanded', 'true'); + assert.dom('.select-box .dropdown').hasAttribute('data-open', 'true'); + assert + .dom('.select-box .dropdown__trigger') + .hasAttribute('aria-expanded', 'true'); assert.dom('.select-box__input').hasAttribute('aria-expanded', 'true'); - await focus('.select-box__trigger'); - await blur('.select-box__trigger'); + await focus('.select-box .dropdown__trigger'); + await blur('.select-box .dropdown__trigger'); - assert.dom('.select-box__dropdown').hasAttribute('data-open', 'false'); - assert.dom('.select-box__trigger').hasAttribute('aria-expanded', 'false'); + assert.dom('.select-box .dropdown').hasAttribute('data-open', 'false'); + assert + .dom('.select-box .dropdown__trigger') + .hasAttribute('aria-expanded', 'false'); assert.dom('.select-box__input').hasAttribute('aria-expanded', 'false'); }); @@ -96,14 +104,16 @@ module('select-box (closing)', function (hooks) { ); - await click('.select-box__trigger'); + await click('.select-box .dropdown__trigger'); assert.dom('.select-box__input').isFocused(); await blur('.select-box__input'); - assert.dom('.select-box__dropdown').hasAttribute('data-open', 'false'); - assert.dom('.select-box__trigger').hasAttribute('aria-expanded', 'false'); + assert.dom('.select-box .dropdown').hasAttribute('data-open', 'false'); + assert + .dom('.select-box .dropdown__trigger') + .hasAttribute('aria-expanded', 'false'); assert.dom('.select-box__input').hasAttribute('aria-expanded', 'false'); }); @@ -118,13 +128,13 @@ module('select-box (closing)', function (hooks) { await render(); - await click('.select-box__trigger'); + await click('.select-box .dropdown__trigger'); await click('.select-box__option'); assert.dom('.outside').hasValue('foo').isFocused(); @@ -154,23 +164,23 @@ module('select-box (closing)', function (hooks) { await render(); - await triggerEvent('.select-box__trigger', 'mousedown'); + await triggerEvent('.select-box .dropdown__trigger', 'mousedown'); await triggerEvent('.outside', 'mouseup'); - assert.dom('.select-box__dropdown').hasAttribute('data-open', 'false'); + assert.dom('.select-box .dropdown').hasAttribute('data-open', 'false'); assert.verifySteps(['close']); }); @@ -187,11 +197,11 @@ module('select-box (closing)', function (hooks) {
); - assert.dom('.select-box__dropdown').hasAttribute('data-open', 'true'); + assert.dom('.select-box .dropdown').hasAttribute('data-open', 'true'); await click('.outside'); - assert.dom('.select-box__dropdown').hasAttribute('data-open', 'false'); + assert.dom('.select-box .dropdown').hasAttribute('data-open', 'false'); assert.verifySteps(['close']); }); @@ -200,21 +210,25 @@ module('select-box (closing)', function (hooks) { await render(); - await click('.select-box__trigger'); - await triggerKeyEvent('.select-box__trigger', 'keydown', 'Escape'); + await click('.select-box .dropdown__trigger'); + await triggerKeyEvent( + '.select-box .dropdown__trigger', + 'keydown', + 'Escape' + ); - assert.dom('.select-box__dropdown').hasAttribute('data-open', 'false'); + assert.dom('.select-box .dropdown').hasAttribute('data-open', 'false'); assert.verifySteps(['close']); }); @@ -227,14 +241,14 @@ module('select-box (closing)', function (hooks) { - + - + ); - await click('.select-box__trigger'); + await click('.select-box .dropdown__trigger'); assert.verifySteps( [], @@ -255,7 +269,7 @@ module('select-box (closing)', function (hooks) { {{#if dd.isOpen}} - + @@ -264,19 +278,19 @@ module('select-box (closing)', function (hooks) { class="close" {{on "click" dd.close}} > - + {{/if}} ); - await click('.select-box__trigger'); + await click('.select-box .dropdown__trigger'); - assert.dom('.select-box__dropdown').hasAttribute('data-open', 'true'); + assert.dom('.select-box .dropdown').hasAttribute('data-open', 'true'); await click('.close'); - assert.dom('.select-box__dropdown').hasAttribute('data-open', 'false'); + assert.dom('.select-box .dropdown').hasAttribute('data-open', 'false'); assert.ok(true, 'does not cause infinite revalidation bug'); }); @@ -286,27 +300,27 @@ module('select-box (closing)', function (hooks) { await render(); - await click('.select-box__trigger'); + await click('.select-box .dropdown__trigger'); await triggerEvent('.select-box__option:nth-child(2)', 'mouseenter'); assert .dom('.select-box__option:nth-child(2)') .hasAttribute('aria-current', 'true'); - await click('.select-box__trigger'); + await click('.select-box .dropdown__trigger'); assert.dom('.select-box__option[aria-current="true"]').doesNotExist(); }); diff --git a/tests/integration/components/select-box/index/conditional-modifier-test.gjs b/tests/integration/components/select-box/index/conditional-modifier-test.gjs index 3d5ec3cf6..abf711dc9 100644 --- a/tests/integration/components/select-box/index/conditional-modifier-test.gjs +++ b/tests/integration/components/select-box/index/conditional-modifier-test.gjs @@ -30,16 +30,16 @@ module('select-box', function (hooks) { - + - + ); - await click('.select-box__trigger'); // Open + await click('.select-box .dropdown__trigger'); // Open await click('.select-box__option'); // Close }); }); diff --git a/tests/integration/components/select-box/index/disabling-test.gjs b/tests/integration/components/select-box/index/disabling-test.gjs index 76c937294..93ee4fb31 100644 --- a/tests/integration/components/select-box/index/disabling-test.gjs +++ b/tests/integration/components/select-box/index/disabling-test.gjs @@ -32,22 +32,24 @@ module('select-box (disabling)', function (hooks) { await render(); assert.dom('.select-box').hasAttribute('data-disabled', 'true'); - assert.dom('.select-box__trigger').hasAttribute('aria-disabled', 'true'); - assert.dom('.select-box__trigger').hasAttribute('tabindex', '-1'); + assert + .dom('.select-box .dropdown__trigger') + .hasAttribute('aria-disabled', 'true'); + assert.dom('.select-box .dropdown__trigger').hasAttribute('tabindex', '-1'); assert .dom('.select-box__option[aria-disabled="true"]') .exists({ count: 3 }); @@ -86,23 +88,23 @@ module('select-box (disabling)', function (hooks) { {{#if dd.isOpen}} - + - + {{/if}} ); - await click('.select-box__trigger'); + await click('.select-box .dropdown__trigger'); await click('.select-box__option:nth-child(2)'); assert - .dom('.select-box__dropdown') + .dom('.select-box .dropdown') .hasAttribute( 'data-open', 'true', diff --git a/tests/integration/components/select-box/index/focus-test.gjs b/tests/integration/components/select-box/index/focus-test.gjs index 0922976b0..4d1499b54 100644 --- a/tests/integration/components/select-box/index/focus-test.gjs +++ b/tests/integration/components/select-box/index/focus-test.gjs @@ -60,23 +60,25 @@ module('select-box (focus)', function (hooks) { await render(); - assert.dom('.select-box__trigger').isNotFocused('does not steal focus'); + assert + .dom('.select-box .dropdown__trigger') + .isNotFocused('does not steal focus'); await click('.select-box__option'); assert - .dom('.select-box__trigger') + .dom('.select-box .dropdown__trigger') .isFocused('the trigger is the main interactive element'); }); @@ -85,14 +87,14 @@ module('select-box (focus)', function (hooks) { await render(); @@ -159,23 +161,23 @@ module('select-box (focus)', function (hooks) { await render(); - await focus('.select-box__trigger'); + await focus('.select-box .dropdown__trigger'); await triggerEvent('.select-box__option', 'mouseenter'); assert.dom('.select-box__option').hasAttribute('aria-current', 'true'); - await blur('.select-box__trigger'); + await blur('.select-box .dropdown__trigger'); assert.dom('.select-box__option').hasAttribute('aria-current', 'true'); }); @@ -214,10 +216,12 @@ module('select-box (focus)', function (hooks) { ); - await focus('.select-box__trigger'); + await focus('.select-box .dropdown__trigger'); - assert.dom('.select-box__dropdown').hasAttribute('data-open', 'false'); - assert.dom('.select-box__trigger').hasAttribute('aria-expanded', 'false'); + assert.dom('.select-box .dropdown').hasAttribute('data-open', 'false'); + assert + .dom('.select-box .dropdown__trigger') + .hasAttribute('aria-expanded', 'false'); assert.dom('.select-box__input').hasAttribute('aria-expanded', 'false'); }); @@ -229,25 +233,27 @@ module('select-box (focus)', function (hooks) { {{#if dd.isOpen}} - + - + {{/if}} ); - await click('.select-box__trigger'); + await click('.select-box .dropdown__trigger'); assert.dom('.select-box__input').isFocused('focus advances to input'); await click('.select-box__option'); assert.dom('.select-box__option').doesNotExist('precondition (closed)'); - assert.dom('.select-box__trigger').isFocused('focus restored to trigger'); + assert + .dom('.select-box .dropdown__trigger') + .isFocused('focus restored to trigger'); }); test('a focused input going away', async function (assert) { @@ -258,12 +264,12 @@ module('select-box (focus)', function (hooks) { {{#if dd.isOpen}} - + - + {{/if}} @@ -271,14 +277,14 @@ module('select-box (focus)', function (hooks) { ); - await click('.select-box__trigger'); + await click('.select-box .dropdown__trigger'); assert.dom('.select-box__input').isFocused('focus advances to input'); await click('.outside'); assert.dom('.select-box__option').doesNotExist('precondition (closed)'); - assert.dom('.select-box__trigger').isNotFocused(` + assert.dom('.select-box .dropdown__trigger').isNotFocused(` if focus is leaving the select box, this will cause it to close, closing should never steal focus. focus should be allowed to leave. `); @@ -292,19 +298,19 @@ module('select-box (focus)', function (hooks) { {{#if dd.isOpen}} - + - + {{/if}} ); - await focus('.select-box__trigger'); - await triggerKeyEvent('.select-box__trigger', 'keydown', 'Enter'); + await focus('.select-box .dropdown__trigger'); + await triggerKeyEvent('.select-box .dropdown__trigger', 'keydown', 'Enter'); assert.dom('.select-box__input').isFocused('focus advances to input'); @@ -312,7 +318,9 @@ module('select-box (focus)', function (hooks) { await triggerKeyEvent('.select-box__input', 'keydown', 'Enter'); assert.dom('.select-box__input').doesNotExist('precondition (closed)'); - assert.dom('.select-box__trigger').isFocused('focus restored to trigger'); + assert + .dom('.select-box .dropdown__trigger') + .isFocused('focus restored to trigger'); }); test('focus leaving combobox (trigger)', async function (assert) { @@ -327,21 +335,23 @@ module('select-box (focus)', function (hooks) { ); - await click('.select-box__trigger'); + await click('.select-box .dropdown__trigger'); assert - .dom('.select-box__dropdown') + .dom('.select-box .dropdown') .hasAttribute('data-open', 'true', 'precondition'); focus('.outside'); - await waitFor('.select-box__trigger'); + await waitFor('.select-box .dropdown__trigger'); - assert.dom('.select-box__trigger').isNotFocused('focus is not stolen'); + assert + .dom('.select-box .dropdown__trigger') + .isNotFocused('focus is not stolen'); await settled(); - assert.dom('.select-box__dropdown').hasAttribute('data-open', 'false'); + assert.dom('.select-box .dropdown').hasAttribute('data-open', 'false'); assert.dom('.outside').isFocused(); }); @@ -389,7 +399,7 @@ module('select-box (focus)', function (hooks) { ); - assert.dom('.select-box__trigger').hasAttribute( + assert.dom('.select-box .dropdown__trigger').hasAttribute( 'tabindex', '-1', `because the input is the focused element for this combobox, @@ -403,27 +413,27 @@ module('select-box (focus)', function (hooks) { await render(); - await click('.select-box__trigger'); + await click('.select-box .dropdown__trigger'); await click('.inside'); assert - .dom('.select-box__dropdown') + .dom('.select-box .dropdown') .hasAttribute( 'data-open', 'true', 'remains open if mouse lands on a non interactive element inside the select box' ); - assert.dom('.select-box__trigger').isFocused(` + assert.dom('.select-box .dropdown__trigger').isFocused(` focus must be maintained on the interactive element, regardless of where is clicked inside the select box, otherwise the select box will not be receptive to user actions, which is the @@ -448,10 +458,10 @@ module('select-box (focus)', function (hooks) { ); - await click('.select-box__trigger'); + await click('.select-box .dropdown__trigger'); await click('.inside'); - assert.dom('.select-box__dropdown').hasAttribute( + assert.dom('.select-box .dropdown').hasAttribute( 'data-open', 'true', `focus is free to move about inside an open select box dropdown @@ -460,7 +470,7 @@ module('select-box (focus)', function (hooks) { otherwise the select box will not be receptive to user input` ); - assert.dom('.select-box__trigger').isFocused(); + assert.dom('.select-box .dropdown__trigger').isFocused(); assert.true(event.defaultPrevented); }); @@ -478,14 +488,14 @@ module('select-box (focus)', function (hooks) { ); - await click('.select-box__trigger'); + await click('.select-box .dropdown__trigger'); await click('.inside'); - assert.dom('.select-box__dropdown').hasAttribute('data-open', 'true'); + assert.dom('.select-box .dropdown').hasAttribute('data-open', 'true'); await focus('.outside'); - assert.dom('.select-box__dropdown').hasAttribute('data-open', 'false'); + assert.dom('.select-box .dropdown').hasAttribute('data-open', 'false'); }); test('focusable options', async function (assert) { @@ -551,27 +561,27 @@ module('select-box (focus)', function (hooks) { await render(); - await click('.select-box__trigger'); + await click('.select-box .dropdown__trigger'); - assert.dom('.select-box__trigger').doesNotHaveStyle( + assert.dom('.select-box .dropdown__trigger').doesNotHaveStyle( { outline: 'rgb(255, 0, 0) solid 2px' }, `the select box's focus management does not accidentally cause focus-visible styles to apply. (here, the trigger was clicked, @@ -613,14 +623,20 @@ module('select-box (focus)', function (hooks) { }); test('keyboard-focusable-scrollers fix', async function (assert) { - assert.expect(1); + assert.expect(2); - // we use tabindex="-1" on the listbox to prevent + // we use tabindex="-1" on the dropdown content to prevent // keyboard-focusable-scrollers from stealing focus, but // this has a down side of actually allowing the listbox // to be focusable on click, so we must prevent that. + // // https://issues.chromium.org/issues/376718258 // https://bugzilla.mozilla.org/show_bug.cgi?id=1930662 + // + // here, when the primary interactive element is focused, + // and the user presses tab, we always want focus to move + // to the next interactive element. skipping the overflowing + // dropdown content. let event; @@ -629,18 +645,19 @@ module('select-box (focus)', function (hooks) { await render(); - await click('.select-box__trigger'); + await click('.select-box .dropdown__trigger'); await click('.select-box__options'); + assert.dom('.dropdown__content').hasAttribute('tabindex', '-1'); assert.true(event.defaultPrevented); }); }); diff --git a/tests/integration/components/select-box/index/in-element-test.gjs b/tests/integration/components/select-box/index/in-element-test.gjs index c49714f49..55038477d 100644 --- a/tests/integration/components/select-box/index/in-element-test.gjs +++ b/tests/integration/components/select-box/index/in-element-test.gjs @@ -19,12 +19,12 @@ module('select-box (in-element)', function (hooks) { {{#if dd.isOpen}} {{#in-element (destination) insertBefore=null}} - + - + {{/in-element}} {{/if}} @@ -35,16 +35,16 @@ module('select-box (in-element)', function (hooks) { ); - await click('.select-box__trigger'); + await click('.select-box .dropdown__trigger'); - assert.dom('.select-box__dropdown').hasAttribute('data-open', 'true'); + assert.dom('.select-box .dropdown').hasAttribute('data-open', 'true'); assert.dom('.select-box .select-box__options').doesNotExist(); assert.dom('.destination .select-box__options').exists(); await click('.select-box__option:nth-child(2)'); - assert.dom('.select-box__dropdown').hasAttribute('data-open', 'false'); - assert.dom('.select-box__trigger').hasText('bar'); + assert.dom('.select-box .dropdown').hasAttribute('data-open', 'false'); + assert.dom('.select-box .dropdown__trigger').hasText('bar'); await click('.outside'); diff --git a/tests/integration/components/select-box/index/jump-to-option-test.gjs b/tests/integration/components/select-box/index/jump-to-option-test.gjs index 60d4525c9..f84faf559 100644 --- a/tests/integration/components/select-box/index/jump-to-option-test.gjs +++ b/tests/integration/components/select-box/index/jump-to-option-test.gjs @@ -47,21 +47,21 @@ module('select-box (jump to option)', function (hooks) { await render(); - await click('.select-box__trigger'); - await triggerKeyEvent('.select-box__trigger', 'keydown', 'B'); + await click('.select-box .dropdown__trigger'); + await triggerKeyEvent('.select-box .dropdown__trigger', 'keydown', 'B'); assert .dom('.select-box__option:nth-child(2)') @@ -75,21 +75,21 @@ module('select-box (jump to option)', function (hooks) { await render(); - await focus('.select-box__trigger'); - await triggerKeyEvent('.select-box__trigger', 'keydown', 'A'); + await focus('.select-box .dropdown__trigger'); + await triggerKeyEvent('.select-box .dropdown__trigger', 'keydown', 'A'); assert .dom('.select-box__option:nth-child(1)') @@ -103,20 +103,20 @@ module('select-box (jump to option)', function (hooks) { await render(); - await focus('.select-box__trigger'); - await triggerKeyEvent('.select-box__trigger', 'keydown', 'B'); + await focus('.select-box .dropdown__trigger'); + await triggerKeyEvent('.select-box .dropdown__trigger', 'keydown', 'B'); assert .dom('.select-box__option:nth-child(2)') @@ -130,14 +130,14 @@ module('select-box (jump to option)', function (hooks) { await render(); @@ -269,23 +269,23 @@ module('select-box (jump to option)', function (hooks) { await render(); - await focus('.select-box__trigger'); - await triggerKeyEvent('.select-box__trigger', 'keydown', ' '); - await triggerKeyEvent('.select-box__trigger', 'keydown', ' '); - await triggerKeyEvent('.select-box__trigger', 'keydown', ' '); + await focus('.select-box .dropdown__trigger'); + await triggerKeyEvent('.select-box .dropdown__trigger', 'keydown', ' '); + await triggerKeyEvent('.select-box .dropdown__trigger', 'keydown', ' '); + await triggerKeyEvent('.select-box .dropdown__trigger', 'keydown', ' '); assert .dom('.select-box__option:nth-child(1)') @@ -387,15 +387,15 @@ module('select-box (jump to option)', function (hooks) { await render(); @@ -404,7 +404,7 @@ module('select-box (jump to option)', function (hooks) { .dom('.select-box__option:nth-child(2)') .hasAttribute('aria-current', 'true'); - await triggerKeyEvent('.select-box__trigger', 'keydown', 'A'); + await triggerKeyEvent('.select-box .dropdown__trigger', 'keydown', 'A'); assert .dom('.select-box__option:nth-child(3)') @@ -416,15 +416,15 @@ module('select-box (jump to option)', function (hooks) { await render(); @@ -433,19 +433,19 @@ module('select-box (jump to option)', function (hooks) { .dom('.select-box__option:nth-child(2)') .hasAttribute('aria-current', 'true'); - await triggerKeyEvent('.select-box__trigger', 'keydown', 'A'); + await triggerKeyEvent('.select-box .dropdown__trigger', 'keydown', 'A'); assert .dom('.select-box__option:nth-child(3)') .hasAttribute('aria-current', 'true'); - await triggerKeyEvent('.select-box__trigger', 'keydown', 'A'); + await triggerKeyEvent('.select-box .dropdown__trigger', 'keydown', 'A'); assert .dom('.select-box__option:nth-child(1)') .hasAttribute('aria-current', 'true'); - await triggerKeyEvent('.select-box__trigger', 'keydown', 'A'); + await triggerKeyEvent('.select-box .dropdown__trigger', 'keydown', 'A'); assert .dom('.select-box__option:nth-child(2)') diff --git a/tests/integration/components/select-box/index/key-arrow-down-test.gjs b/tests/integration/components/select-box/index/key-arrow-down-test.gjs index 2e61cd2f6..ae8e04904 100644 --- a/tests/integration/components/select-box/index/key-arrow-down-test.gjs +++ b/tests/integration/components/select-box/index/key-arrow-down-test.gjs @@ -60,57 +60,77 @@ module('select-box (down arrow key)', function (hooks) { await render(); assert.dom('.select-box__option[aria-current="true"]').doesNotExist(); - await focus('.select-box__trigger'); + await focus('.select-box .dropdown__trigger'); assert.dom('.select-box__option[aria-current="true"]').doesNotExist(); - await triggerKeyEvent('.select-box__trigger', 'keydown', 'ArrowDown'); + await triggerKeyEvent( + '.select-box .dropdown__trigger', + 'keydown', + 'ArrowDown' + ); assert .dom('.select-box__option[aria-current="true"]') .doesNotExist('the first down auto opens rather than navigating options'); - await triggerKeyEvent('.select-box__trigger', 'keydown', 'ArrowDown'); + await triggerKeyEvent( + '.select-box .dropdown__trigger', + 'keydown', + 'ArrowDown' + ); assert .dom('.select-box__option:nth-child(1)') .hasAttribute('aria-current', 'true'); - await triggerKeyEvent('.select-box__trigger', 'keydown', 'ArrowDown'); + await triggerKeyEvent( + '.select-box .dropdown__trigger', + 'keydown', + 'ArrowDown' + ); assert .dom('.select-box__option:nth-child(2)') .hasAttribute('aria-current', 'true'); - await triggerKeyEvent('.select-box__trigger', 'keydown', 'ArrowDown'); + await triggerKeyEvent( + '.select-box .dropdown__trigger', + 'keydown', + 'ArrowDown' + ); assert .dom('.select-box__option:nth-child(3)') .hasAttribute('aria-current', 'true'); - await triggerKeyEvent('.select-box__trigger', 'keydown', 'ArrowDown'); + await triggerKeyEvent( + '.select-box .dropdown__trigger', + 'keydown', + 'ArrowDown' + ); assert .dom('.select-box__option:nth-child(3)') .hasAttribute('aria-current', 'true'); assert - .dom('.select-box__trigger') + .dom('.select-box .dropdown__trigger') .hasAttribute( 'aria-activedescendant', find('.select-box__option:nth-child(3)').getAttribute('id') @@ -202,19 +222,19 @@ module('select-box (down arrow key)', function (hooks) { {{#if dd.isOpen}} - + a b c - + {{/if}} ); - await click('.select-box__trigger'); + await click('.select-box .dropdown__trigger'); const startTop = find('.select-box__option:nth-child(2)').offsetTop; const expectedTop = find('.select-box__option:nth-child(3)').offsetTop; @@ -223,7 +243,11 @@ module('select-box (down arrow key)', function (hooks) { assert.strictEqual(expectedTop, 32); assert.strictEqual(find('.dropdown__content').scrollTop, startTop); - await triggerKeyEvent('.select-box__trigger', 'keydown', 'ArrowDown'); + await triggerKeyEvent( + '.select-box .dropdown__trigger', + 'keydown', + 'ArrowDown' + ); assert.strictEqual(find('.dropdown__content').scrollTop, expectedTop); }); @@ -233,28 +257,32 @@ module('select-box (down arrow key)', function (hooks) { await render(); - await focus('.select-box__trigger'); - await triggerKeyEvent('.select-box__trigger', 'keydown', 'ArrowDown'); + await focus('.select-box .dropdown__trigger'); + await triggerKeyEvent( + '.select-box .dropdown__trigger', + 'keydown', + 'ArrowDown' + ); assert - .dom('.select-box__dropdown') + .dom('.select-box .dropdown') .hasAttribute('data-open', 'true', 'opens the select box dropdown'); assert - .dom('.select-box__trigger') + .dom('.select-box .dropdown__trigger') .hasAttribute('aria-expanded', 'true', 'opens the combobox box'); assert.dom('.select-box__option[aria-current="true"]').doesNotExist(); @@ -265,21 +293,25 @@ module('select-box (down arrow key)', function (hooks) { await render(); - await focus('.select-box__trigger'); - await triggerKeyEvent('.select-box__trigger', 'keydown', 'ArrowDown'); + await focus('.select-box .dropdown__trigger'); + await triggerKeyEvent( + '.select-box .dropdown__trigger', + 'keydown', + 'ArrowDown' + ); assert .dom('.select-box__option:nth-child(2)') @@ -297,13 +329,13 @@ module('select-box (down arrow key)', function (hooks) { await render(); @@ -311,7 +343,7 @@ module('select-box (down arrow key)', function (hooks) { await focus('.select-box__input'); await triggerKeyEvent('.select-box__input', 'keydown', 'ArrowDown'); - assert.dom('.select-box__dropdown').hasAttribute('data-open', 'false'); + assert.dom('.select-box .dropdown').hasAttribute('data-open', 'false'); assert.dom('.select-box__input').hasAttribute('aria-expanded', 'false'); }); @@ -387,21 +419,25 @@ module('select-box (down arrow key)', function (hooks) { await render(); - await focus('.select-box__trigger'); - await triggerKeyEvent('.select-box__trigger', 'keydown', 'ArrowDown'); + await focus('.select-box .dropdown__trigger'); + await triggerKeyEvent( + '.select-box .dropdown__trigger', + 'keydown', + 'ArrowDown' + ); assert.strictEqual(find('.select-box__options').scrollTop, 0); }); diff --git a/tests/integration/components/select-box/index/key-arrow-up-test.gjs b/tests/integration/components/select-box/index/key-arrow-up-test.gjs index dd3806a15..451a625ab 100644 --- a/tests/integration/components/select-box/index/key-arrow-up-test.gjs +++ b/tests/integration/components/select-box/index/key-arrow-up-test.gjs @@ -65,26 +65,30 @@ module('select-box (up arrow key)', function (hooks) { await render(); assert.dom('.select-box__option[aria-current="true"]').doesNotExist(); - await focus('.select-box__trigger'); + await focus('.select-box .dropdown__trigger'); assert.dom('.select-box__option[aria-current="true"]').doesNotExist(); - await triggerKeyEvent('.select-box__trigger', 'keydown', 'ArrowUp'); + await triggerKeyEvent( + '.select-box .dropdown__trigger', + 'keydown', + 'ArrowUp' + ); assert .dom('.select-box__option[aria-current="true"]') @@ -92,26 +96,38 @@ module('select-box (up arrow key)', function (hooks) { await triggerEvent('.select-box__option:nth-child(3)', 'mouseenter'); - await triggerKeyEvent('.select-box__trigger', 'keydown', 'ArrowUp'); + await triggerKeyEvent( + '.select-box .dropdown__trigger', + 'keydown', + 'ArrowUp' + ); assert .dom('.select-box__option:nth-child(2)') .hasAttribute('aria-current', 'true'); - await triggerKeyEvent('.select-box__trigger', 'keydown', 'ArrowUp'); + await triggerKeyEvent( + '.select-box .dropdown__trigger', + 'keydown', + 'ArrowUp' + ); assert .dom('.select-box__option:nth-child(1)') .hasAttribute('aria-current', 'true'); assert - .dom('.select-box__trigger') + .dom('.select-box .dropdown__trigger') .hasAttribute( 'aria-activedescendant', find('.select-box__option:nth-child(1)').getAttribute('id') ); - await triggerKeyEvent('.select-box__trigger', 'keydown', 'ArrowUp'); + await triggerKeyEvent( + '.select-box .dropdown__trigger', + 'keydown', + 'ArrowUp' + ); assert .dom('.select-box__option:nth-child(1)') @@ -199,19 +215,19 @@ module('select-box (up arrow key)', function (hooks) { {{#if dd.isOpen}} - + a b c - + {{/if}} ); - await click('.select-box__trigger'); + await click('.select-box .dropdown__trigger'); const startTop = find('.select-box__option:nth-child(2)').offsetTop; const expectedTop = find('.select-box__option:nth-child(1)').offsetTop; @@ -220,7 +236,11 @@ module('select-box (up arrow key)', function (hooks) { assert.strictEqual(expectedTop, 0); assert.strictEqual(find('.dropdown__content').scrollTop, startTop); - await triggerKeyEvent('.select-box__trigger', 'keydown', 'ArrowUp'); + await triggerKeyEvent( + '.select-box .dropdown__trigger', + 'keydown', + 'ArrowUp' + ); assert.strictEqual(find('.dropdown__content').scrollTop, expectedTop); }); @@ -230,28 +250,32 @@ module('select-box (up arrow key)', function (hooks) { await render(); - await focus('.select-box__trigger'); - await triggerKeyEvent('.select-box__trigger', 'keydown', 'ArrowUp'); + await focus('.select-box .dropdown__trigger'); + await triggerKeyEvent( + '.select-box .dropdown__trigger', + 'keydown', + 'ArrowUp' + ); assert - .dom('.select-box__dropdown') + .dom('.select-box .dropdown') .hasAttribute('data-open', 'true', 'opens the select box'); assert - .dom('.select-box__trigger') + .dom('.select-box .dropdown__trigger') .hasAttribute('aria-expanded', 'true', 'opens the combobox box'); assert @@ -264,21 +288,25 @@ module('select-box (up arrow key)', function (hooks) { await render(); - await focus('.select-box__trigger'); - await triggerKeyEvent('.select-box__trigger', 'keydown', 'ArrowDown'); + await focus('.select-box .dropdown__trigger'); + await triggerKeyEvent( + '.select-box .dropdown__trigger', + 'keydown', + 'ArrowDown' + ); assert .dom('.select-box__option:nth-child(2)') @@ -296,13 +324,13 @@ module('select-box (up arrow key)', function (hooks) { await render(); @@ -310,7 +338,7 @@ module('select-box (up arrow key)', function (hooks) { await focus('.select-box__input'); await triggerKeyEvent('.select-box__input', 'keydown', 'ArrowUp'); - assert.dom('.select-box__dropdown').hasAttribute('data-open', 'false'); + assert.dom('.select-box .dropdown').hasAttribute('data-open', 'false'); assert.dom('.select-box__input').hasAttribute('aria-expanded', 'false'); }); @@ -386,21 +414,25 @@ module('select-box (up arrow key)', function (hooks) { await render(); - await focus('.select-box__trigger'); - await triggerKeyEvent('.select-box__trigger', 'keydown', 'ArrowUp'); + await focus('.select-box .dropdown__trigger'); + await triggerKeyEvent( + '.select-box .dropdown__trigger', + 'keydown', + 'ArrowUp' + ); assert.strictEqual(find('.select-box__options').scrollTop, 0); }); diff --git a/tests/integration/components/select-box/index/key-enter-test.gjs b/tests/integration/components/select-box/index/key-enter-test.gjs index 56e1b3da6..f94661cb5 100644 --- a/tests/integration/components/select-box/index/key-enter-test.gjs +++ b/tests/integration/components/select-box/index/key-enter-test.gjs @@ -27,47 +27,51 @@ module('select-box (enter)', function (hooks) { await render(); - await focus('.select-box__trigger'); - await triggerKeyEvent('.select-box__trigger', 'keydown', 'Enter'); + await focus('.select-box .dropdown__trigger'); + await triggerKeyEvent('.select-box .dropdown__trigger', 'keydown', 'Enter'); assert.verifySteps([], 'change event is not fired'); assert.true(event.defaultPrevented); - assert.dom('.select-box__dropdown').hasAttribute('data-open', 'true'); - assert.dom('.select-box__trigger').hasAttribute('aria-expanded', 'true'); + assert.dom('.select-box .dropdown').hasAttribute('data-open', 'true'); + assert + .dom('.select-box .dropdown__trigger') + .hasAttribute('aria-expanded', 'true'); assert .dom('.select-box__option:nth-child(1)') .hasAttribute('aria-current', 'false') .hasAttribute('aria-selected', 'false'); - await triggerKeyEvent('.select-box__trigger', 'keydown', 'Enter'); + await triggerKeyEvent('.select-box .dropdown__trigger', 'keydown', 'Enter'); assert.verifySteps([], 'change event is not fired'); assert.true(event.defaultPrevented); assert - .dom('.select-box__dropdown') + .dom('.select-box .dropdown') .hasAttribute( 'data-open', 'true', 'does not close (no option was active)' ); - assert.dom('.select-box__trigger').hasAttribute('aria-expanded', 'true'); + assert + .dom('.select-box .dropdown__trigger') + .hasAttribute('aria-expanded', 'true'); }); test('enter on trigger of combobox (multiple)', async function (assert) { @@ -75,25 +79,25 @@ module('select-box (enter)', function (hooks) { await render(); - await focus('.select-box__trigger'); - await triggerKeyEvent('.select-box__trigger', 'keydown', 'Enter'); + await focus('.select-box .dropdown__trigger'); + await triggerKeyEvent('.select-box .dropdown__trigger', 'keydown', 'Enter'); - assert.dom('.select-box__dropdown').hasAttribute('data-open', 'true'); + assert.dom('.select-box .dropdown').hasAttribute('data-open', 'true'); - await triggerKeyEvent('.select-box__trigger', 'keydown', 'Enter'); + await triggerKeyEvent('.select-box .dropdown__trigger', 'keydown', 'Enter'); - assert.dom('.select-box__dropdown').hasAttribute('data-open', 'true'); + assert.dom('.select-box .dropdown').hasAttribute('data-open', 'true'); }); test('enter in input of combobox', async function (assert) { @@ -101,15 +105,15 @@ module('select-box (enter)', function (hooks) { await render(); @@ -126,7 +130,7 @@ module('select-box (enter)', function (hooks) { assert.verifySteps([]); assert.true(event.defaultPrevented); - assert.dom('.select-box__dropdown').hasAttribute('data-open', 'false'); + assert.dom('.select-box .dropdown').hasAttribute('data-open', 'false'); assert.dom('.select-box__input').hasAttribute('aria-expanded', 'false'); assert.dom('.select-box__option[aria-current="true"]').doesNotExist(); assert.dom('.select-box__option[aria-selected="true"]').doesNotExist(); @@ -135,7 +139,7 @@ module('select-box (enter)', function (hooks) { assert.verifySteps([]); assert.true(event.defaultPrevented); - assert.dom('.select-box__dropdown').hasAttribute('data-open', 'false'); + assert.dom('.select-box .dropdown').hasAttribute('data-open', 'false'); assert.dom('.select-box__input').hasAttribute('aria-expanded', 'false'); assert.dom('.select-box__option[aria-current="true"]').doesNotExist(); assert.dom('.select-box__option[aria-selected="true"]').doesNotExist(); @@ -146,16 +150,16 @@ module('select-box (enter)', function (hooks) { await render(); @@ -168,7 +172,7 @@ module('select-box (enter)', function (hooks) { assert.verifySteps([]); assert.true(event.defaultPrevented); - assert.dom('.select-box__dropdown').hasAttribute('data-open', 'true'); + assert.dom('.select-box .dropdown').hasAttribute('data-open', 'true'); assert.dom('.select-box__input').hasAttribute('aria-expanded', 'true'); assert @@ -180,7 +184,7 @@ module('select-box (enter)', function (hooks) { assert.verifySteps([]); assert.true(event.defaultPrevented); - assert.dom('.select-box__dropdown').hasAttribute('data-open', 'false'); + assert.dom('.select-box .dropdown').hasAttribute('data-open', 'false'); assert.dom('.select-box__input').hasAttribute('aria-expanded', 'false'); assert @@ -194,15 +198,15 @@ module('select-box (enter)', function (hooks) { await render(); @@ -219,7 +223,7 @@ module('select-box (enter)', function (hooks) { because instead, it will select the active option` ); - assert.dom('.select-box__dropdown').hasAttribute('data-open', 'false'); + assert.dom('.select-box .dropdown').hasAttribute('data-open', 'false'); assert.dom('.select-box__input').hasAttribute('aria-expanded', 'false'); }); @@ -297,18 +301,18 @@ module('select-box (enter)', function (hooks) { await render(); - await click('.select-box__trigger'); + await click('.select-box .dropdown__trigger'); await focus('.select-box__option'); await triggerKeyEvent('.select-box__option', 'keydown', 'Enter'); diff --git a/tests/integration/components/select-box/index/key-escape-test.gjs b/tests/integration/components/select-box/index/key-escape-test.gjs index 6d1606172..4f0a213e5 100644 --- a/tests/integration/components/select-box/index/key-escape-test.gjs +++ b/tests/integration/components/select-box/index/key-escape-test.gjs @@ -18,34 +18,42 @@ module('select-box (escape)', function (hooks) { await render(); assert.dom('.select-box__option[aria-current="true"]').doesNotExist(); - await click('.select-box__trigger'); + await click('.select-box .dropdown__trigger'); assert .dom('.select-box__option') .hasAttribute('aria-current', 'false') .hasAttribute('aria-selected', 'false'); - assert.dom('.select-box__dropdown').hasAttribute('data-open', 'true'); - assert.dom('.select-box__trigger').hasAttribute('aria-expanded', 'true'); + assert.dom('.select-box .dropdown').hasAttribute('data-open', 'true'); + assert + .dom('.select-box .dropdown__trigger') + .hasAttribute('aria-expanded', 'true'); - await triggerKeyEvent('.select-box__trigger', 'keydown', 'Escape'); + await triggerKeyEvent( + '.select-box .dropdown__trigger', + 'keydown', + 'Escape' + ); - assert.dom('.select-box__dropdown').hasAttribute('data-open', 'false'); - assert.dom('.select-box__trigger').hasAttribute('aria-expanded', 'false'); - assert.dom('.select-box__trigger').isFocused(); + assert.dom('.select-box .dropdown').hasAttribute('data-open', 'false'); + assert + .dom('.select-box .dropdown__trigger') + .hasAttribute('aria-expanded', 'false'); + assert.dom('.select-box .dropdown__trigger').isFocused(); assert .dom('.select-box__option') @@ -62,11 +70,11 @@ module('select-box (escape)', function (hooks) { - + foo - + ); @@ -80,12 +88,12 @@ module('select-box (escape)', function (hooks) { .hasAttribute('aria-current', 'false') .hasAttribute('aria-selected', 'false'); - assert.dom('.select-box__dropdown').hasAttribute('data-open', 'true'); + assert.dom('.select-box .dropdown').hasAttribute('data-open', 'true'); assert.dom('.select-box__input').hasAttribute('aria-expanded', 'true'); await triggerKeyEvent('.select-box__input', 'keydown', 'Escape'); - assert.dom('.select-box__dropdown').hasAttribute('data-open', 'false'); + assert.dom('.select-box .dropdown').hasAttribute('data-open', 'false'); assert.dom('.select-box__input').hasAttribute('aria-expanded', 'false'); assert.dom('.select-box__input').isFocused(); @@ -112,14 +120,14 @@ module('select-box (escape)', function (hooks) { ); - await click('.select-box__trigger'); + await click('.select-box .dropdown__trigger'); - assert.dom('.select-box__dropdown').hasAttribute('data-open', 'true'); + assert.dom('.select-box .dropdown').hasAttribute('data-open', 'true'); await focus('.inside'); - await triggerKeyEvent('.select-box__dropdown', 'keydown', 'Escape'); + await triggerKeyEvent('.select-box .dropdown', 'keydown', 'Escape'); - assert.dom('.select-box__dropdown').hasAttribute('data-open', 'false'); + assert.dom('.select-box .dropdown').hasAttribute('data-open', 'false'); assert.verifySteps(['close']); }); @@ -142,7 +150,7 @@ module('select-box (escape)', function (hooks) { ); - await triggerKeyEvent('.select-box__dropdown', 'keydown', 'Escape'); + await triggerKeyEvent('.select-box .dropdown', 'keydown', 'Escape'); assert.true( event instanceof Event, @@ -168,8 +176,8 @@ module('select-box (escape)', function (hooks) { ); - await click('.select-box__trigger'); - await triggerKeyEvent('.select-box__dropdown', 'keydown', 'Escape'); + await click('.select-box .dropdown__trigger'); + await triggerKeyEvent('.select-box .dropdown', 'keydown', 'Escape'); assert.notOk( event, diff --git a/tests/integration/components/select-box/index/key-options-test.gjs b/tests/integration/components/select-box/index/key-options-test.gjs index d46b08e39..4b952e6c4 100644 --- a/tests/integration/components/select-box/index/key-options-test.gjs +++ b/tests/integration/components/select-box/index/key-options-test.gjs @@ -51,15 +51,15 @@ module('select-box (keydown on options)', function (hooks) { await render(); diff --git a/tests/integration/components/select-box/index/key-space-test.gjs b/tests/integration/components/select-box/index/key-space-test.gjs index f19ac2d1f..97230d3a1 100644 --- a/tests/integration/components/select-box/index/key-space-test.gjs +++ b/tests/integration/components/select-box/index/key-space-test.gjs @@ -26,34 +26,36 @@ module('select-box (space)', function (hooks) { await render(); - await focus('.select-box__trigger'); - await triggerKeyEvent('.select-box__trigger', 'keydown', ' '); + await focus('.select-box .dropdown__trigger'); + await triggerKeyEvent('.select-box .dropdown__trigger', 'keydown', ' '); assert.verifySteps([], 'change event is not fired'); assert.true(event.defaultPrevented); - assert.dom('.select-box__dropdown').hasAttribute('data-open', 'true'); - assert.dom('.select-box__trigger').hasAttribute('aria-expanded', 'true'); + assert.dom('.select-box .dropdown').hasAttribute('data-open', 'true'); + assert + .dom('.select-box .dropdown__trigger') + .hasAttribute('aria-expanded', 'true'); assert .dom('.select-box__option:nth-child(1)') .hasAttribute('aria-current', 'false') .hasAttribute('aria-selected', 'false'); - await triggerKeyEvent('.select-box__trigger', 'keydown', ' '); + await triggerKeyEvent('.select-box .dropdown__trigger', 'keydown', ' '); assert.verifySteps([], 'change event is not fired'); assert.true(event.defaultPrevented); @@ -61,8 +63,10 @@ module('select-box (space)', function (hooks) { // Does not close (no option was active) // This is counter to a normal dropdown, which toggles. - assert.dom('.select-box__dropdown').hasAttribute('data-open', 'true'); - assert.dom('.select-box__trigger').hasAttribute('aria-expanded', 'true'); + assert.dom('.select-box .dropdown').hasAttribute('data-open', 'true'); + assert + .dom('.select-box .dropdown__trigger') + .hasAttribute('aria-expanded', 'true'); }); test('space in input of combobox', async function (assert) { @@ -70,15 +74,15 @@ module('select-box (space)', function (hooks) { await render(); @@ -90,7 +94,7 @@ module('select-box (space)', function (hooks) { assert.false(event.defaultPrevented, 'can type spaces still'); assert - .dom('.select-box__dropdown') + .dom('.select-box .dropdown') .hasAttribute( 'data-open', 'false', @@ -145,45 +149,45 @@ module('select-box (space)', function (hooks) { await render(); assert.dom('.select-box__option[aria-current="true"]').doesNotExist(); - await focus('.select-box__trigger'); + await focus('.select-box .dropdown__trigger'); assert.dom('.select-box__option[aria-current="true"]').doesNotExist(); - await triggerKeyEvent('.select-box__trigger', 'keydown', 'A'); + await triggerKeyEvent('.select-box .dropdown__trigger', 'keydown', 'A'); assert.false(event.defaultPrevented); assert.verifySteps(['A'], 'change event fires'); - await triggerKeyEvent('.select-box__trigger', 'keydown', ' '); + await triggerKeyEvent('.select-box .dropdown__trigger', 'keydown', ' '); assert.true( event.defaultPrevented, 'will not scroll if space is pressed whilst typing to jump to an option' ); - await triggerKeyEvent('.select-box__trigger', 'keydown', '2'); + await triggerKeyEvent('.select-box .dropdown__trigger', 'keydown', '2'); assert.false(event.defaultPrevented); assert.verifySteps(['A 2'], 'change event fires'); - assert.dom('.select-box__dropdown').hasAttribute( + assert.dom('.select-box .dropdown').hasAttribute( 'data-open', 'false', `space usually toggles a select box open/closed. but in this case diff --git a/tests/integration/components/select-box/index/mouse-option-test.gjs b/tests/integration/components/select-box/index/mouse-option-test.gjs index 2ad9c5ece..2a4a073f1 100644 --- a/tests/integration/components/select-box/index/mouse-option-test.gjs +++ b/tests/integration/components/select-box/index/mouse-option-test.gjs @@ -241,20 +241,20 @@ module('select-box (mouseenter option)', function (hooks) { await render(); - await focus('.select-box__trigger'); + await focus('.select-box .dropdown__trigger'); await triggerEvent('.select-box__option:nth-child(2)', 'mouseenter'); await triggerEvent('.select-box', 'mouseleave'); diff --git a/tests/integration/components/select-box/index/mouse-up-test.gjs b/tests/integration/components/select-box/index/mouse-up-test.gjs index 78a3d1260..ab759d972 100644 --- a/tests/integration/components/select-box/index/mouse-up-test.gjs +++ b/tests/integration/components/select-box/index/mouse-up-test.gjs @@ -14,19 +14,19 @@ module('select-box (mouseenter option)', function (hooks) { await render(); - await triggerEvent('.select-box__trigger', 'mousedown'); + await triggerEvent('.select-box .dropdown__trigger', 'mousedown'); await triggerEvent('.select-box__option:nth-child(2)', 'mouseup'); assert @@ -45,30 +45,30 @@ module('select-box (mouseenter option)', function (hooks) { await render(); - await focus('.select-box__trigger'); - await triggerEvent('.select-box__trigger', 'mousedown'); + await focus('.select-box .dropdown__trigger'); + await triggerEvent('.select-box .dropdown__trigger', 'mousedown'); await triggerEvent('.select-box__option:nth-child(2)', 'mouseenter'); await triggerEvent('.select-box', 'mouseleave'); await triggerEvent('.outside', 'mouseup'); assert.dom('.select-box__option[aria-current="true"]').doesNotExist(); - assert.dom('.select-box__trigger').isFocused(); - assert.dom('.select-box__dropdown').hasAttribute('data-open', 'false'); + assert.dom('.select-box .dropdown__trigger').isFocused(); + assert.dom('.select-box .dropdown').hasAttribute('data-open', 'false'); assert.verifySteps([]); }); }); diff --git a/tests/integration/components/select-box/index/opening-test.gjs b/tests/integration/components/select-box/index/opening-test.gjs index e77591b5b..bc4f15010 100644 --- a/tests/integration/components/select-box/index/opening-test.gjs +++ b/tests/integration/components/select-box/index/opening-test.gjs @@ -23,16 +23,16 @@ module('select-box (opening)', function (hooks) { await render(); - assert.dom('.select-box__dropdown').hasAttribute('data-open', 'false'); + assert.dom('.select-box .dropdown').hasAttribute('data-open', 'false'); // Intentionally twice await click('.open'); @@ -40,8 +40,10 @@ module('select-box (opening)', function (hooks) { assert.verifySteps(['open']); - assert.dom('.select-box__dropdown').hasAttribute('data-open', 'true'); - assert.dom('.select-box__trigger').hasAttribute('aria-expanded', 'true'); + assert.dom('.select-box .dropdown').hasAttribute('data-open', 'true'); + assert + .dom('.select-box .dropdown__trigger') + .hasAttribute('aria-expanded', 'true'); assert.dom('.select-box__input').hasAttribute('aria-expanded', 'true'); }); @@ -50,23 +52,25 @@ module('select-box (opening)', function (hooks) { await render(); - assert.dom('.select-box__dropdown').hasAttribute('data-open', 'true'); - assert.dom('.select-box__trigger').hasAttribute('aria-expanded', 'true'); + assert.dom('.select-box .dropdown').hasAttribute('data-open', 'true'); + assert + .dom('.select-box .dropdown__trigger') + .hasAttribute('aria-expanded', 'true'); assert.dom('.select-box__input').hasAttribute('aria-expanded', 'true'); - assert.dom('.select-box__trigger').isNotFocused(); + assert.dom('.select-box .dropdown__trigger').isNotFocused(); assert.dom('.select-box__input').isNotFocused(); assert .dom('.select-box__option:nth-child(1)') @@ -78,20 +82,20 @@ module('select-box (opening)', function (hooks) { await render(); - await click('.select-box__trigger'); + await click('.select-box .dropdown__trigger'); assert .dom('.select-box__option:nth-child(1)') @@ -111,20 +115,20 @@ module('select-box (opening)', function (hooks) { await render(); - await click('.select-box__trigger'); + await click('.select-box .dropdown__trigger'); assert .dom('.select-box__option:nth-child(2)') @@ -136,21 +140,21 @@ module('select-box (opening)', function (hooks) { await render(); - await click('.select-box__trigger'); + await click('.select-box .dropdown__trigger'); assert .dom('.select-box__option[aria-current="true"]') @@ -167,19 +171,19 @@ module('select-box (opening)', function (hooks) { {{#if dd.isOpen}} - + - + {{/if}} ); - await click('.select-box__trigger'); + await click('.select-box .dropdown__trigger'); assert .dom('.select-box__option:nth-child(2)') @@ -197,9 +201,9 @@ module('select-box (opening)', function (hooks) { ); - await click('.select-box__trigger'); + await click('.select-box .dropdown__trigger'); - assert.dom('.select-box__trigger').isFocused(); + assert.dom('.select-box .dropdown__trigger').isFocused(); }); test('opening via the trigger advances focus to the input (mouse)', async function (assert) { @@ -214,7 +218,7 @@ module('select-box (opening)', function (hooks) { ); - await click('.select-box__trigger'); + await click('.select-box .dropdown__trigger'); assert.dom('.select-box__input').isFocused(); }); @@ -231,8 +235,8 @@ module('select-box (opening)', function (hooks) { ); - await focus('.select-box__trigger'); - await triggerKeyEvent('.select-box__trigger', 'keydown', 'Enter'); + await focus('.select-box .dropdown__trigger'); + await triggerKeyEvent('.select-box .dropdown__trigger', 'keydown', 'Enter'); assert.dom('.select-box__input').isFocused(); }); @@ -249,7 +253,7 @@ module('select-box (opening)', function (hooks) { ); - await triggerEvent('.select-box__trigger', 'mouseenter'); + await triggerEvent('.select-box .dropdown__trigger', 'mouseenter'); assert.dom('.select-box__input').isFocused(); }); @@ -261,12 +265,12 @@ module('select-box (opening)', function (hooks) { - + - + ); @@ -275,7 +279,7 @@ module('select-box (opening)', function (hooks) { await click('.select-box__input'); - assert.dom('.select-box__dropdown').hasAttribute('data-open', 'true'); + assert.dom('.select-box .dropdown').hasAttribute('data-open', 'true'); assert.dom('.select-box__input').hasAttribute('aria-expanded', 'true'); }); @@ -293,19 +297,19 @@ module('select-box (opening)', function (hooks) { {{#if dd.isOpen}} - + One Two Three - + {{/if}} ); - await click('.select-box__trigger'); + await click('.select-box .dropdown__trigger'); const expectedTop = find('.select-box__option:nth-child(3)').offsetTop; diff --git a/tests/integration/components/select-box/index/searching-test.gjs b/tests/integration/components/select-box/index/searching-test.gjs index 32b852326..7682655bf 100644 --- a/tests/integration/components/select-box/index/searching-test.gjs +++ b/tests/integration/components/select-box/index/searching-test.gjs @@ -27,13 +27,17 @@ module('select-box (searching)', function (hooks) { ); assert.dom('.select-box').hasAttribute('data-busy', 'false'); - assert.dom('.select-box__trigger').hasAttribute('aria-busy', 'false'); + assert + .dom('.select-box .dropdown__trigger') + .hasAttribute('aria-busy', 'false'); assert.dom('.select-box__input').hasAttribute('aria-busy', 'false'); await fillIn('.select-box__input', 'x'); assert.dom('.select-box').hasAttribute('data-busy', 'true'); - assert.dom('.select-box__trigger').hasAttribute('aria-busy', 'true'); + assert + .dom('.select-box .dropdown__trigger') + .hasAttribute('aria-busy', 'true'); assert.dom('.select-box__input').hasAttribute('aria-busy', 'true'); deferred.resolve(); @@ -41,7 +45,9 @@ module('select-box (searching)', function (hooks) { await settled(); assert.dom('.select-box').hasAttribute('data-busy', 'false'); - assert.dom('.select-box__trigger').hasAttribute('aria-busy', 'false'); + assert + .dom('.select-box .dropdown__trigger') + .hasAttribute('aria-busy', 'false'); assert.dom('.select-box__input').hasAttribute('aria-busy', 'false'); }); @@ -339,13 +345,13 @@ module('select-box (searching)', function (hooks) { {{#if dd.isOpen}} - + {{#each sb.options}} {{/each}} - + {{/if}} @@ -369,19 +375,19 @@ module('select-box (searching)', function (hooks) { - - + + {{#each sb.options as |value|}} {{/each}} - + ); - await click('.select-box__trigger'); + await click('.select-box .dropdown__trigger'); assert.dom('.select-box__input').hasValue(''); assert.dom('.select-box__options').exists({ count: 1 }); diff --git a/tests/integration/components/select-box/index/single-test.gjs b/tests/integration/components/select-box/index/single-test.gjs index 0f9e7860b..ba876d0a0 100644 --- a/tests/integration/components/select-box/index/single-test.gjs +++ b/tests/integration/components/select-box/index/single-test.gjs @@ -141,17 +141,17 @@ module('select-box (single)', function (hooks) { await render(); @@ -160,7 +160,7 @@ module('select-box (single)', function (hooks) { .dom('.select-box__option:nth-child(1)') .hasAttribute('aria-selected', 'true'); - assert.dom('.select-box__trigger').hasText('1'); + assert.dom('.select-box .dropdown__trigger').hasText('1'); await click('.select-box__option:nth-child(2)'); @@ -168,13 +168,13 @@ module('select-box (single)', function (hooks) { .dom('.select-box__option:nth-child(2)') .hasAttribute('aria-selected', 'true'); - assert.dom('.select-box__trigger').hasText('2'); + assert.dom('.select-box .dropdown__trigger').hasText('2'); state.value = 3; await settled(); - assert.dom('.select-box__trigger').hasText('3'); + assert.dom('.select-box .dropdown__trigger').hasText('3'); assert .dom('.select-box__option:nth-child(3)') @@ -267,7 +267,7 @@ module('select-box (single)', function (hooks) { assert.strictEqual(state.value, 2); - assert.dom('.select-box__trigger').hasText('2, 3'); + assert.dom('.select-box .dropdown__trigger').hasText('2, 3'); assert .dom('.select-box__option[aria-selected="true"]') @@ -315,7 +315,7 @@ module('select-box (single)', function (hooks) { assert.strictEqual(state.value, 3); - assert.dom('.select-box__trigger').hasText('3, 2'); + assert.dom('.select-box .dropdown__trigger').hasText('3, 2'); assert.dom('.select-box__option[aria-selected="true"]').hasText( 'Two', diff --git a/tests/integration/components/select-box/index/value-test.gjs b/tests/integration/components/select-box/index/value-test.gjs index cd355d89d..3315472eb 100644 --- a/tests/integration/components/select-box/index/value-test.gjs +++ b/tests/integration/components/select-box/index/value-test.gjs @@ -44,19 +44,19 @@ module('select-box (value)', function (hooks) { await render(); assert - .dom('.select-box__trigger') + .dom('.select-box .dropdown__trigger') .hasText( 'foo', "not a valid option, but that's still the value of the select box" diff --git a/tests/integration/components/select-box/options/render-test.gjs b/tests/integration/components/select-box/options/render-test.gjs index 7549d6693..68a17dfd0 100644 --- a/tests/integration/components/select-box/options/render-test.gjs +++ b/tests/integration/components/select-box/options/render-test.gjs @@ -70,9 +70,8 @@ module('select-box/options', function (hooks) { ); - assert.dom('.select-box__options').hasAttribute( + assert.dom('.select-box__options').doesNotHaveAttribute( 'tabindex', - '-1', `the main interactive element is the input (combobox) focus should not move to the listbox, which is aria controlled virtually by the input.` @@ -84,18 +83,17 @@ module('select-box/options', function (hooks) { await render(); - assert.dom('.select-box__options').hasAttribute( + assert.dom('.select-box__options').doesNotHaveAttribute( 'tabindex', - '-1', `the main interactive element is the trigger (combobox) focus should not move to the listbox (options element), which is aria controlled virtually by the trigger`