diff --git a/components/dialog/demo/dialog-confirm.html b/components/dialog/demo/dialog-confirm.html
index a0097d6b72..fa8e595e97 100644
--- a/components/dialog/demo/dialog-confirm.html
+++ b/components/dialog/demo/dialog-confirm.html
@@ -22,7 +22,7 @@
Confirm Dialog
Show Confirm
-
+
Yes
No
diff --git a/components/dialog/dialog-fullscreen.js b/components/dialog/dialog-fullscreen.js
index ae7cf61e40..dfaffcda63 100644
--- a/components/dialog/dialog-fullscreen.js
+++ b/components/dialog/dialog-fullscreen.js
@@ -8,6 +8,7 @@ import { DialogMixin } from './dialog-mixin.js';
import { dialogStyles } from './dialog-styles.js';
import { getUniqueId } from '../../helpers/uniqueId.js';
import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
+import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
import { styleMap } from 'lit/directives/style-map.js';
const mediaQueryList = window.matchMedia('(max-width: 615px), (max-height: 420px) and (max-width: 900px)');
@@ -18,7 +19,7 @@ const mediaQueryList = window.matchMedia('(max-width: 615px), (max-height: 420px
* @slot - Default slot for content inside dialog
* @slot footer - Slot for footer content such as workflow buttons
*/
-class DialogFullscreen extends LocalizeCoreElement(AsyncContainerMixin(DialogMixin(LitElement))) {
+class DialogFullscreen extends PropertyRequiredMixin(LocalizeCoreElement(AsyncContainerMixin(DialogMixin(LitElement)))) {
static get properties() {
return {
@@ -32,6 +33,10 @@ class DialogFullscreen extends LocalizeCoreElement(AsyncContainerMixin(DialogMix
* @type {boolean}
*/
noPadding: { type: Boolean, reflect: true, attribute: 'no-padding' },
+ /**
+ * REQUIRED: the title for the dialog
+ */
+ titleText: { type: String, attribute: 'title-text', required: true },
/**
* The preferred width (unit-less) for the dialog. Maximum 1170.
*/
diff --git a/components/dialog/dialog.js b/components/dialog/dialog.js
index 4b24c8ccd4..6dbc9317b9 100644
--- a/components/dialog/dialog.js
+++ b/components/dialog/dialog.js
@@ -9,6 +9,7 @@ import { dialogStyles } from './dialog-styles.js';
import { getUniqueId } from '../../helpers/uniqueId.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
+import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
import { styleMap } from 'lit/directives/style-map.js';
const mediaQueryList = window.matchMedia('(max-width: 615px), (max-height: 420px) and (max-width: 900px)');
@@ -19,7 +20,7 @@ const mediaQueryList = window.matchMedia('(max-width: 615px), (max-height: 420px
* @slot - Default slot for content inside dialog
* @slot footer - Slot for footer content such as workflow buttons
*/
-class Dialog extends LocalizeCoreElement(AsyncContainerMixin(DialogMixin(LitElement))) {
+class Dialog extends PropertyRequiredMixin(LocalizeCoreElement(AsyncContainerMixin(DialogMixin(LitElement)))) {
static get properties() {
return {
@@ -43,6 +44,11 @@ class Dialog extends LocalizeCoreElement(AsyncContainerMixin(DialogMixin(LitElem
*/
fullHeight: { type: Boolean, attribute: 'full-height' },
+ /**
+ * REQUIRED: the title for the dialog
+ */
+ titleText: { type: String, attribute: 'title-text', required: true },
+
/**
* The preferred width (unit-less) for the dialog
*/
diff --git a/components/dialog/test/dialog-fullscreen.axe.js b/components/dialog/test/dialog-fullscreen.axe.js
index 1cd7867840..52b872687d 100644
--- a/components/dialog/test/dialog-fullscreen.axe.js
+++ b/components/dialog/test/dialog-fullscreen.axe.js
@@ -25,11 +25,6 @@ describe('d2l-dialog-fullscreen', () => {
await expect(el).to.be.accessible();
});
- it.skip('no title-text', async() => {
- const el = await fixture(html`My content`);
- await expect(el).to.be.accessible();
- });
-
it.skip('tall content', async() => {
const el = await fixture(html`
diff --git a/components/dialog/test/dialog-fullscreen.test.js b/components/dialog/test/dialog-fullscreen.test.js
index 02fea06b64..b03684c464 100644
--- a/components/dialog/test/dialog-fullscreen.test.js
+++ b/components/dialog/test/dialog-fullscreen.test.js
@@ -1,5 +1,6 @@
import '../dialog-fullscreen.js';
-import { runConstructor } from '@brightspace-ui/testing';
+import { expect, fixture, html, runConstructor } from '@brightspace-ui/testing';
+import { createMessage } from '../../../mixins/property-required/property-required-mixin.js';
describe('d2l-dialog-fullscreen', () => {
@@ -11,4 +12,14 @@ describe('d2l-dialog-fullscreen', () => {
});
+ describe('properties', () => {
+
+ it('throws error when no title-text', async() => {
+ const el = await fixture(html``);
+ expect(() => el.flushRequiredPropertyErrors())
+ .to.throw(TypeError, createMessage(el, 'title-text'));
+ });
+
+ });
+
});
diff --git a/components/dialog/test/dialog.axe.js b/components/dialog/test/dialog.axe.js
index 30e4918ca4..0137adbcf7 100644
--- a/components/dialog/test/dialog.axe.js
+++ b/components/dialog/test/dialog.axe.js
@@ -30,11 +30,6 @@ describe('d2l-dialog', () => {
await expect(el).to.be.accessible();
});
- it.skip('no title-text', async() => {
- const el = await fixture(html`My content`);
- await expect(el).to.be.accessible();
- });
-
it.skip('tall content', async() => {
const el = await fixture(html`
diff --git a/components/dialog/test/dialog.test.js b/components/dialog/test/dialog.test.js
index 787a56320b..20ffc06925 100644
--- a/components/dialog/test/dialog.test.js
+++ b/components/dialog/test/dialog.test.js
@@ -1,5 +1,6 @@
import '../dialog.js';
import { expect, fixture, oneEvent, runConstructor } from '@brightspace-ui/testing';
+import { createMessage } from '../../../mixins/property-required/property-required-mixin.js';
import { getComposedActiveElement } from '../../../helpers/focus.js';
import { html } from 'lit';
@@ -13,6 +14,16 @@ describe('d2l-dialog', () => {
});
+ describe('properties', () => {
+
+ it('throws error when no title-text', async() => {
+ const el = await fixture(html``);
+ expect(() => el.flushRequiredPropertyErrors())
+ .to.throw(TypeError, createMessage(el, 'title-text'));
+ });
+
+ });
+
describe('focus management', () => {
it('should focus on close button if no focusable elements inside', async() => {