From 8d60f13027040ab0293e9587983c22f85532e66b Mon Sep 17 00:00:00 2001 From: Brian Geiger Date: Mon, 13 Sep 2021 18:52:23 -0400 Subject: [PATCH] Replace bs-tabs with aria-tabs --- .../addon/my-registrations/controller.ts | 4 +- .../addon/my-registrations/styles.scss | 13 ++++- .../addon/my-registrations/template.hbs | 58 ++++++------------- lib/registries/package.json | 1 + package.json | 1 + .../acceptance/my-registrations-page-test.ts | 15 +++-- yarn.lock | 57 +++++++++++++++++- 7 files changed, 96 insertions(+), 53 deletions(-) diff --git a/lib/registries/addon/my-registrations/controller.ts b/lib/registries/addon/my-registrations/controller.ts index 758d5924ecd..f1dbd06578c 100644 --- a/lib/registries/addon/my-registrations/controller.ts +++ b/lib/registries/addon/my-registrations/controller.ts @@ -12,7 +12,7 @@ export default class MyRegistrationsController extends Controller { @tracked tab = 'submitted'; @action - changeTab(newTabId: string) { - this.tab = newTabId; + changeTab(newTabId: number) { + this.tab = newTabId === 1 ? 'submitted' : 'drafts'; } } diff --git a/lib/registries/addon/my-registrations/styles.scss b/lib/registries/addon/my-registrations/styles.scss index cd78b717832..5fbc8686860 100644 --- a/lib/registries/addon/my-registrations/styles.scss +++ b/lib/registries/addon/my-registrations/styles.scss @@ -23,6 +23,14 @@ .NavTabs { ul { margin-left: 15px; + margin-bottom: 10px; + line-height: 20px; + list-style-image: none; + list-style-position: outside; + list-style-type: none; + height: 41px; + padding: 0; + box-sizing: border-box; } .NavItem { @@ -30,6 +38,7 @@ color: #fff; background: none; padding: 10px 15px; + float: left; &:hover { border: none; @@ -38,7 +47,7 @@ } } - :global(.active) .NavItem { + :global(.ember-tabs__tab--selected) { border: none; color: $color-text-gray; background-color: #e4e4e4; @@ -55,8 +64,6 @@ } .TabPane { - display: none; - &:global(.active) { display: block; } diff --git a/lib/registries/addon/my-registrations/template.hbs b/lib/registries/addon/my-registrations/template.hbs index 05ef429217b..9a28e86f72b 100644 --- a/lib/registries/addon/my-registrations/template.hbs +++ b/lib/registries/addon/my-registrations/template.hbs @@ -15,69 +15,47 @@ {{#if this.currentUser.user}} - - - - - - + - - - + {{t 'registries.my_registrations.submitted'}} + +
{{t 'registries.my_registrations.sorted'}}
- - - + - - + + {{/if}} diff --git a/lib/registries/package.json b/lib/registries/package.json index c9e4c9b8031..7f607c165ee 100644 --- a/lib/registries/package.json +++ b/lib/registries/package.json @@ -13,6 +13,7 @@ "@glimmer/component": "*", "@glimmer/tracking": "*", "ember-angle-bracket-invocation-polyfill": "*", + "ember-aria-tabs": "*", "ember-basic-dropdown": "*", "ember-bootstrap": "*", "ember-changeset": "*", diff --git a/package.json b/package.json index 05555bdc507..f06de8661c4 100644 --- a/package.json +++ b/package.json @@ -112,6 +112,7 @@ "ember-ajax": "^5.0.0", "ember-angle-bracket-invocation-polyfill": "^2.0.2", "ember-animated": "^0.9.0", + "ember-aria-tabs": "^4.0.0", "ember-auto-import": "^1.11.2", "ember-bootstrap": "^4.6.3", "ember-bootstrap-datepicker": "^2.0.9", diff --git a/tests/engines/registries/acceptance/my-registrations-page-test.ts b/tests/engines/registries/acceptance/my-registrations-page-test.ts index 37157610836..9c0155ffe29 100644 --- a/tests/engines/registries/acceptance/my-registrations-page-test.ts +++ b/tests/engines/registries/acceptance/my-registrations-page-test.ts @@ -26,18 +26,21 @@ module('Registries | Acceptance | my-registrations page', hooks => { await visit('/registries/my-registrations'); assert.dom('[data-test-my-registrations-sort-description]').exists('Sort description shown'); assert.notOk(currentURL().includes('tab'), 'Tab query param not visible on submitted'); - assert.dom('[data-test-my-registrations-nav="submitted"]').hasClass('active', 'Submitted tab is active'); - assert.dom('[data-test-my-registrations-nav="drafts"]').doesNotHaveClass('active', 'Draft tab is not active'); + assert.dom('[data-test-my-registrations-nav="submitted"]') + .hasClass('ember-tabs__tab--selected', 'Submitted tab is active'); + assert.dom('[data-test-my-registrations-nav="drafts"]') + .doesNotHaveClass('ember-tabs__tab--selected', 'Draft tab is not active'); assert.dom('[data-test-my-registrations-pane="submitted"]').isVisible('Submitted pane is shown'); assert.dom('[data-test-my-registrations-pane="drafts"]').isNotVisible('Drafts pane is not shown'); assert.dom('[data-test-node-card]').exists({ count: 3 }, 'All submitted registrations shown'); await percySnapshot(assert); - await click('[data-test-my-registrations-nav-button="drafts"]'); + await click('[data-test-my-registrations-nav="drafts"]'); assert.ok(currentURL().includes('tab=drafts'), 'Tab query param visible on drafts'); - assert.dom('[data-test-my-registrations-nav="drafts"]').hasClass('active', 'Drafts tab is active'); - assert.dom('[data-test-my-registrations-nav="submitted"]').doesNotHaveClass('active', - 'Submitted tab is not active'); + assert.dom('[data-test-my-registrations-nav="drafts"]') + .hasClass('ember-tabs__tab--selected', 'Drafts tab is active'); + assert.dom('[data-test-my-registrations-nav="submitted"]') + .doesNotHaveClass('ember-tabs__tab--selected', 'Submitted tab is not active'); assert.dom('[data-test-my-registrations-pane="drafts"]').isVisible('Drafts pane is shown'); assert.dom('[data-test-my-registrations-pane="submitted"]').isNotVisible('Submitted pane is not shown'); assert.dom('[data-test-draft-registration-card]').exists({ count: 2 }, 'All drafts shown'); diff --git a/yarn.lock b/yarn.lock index 40e36824257..e88417145a0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4323,7 +4323,7 @@ babel-plugin-ember-modules-api-polyfill@^3.2.0: dependencies: ember-rfc176-data "^0.3.16" -babel-plugin-ember-modules-api-polyfill@^3.5.0: +babel-plugin-ember-modules-api-polyfill@^3.3.0, babel-plugin-ember-modules-api-polyfill@^3.5.0: version "3.5.0" resolved "https://registry.yarnpkg.com/babel-plugin-ember-modules-api-polyfill/-/babel-plugin-ember-modules-api-polyfill-3.5.0.tgz#27b6087fac75661f779f32e60f94b14d0e9f6965" integrity sha512-pJajN/DkQUnStw0Az8c6khVcMQHgzqWr61lLNtVeu0g61LRW0k9jyK7vaedrHDWGe/Qe8sxG5wpiyW9NsMqFzA== @@ -7916,6 +7916,16 @@ ember-animated@^0.9.0: ember-maybe-import-regenerator "^0.1.5" ember-named-arguments-polyfill "^1.0.0" +ember-aria-tabs@^4.0.0: + version "4.0.2" + resolved "https://registry.yarnpkg.com/ember-aria-tabs/-/ember-aria-tabs-4.0.2.tgz#a19f6b0838004b36daff277c9772e070e5914836" + integrity sha512-FNTg0cnCXYnePaZ61Bi4Je4vQ3gPqIDz0EigRnVw7VCTCqgmLj754tvpmVAiG51rpkzs+6ik9H3PoNzUF0UxLg== + dependencies: + "@ember/render-modifiers" "^1.0.2" + ember-cached-decorator-polyfill "^0.1.1" + ember-cli-babel "7.24.0" + ember-cli-htmlbars "^5.3.1" + ember-asset-loader@^0.6.1: version "0.6.1" resolved "https://registry.yarnpkg.com/ember-asset-loader/-/ember-asset-loader-0.6.1.tgz#2eb81221406164d19127eba5b3d10f908df89a17" @@ -8048,7 +8058,7 @@ ember-bootstrap@^4.6.3: silent-error "^1.0.1" tracked-toolbox "^1.2.1" -ember-cache-primitive-polyfill@^1.0.0: +ember-cache-primitive-polyfill@^1.0.0, ember-cache-primitive-polyfill@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/ember-cache-primitive-polyfill/-/ember-cache-primitive-polyfill-1.0.1.tgz#a27075443bd87e5af286c1cd8a7df24e3b9f6715" integrity sha512-hSPcvIKarA8wad2/b6jDd/eU+OtKmi6uP+iYQbzi5TQpjsqV6b4QdRqrLk7ClSRRKBAtdTuutx+m+X+WlEd2lw== @@ -8058,6 +8068,16 @@ ember-cache-primitive-polyfill@^1.0.0: ember-compatibility-helpers "^1.2.1" silent-error "^1.1.1" +ember-cached-decorator-polyfill@^0.1.1: + version "0.1.4" + resolved "https://registry.yarnpkg.com/ember-cached-decorator-polyfill/-/ember-cached-decorator-polyfill-0.1.4.tgz#f1e2c65cc78d0d9c4ac0e047e643af477eb85ace" + integrity sha512-JOK7kBCWsTVCzmCefK4nr9BACDJk0owt9oIUaVt6Q0UtQ4XeAHmoK5kQ/YtDcxQF1ZevHQFdGhsTR3JLaHNJgA== + dependencies: + "@glimmer/tracking" "^1.0.4" + ember-cache-primitive-polyfill "^1.0.1" + ember-cli-babel "^7.21.0" + ember-cli-babel-plugin-helpers "^1.1.1" + ember-changeset-validations@^3.14.2: version "3.14.2" resolved "https://registry.yarnpkg.com/ember-changeset-validations/-/ember-changeset-validations-3.14.2.tgz#bb2a326d03a11d1dc3347c35c455d2e091a88176" @@ -8100,6 +8120,39 @@ ember-cli-babel-plugin-helpers@^1.0.0, ember-cli-babel-plugin-helpers@^1.1.0, em resolved "https://registry.yarnpkg.com/ember-cli-babel-plugin-helpers/-/ember-cli-babel-plugin-helpers-1.1.1.tgz#5016b80cdef37036c4282eef2d863e1d73576879" integrity sha512-sKvOiPNHr5F/60NLd7SFzMpYPte/nnGkq/tMIfXejfKHIhaiIkYFqX8Z9UFTKWLLn+V7NOaby6niNPZUdvKCRw== +ember-cli-babel@7.24.0: + version "7.24.0" + resolved "https://registry.yarnpkg.com/ember-cli-babel/-/ember-cli-babel-7.24.0.tgz#d58670d0f214c63a46f44f86e7c407799d77fc45" + integrity sha512-IpqMqOS1VI2wVLIREdEXG9WG05YBulg20t0K27yl2aBjmShvLMRIodcNiKataTgf/dDiU0EWQBGl7VLBLBkFgQ== + dependencies: + "@babel/core" "^7.12.0" + "@babel/helper-compilation-targets" "^7.12.0" + "@babel/plugin-proposal-class-properties" "^7.10.4" + "@babel/plugin-proposal-decorators" "^7.10.5" + "@babel/plugin-transform-modules-amd" "^7.10.5" + "@babel/plugin-transform-runtime" "^7.12.0" + "@babel/plugin-transform-typescript" "^7.12.0" + "@babel/polyfill" "^7.11.5" + "@babel/preset-env" "^7.12.0" + "@babel/runtime" "^7.12.0" + amd-name-resolver "^1.3.1" + babel-plugin-debug-macros "^0.3.4" + babel-plugin-ember-data-packages-polyfill "^0.1.2" + babel-plugin-ember-modules-api-polyfill "^3.3.0" + babel-plugin-module-resolver "^3.2.0" + broccoli-babel-transpiler "^7.8.0" + broccoli-debug "^0.6.4" + broccoli-funnel "^2.0.2" + broccoli-source "^2.1.2" + clone "^2.1.2" + ember-cli-babel-plugin-helpers "^1.1.1" + ember-cli-version-checker "^4.1.0" + ensure-posix-path "^1.0.2" + fixturify-project "^1.10.0" + resolve-package-path "^3.1.0" + rimraf "^3.0.1" + semver "^5.5.0" + ember-cli-babel@7.5.0: version "7.5.0" resolved "https://registry.yarnpkg.com/ember-cli-babel/-/ember-cli-babel-7.5.0.tgz#af654dcef23630391d2efe85aaa3bdf8b6ca17b7"