@brightspace-ui/core 1.225.1 → 1.226.0

package/components/dialog/README.md

@@ -83,6 +83,12 @@ The `d2l-dialog` element is a generic dialog that provides a slot for arbitrary
 - `d2l-dialog-close`: dispatched with the action value when the dialog is closed for any reason
 <!-- docs: end hidden content -->
 
+### Accessibility Properties
+
+| Attribute | Description |
+|--|--|
+| `describe-content` | When set, screen readers will announce the contents when opened. |
+
 ### Methods
 
 - `resize`: resizes the dialog based on specified `width` and measured content height

package/components/dialog/dialog.js

@@ -8,6 +8,7 @@ import { DialogMixin } from './dialog-mixin.js';
 import { dialogStyles } from './dialog-styles.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { heading3Styles } from '../typography/styles.js';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../lang/localize-core-element.js';
 import { styleMap } from 'lit-html/directives/style-map.js';
 
@@ -27,6 +28,11 @@ class Dialog extends LocalizeCoreElement(AsyncContainerMixin(DialogMixin(LitElem
 			 */
 			async: { type: Boolean },
 
+			/**
+			 * Whether to read the contents of the dialog on open
+			 */
+			describeContent: { type: Boolean, attribute: 'describe-content' },
+
 			/**
 			 * The preferred width (unit-less) for the dialog
 			 */
@@ -100,6 +106,7 @@ class Dialog extends LocalizeCoreElement(AsyncContainerMixin(DialogMixin(LitElem
 	constructor() {
 		super();
 		this.async = false;
+		this.describeContent = false;
 		this.width = 600;
 		this._handleResize = this._handleResize.bind(this);
 		this._handleResize();
@@ -151,9 +158,10 @@ class Dialog extends LocalizeCoreElement(AsyncContainerMixin(DialogMixin(LitElem
 			'd2l-footer-no-content': !this._hasFooterContent
 		};
 
+		if (!this._textId && this.describeContent) this._textId = getUniqueId();
 		const content = html`
 			${loading}
-			<div style=${styleMap(slotStyles)}><slot></slot></div>
+			<div id="${ifDefined(this._textId)}" style=${styleMap(slotStyles)}><slot></slot></div>
 		`;
 
 		if (!this._titleId) this._titleId = getUniqueId();
@@ -171,9 +179,11 @@ class Dialog extends LocalizeCoreElement(AsyncContainerMixin(DialogMixin(LitElem
 				</div>
 			</div>
 		`;
+
+		const descId = (this.describeContent) ? this._textId : undefined;
 		return this._render(
 			inner,
-			{ labelId: this._titleId, role: 'dialog' },
+			{ labelId: this._titleId, descId: descId, role: 'dialog' },
 			topOverride
 		);
 	}

package/custom-elements.json

@@ -1599,6 +1599,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "describe-content",
+          "description": "Whether to read the contents of the dialog on open",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "width",
           "description": "The preferred width (unit-less) for the dialog",
@@ -1625,6 +1631,13 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "describeContent",
+          "attribute": "describe-content",
+          "description": "Whether to read the contents of the dialog on open",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "width",
           "attribute": "width",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "1.225.1",
+  "version": "1.226.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",