Dialogs: Add axe tests (#4991)

components/dialog/test/dialog-confirm.axe.js

@@ -0,0 +1,37 @@
+import '../dialog-confirm.js';
+import '../../button/button.js';
+import { expect, fixture, html } from '@brightspace-ui/testing';
+
+describe('d2l-dialog-confirm', () => {
+
+	it('closed', async() => {
+		const el = await fixture(html`<d2l-dialog-confirm></d2l-dialog-confirm>`);
+		await expect(el).to.be.accessible();
+	});
+
+	it('default with title-text', async() => {
+		const el = await fixture(html`<d2l-dialog-confirm opened title-text="My Dialog" text="My dialog content"></d2l-dialog-confirm>`);
+		await expect(el).to.be.accessible();
+	});
+
+	it('critical', async() => {
+		const el = await fixture(html`<d2l-dialog-cofirm opened title-text="My Dialog" critical text="My dialog content"></d2l-dialog-confirm>`);
+		await expect(el).to.be.accessible();
+	});
+
+	it('footer buttons', async() => {
+		const el = await fixture(html`
+			<d2l-dialog-cofirm title-text="Dialog Title" opened text="My dialog content">
+				<d2l-button slot="footer" primary data-dialog-action="done">Done</d2l-button>
+				<d2l-button slot="footer" data-dialog-action>Cancel</d2l-button>
+			</d2l-dialog-confirm>
+		`);
+		await expect(el).to.be.accessible();
+	});
+
+	it('no title-text', async() => {
+		const el = await fixture(html`<d2l-dialog-cofirm opened text="My dialog content"></d2l-dialog-confirm>`);
+		await expect(el).to.be.accessible();
+	});
+
+});

components/dialog/test/dialog-fullscreen.axe.js

@@ -0,0 +1,44 @@
+import '../dialog-fullscreen.js';
+import '../../button/button.js';
+import { expect, fixture, html } from '@brightspace-ui/testing';
+
+describe('d2l-dialog-fullscreen', () => {
+
+	it('closed', async() => {
+		const el = await fixture(html`<d2l-dialog-fullscreen></d2l-dialog-fullscreen>`);
+		await expect(el).to.be.accessible();
+	});
+
+	it('default with title-text', async() => {
+		const el = await fixture(html`<d2l-dialog-fullscreen opened title-text="My Dialog"></d2l-dialog-fullscreen>`);
+		await expect(el).to.be.accessible();
+	});
+
+	it('footer buttons', async() => {
+		const el = await fixture(html`
+			<d2l-dialog-fullscreen title-text="Dialog Title" opened>
+				<div>Some dialog content</div>
+				<d2l-button slot="footer" primary data-dialog-action="done">Done</d2l-button>
+				<d2l-button slot="footer" data-dialog-action>Cancel</d2l-button>
+			</d2l-dialog-fullscreen>
+		`);
+		await expect(el).to.be.accessible();
+	});
+
+	it.skip('no title-text', async() => {
+		const el = await fixture(html`<d2l-dialog-fullscreen opened>My content</d2l-dialog-fullscreen>`);
+		await expect(el).to.be.accessible();
+	});
+
+	it.skip('tall content', async() => {
+		const el = await fixture(html`
+			<d2l-dialog-fullscreen opened title-text="My Dialog">
+				<div style="overflow-y: scroll; height:200px;">
+					<div style="height: 10000px;">My content</div>
+				</div>
+			</d2l-dialog-fullscreen>
+		`);
+		await expect(el).to.be.accessible();
+	});
+
+});

components/dialog/test/dialog.axe.js

@@ -0,0 +1,49 @@
+import '../dialog.js';
+import '../../button/button.js';
+import { expect, fixture, html } from '@brightspace-ui/testing';
+
+describe('d2l-dialog', () => {
+
+	it('closed', async() => {
+		const el = await fixture(html`<d2l-dialog></d2l-dialog>`);
+		await expect(el).to.be.accessible();
+	});
+
+	it('default with title-text', async() => {
+		const el = await fixture(html`<d2l-dialog opened title-text="My Dialog"></d2l-dialog>`);
+		await expect(el).to.be.accessible();
+	});
+
+	it('describe-content', async() => {
+		const el = await fixture(html`<d2l-dialog opened title-text="My Dialog" describe-content>My content</d2l-dialog>`);
+		await expect(el).to.be.accessible();
+	});
+
+	it('footer buttons', async() => {
+		const el = await fixture(html`
+			<d2l-dialog title-text="Dialog Title" opened>
+				<div>Some dialog content</div>
+				<d2l-button slot="footer" primary data-dialog-action="done">Done</d2l-button>
+				<d2l-button slot="footer" data-dialog-action>Cancel</d2l-button>
+			</d2l-dialog>
+		`);
+		await expect(el).to.be.accessible();
+	});
+
+	it.skip('no title-text', async() => {
+		const el = await fixture(html`<d2l-dialog opened>My content</d2l-dialog>`);
+		await expect(el).to.be.accessible();
+	});
+
+	it.skip('tall content', async() => {
+		const el = await fixture(html`
+			<d2l-dialog opened title-text="My Dialog">
+				<div style="overflow-y: scroll; height:200px;">
+					<div style="height: 10000px;">My content</div>
+				</div>
+			</d2l-dialog>
+		`);
+		await expect(el).to.be.accessible();
+	});
+
+});