diff --git a/components/banner/test/banner.a11y.test.js b/components/banner/test/banner.a11y.test.js index 9e24e9cb6..1deed1cc4 100644 --- a/components/banner/test/banner.a11y.test.js +++ b/components/banner/test/banner.a11y.test.js @@ -1,30 +1,50 @@ +import '../vwc-banner.js'; import 'chai-a11y-axe'; -import { html } from 'lit-html'; -import { fixture, aTimeout } from '@open-wc/testing-helpers'; +import 'chai-dom'; +import { aTimeout } from '@open-wc/testing-helpers'; +import { + isolatedElementsCreation, + textToDomToParent +} from '../../../test/test-helpers.js'; +const COMPONENT_NAME = 'vwc-banner'; describe('banner a11y', function () { const TRANSITION_TIME = 200; + const addElement = isolatedElementsCreation(); + it('should adhere to accessibility guidelines', async function () { - const bannerEl = await fixture(html``); - await expect(bannerEl).shadowDom.to.be.accessible(); + const [actualElement] = addElement( + textToDomToParent(`<${COMPONENT_NAME} message="Hello" open>`) + ); + await actualElement.updateComplete; + await expect(actualElement).shadowDom.to.be.accessible(); }); it('should be with default role and aria-live values', async function () { - const bannerEl = await fixture(html``); - expect(bannerEl.shadowRoot.querySelector('.banner--message')).to.have.attribute('role', 'status'); - expect(bannerEl.shadowRoot.querySelector('.banner--message')).to.have.attribute('aria-live', 'polite'); + const [actualElement] = addElement( + textToDomToParent(`<${COMPONENT_NAME} message="Hello" open>`) + ); + await actualElement.updateComplete; + expect(actualElement.shadowRoot?.querySelector('.banner--message')).to.have.attribute('role', 'status'); + expect(actualElement.shadowRoot?.querySelector('.banner--message')).to.have.attribute('aria-live', 'polite'); }); it('should be with reflected role and aria-live values', async function () { - const bannerEl = await fixture(html``); - expect(bannerEl.shadowRoot.querySelector('.banner--message')).to.have.attribute('role', 'alert'); - expect(bannerEl.shadowRoot.querySelector('.banner--message')).to.have.attribute('aria-live', 'assertive'); - bannerEl.shadowRoot.querySelector('vwc-icon-button')?.click(); + const [actualElement] = addElement( + textToDomToParent(`<${COMPONENT_NAME} message="Hello" open role="alert" aria-live="assertive" dismissible>`) + ); + await actualElement.updateComplete; + expect(actualElement.shadowRoot?.querySelector('.banner--message')).to.have.attribute('role', 'alert'); + expect(actualElement.shadowRoot?.querySelector('.banner--message')).to.have.attribute('aria-live', 'assertive'); + actualElement.shadowRoot?.querySelector('vwc-icon-button')?.click(); await aTimeout(TRANSITION_TIME * 1.1); - bannerEl.setAttribute('open', 'true'); - expect(bannerEl.shadowRoot.querySelector('.banner--message')).to.equal(null); - expect(bannerEl.shadowRoot.querySelector('.banner--message')).to.equal(null); + actualElement.setAttribute('open', 'true'); + expect(actualElement.shadowRoot?.querySelector('.banner--message')).to.equal(null); + expect(actualElement.shadowRoot?.querySelector('.banner--message')).to.equal(null); }); it('should be without role and aria-live values when closed', async function () { - const bannerEl = await fixture(html``); - expect(bannerEl.shadowRoot.querySelector('.banner--message')).to.equal(null); + const [actualElement] = addElement( + textToDomToParent(`<${COMPONENT_NAME} message="Hello">`) + ); + await actualElement.updateComplete; + expect(actualElement.shadowRoot?.querySelector('.banner--message')).to.equal(null); }); }); diff --git a/components/side-drawer/package.json b/components/side-drawer/package.json index c05a47ca3..21f619153 100644 --- a/components/side-drawer/package.json +++ b/components/side-drawer/package.json @@ -29,6 +29,8 @@ "@vonage/vvd-foundation": "2.22.0", "lit-element": "^2.4.0", "lit-html": "^1.3.0", + "blocking-elements": "^0.1.0", + "wicg-inert": "^3.0.0", "tslib": "^2.3.0" }, "devDependencies": {