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>${COMPONENT_NAME}>`)
+ );
+ 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>${COMPONENT_NAME}>`)
+ );
+ 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>${COMPONENT_NAME}>`)
+ );
+ 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">${COMPONENT_NAME}>`)
+ );
+ 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": {