@brightspace-ui/core 1.224.2 → 1.226.0

package/components/colors/README.md

@@ -1,6 +1,6 @@
 # Colors
 
-Importing `colors` will add the color palette [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) to the document and polyfill for IE11 using [shadyCSS](https://github.com/webcomponents/shadycss).
+Importing `colors` will add the color palette [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) to the document.
 
 Run the demo page to see the full palette. See [colors.js](colors.js) for the variable names (i.e. `--d2l-color-*`).
 
@@ -26,4 +26,4 @@ Run the demo page to see the full palette. See [colors.js](colors.js) for the va
 
 ## Future Enhancements
 
-Looking for an enhancement not listed here? Create a GitHub issue!
+Looking for an enhancement not listed here? Create a GitHub issue!

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-fullscreen.js

@@ -10,7 +10,7 @@ import { getUniqueId } from '../../helpers/uniqueId.js';
 import { LocalizeCoreElement } from '../../lang/localize-core-element.js';
 import { styleMap } from 'lit-html/directives/style-map.js';
 
-const mediaQueryList = window.matchMedia('(max-width: 615px)');
+const mediaQueryList = window.matchMedia('(max-width: 615px), (max-height: 420px) and (max-width: 900px)');
 
 /**
  * A generic fullscreen dialog that provides a slot for arbitrary content and a "footer" slot for workflow buttons. Apply the "data-dialog-action" attribute to workflow buttons to automatically close the dialog with the action value.
@@ -132,7 +132,7 @@ class DialogFullscreen extends LocalizeCoreElement(AsyncContainerMixin(DialogMix
 				}
 			}
 
-			@media (max-width: 615px) {
+			@media (max-width: 615px), (max-height: 420px) and (max-width: 900px) {
 
 				.d2l-dialog-header {
 					padding-bottom: 15px;

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/components/dropdown/dropdown-opener-mixin.js

@@ -110,11 +110,12 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 	updated(changedProperties) {
 		super.updated(changedProperties);
 		if (!this.openOnHover || !changedProperties.has('_isFading')) return;
-
+		const element = this.__getContentElement();
+		if (!element) return;
 		if (this._isFading) {
-			this.__getContentElement()?.classList.add('d2l-dropdown-content-fading');
+			element.classList.add('d2l-dropdown-content-fading');
 		} else {
-			this.__getContentElement()?.classList.remove('d2l-dropdown-content-fading');
+			element.classList.remove('d2l-dropdown-content-fading');
 		}
 	}
 
@@ -254,7 +255,9 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 		if (this.noAutoOpen) return;
 		if (this.openOnHover) {
 			// prevent propogation to window and triggering _onOutsideClick
-			e?.stopPropagation();
+			if (e) {
+				e.stopPropagation();
+			}
 			this._closeTimerStop();
 			if (this._isOpen && !this._isHovering) {
 				this.closeDropdown();

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.224.2",
+  "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",