@brightspace-ui/core 2.59.0 → 2.59.2

package/components/backdrop/backdrop.js

@@ -3,7 +3,9 @@ import { css, html, LitElement } from 'lit';
 import { cssEscape, getComposedChildren, getComposedParent, isVisible } from '../../helpers/dom.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 
-export const BACKDROP_ROLE = 'd2l-backdrop-role';
+export const BACKDROP_ROLE = 'data-d2l-backdrop-role';
+const BACKDROP_HIDDEN = 'data-d2l-backdrop-hidden';
+const BACKDROP_ARIA_HIDDEN = 'data-d2l-backdrop-aria-hidden';
 
 const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
 
@@ -158,7 +160,7 @@ function hideAccessible(target) {
 
 			if (child.tagName === 'SCRIPT' || child.tagName === 'STYLE') continue;
 			if (path.indexOf(child) !== -1) continue;
-			if (child.hasAttribute('d2l-backdrop-hidden')) continue;
+			if (child.hasAttribute(BACKDROP_HIDDEN)) continue;
 
 			const role = child.getAttribute('role');
 			if (role) child.setAttribute(BACKDROP_ROLE, role);
@@ -166,11 +168,11 @@ function hideAccessible(target) {
 
 			if (child.nodeName === 'FORM' || child.nodeName === 'A') {
 				const ariaHidden = child.getAttribute('aria-hidden');
-				if (ariaHidden) child.setAttribute('d2l-backdrop-aria-hidden', ariaHidden);
+				if (ariaHidden) child.setAttribute(BACKDROP_ARIA_HIDDEN, ariaHidden);
 				child.setAttribute('aria-hidden', 'true');
 			}
 
-			child.setAttribute('d2l-backdrop-hidden', 'd2l-backdrop-hidden');
+			child.setAttribute(BACKDROP_HIDDEN, BACKDROP_HIDDEN);
 			hiddenElements.push(child);
 
 			hideAccessibleChildren(child);
@@ -209,14 +211,16 @@ function showAccessible(elems) {
 		} else {
 			elem.removeAttribute('role');
 		}
-		const ariaHidden = elem.getAttribute('d2l-backdrop-aria-hidden');
-		if (ariaHidden) {
-			elem.setAttribute('aria-hidden', ariaHidden);
-			elem.removeAttribute('d2l-backdrop-aria-hidden');
-		} else {
-			elem.removeAttribute('aria-hidden');
+		if (elem.nodeName === 'FORM' || elem.nodeName === 'A') {
+			const ariaHidden = elem.getAttribute(BACKDROP_ARIA_HIDDEN);
+			if (ariaHidden) {
+				elem.setAttribute('aria-hidden', ariaHidden);
+				elem.removeAttribute(BACKDROP_ARIA_HIDDEN);
+			} else {
+				elem.removeAttribute('aria-hidden');
+			}
 		}
-		elem.removeAttribute('d2l-backdrop-hidden');
+		elem.removeAttribute(BACKDROP_HIDDEN);
 	}
 }
 

package/components/dialog/README.md

@@ -32,13 +32,14 @@ The `d2l-dialog` element is a generic dialog that provides a slot for arbitrary
 * Label primary actions with clear and predictable language. Use verbs like, “Add” or “Save” that indicate the outcome of a dialog rather than, “OK” or “Close”
 * Keep dialog titles concise
 * Maintain a language relationship between the action that triggered the dialog, dialog title, and dialog primary button.
+* When it is necessary to stack multiple dialogs, ensure the stacked dialog is nested within the DOM of the dialog containing the opener
 <!-- docs: end dos -->
 
 <!-- docs: start donts -->
 * Don’t use a dialog when you could reasonably use an alternative that preserves user context, like expanding options inline
 * Don’t use a dialog to show error, success, or warning messages. Use an inline or toast alert instead.
 * Avoid creating large, complex dialogs
-* Avoid invoking a dialog from another dialog (nested dialogs)
+* Avoid opening a dialog from within other dialogs (stacking dialogs)
 * Avoid a title length that could easily wrap to two lines
 <!-- docs: end donts -->
 <!-- docs: end best practices -->

package/helpers/announce.js

@@ -25,9 +25,13 @@ export function announce(message) {
 	/* Need to give browser enough time to create the live region so that it will
 	treat the change as an update. Firefox sometimes ignores changes if the region
 	and update are made too quickly in succession. RequestAnimationFrame is not
-	sufficient here. */
+	sufficient here. Also, for some strange reason, sometimes VO will not announce
+	duplicate messages even if we remove the child so we also append a non-breaking space. */
 	const elem = [...container.childNodes].find((c) => c.textContent === message);
-	if (elem) elem.parentNode.removeChild(elem);
+	if (elem) {
+		elem.parentNode.removeChild(elem);
+		message = message.concat('\u00A0');
+	}
 	setTimeout(() => {
 		container.appendChild(document.createTextNode(message));
 	}, 200);

package/package.json

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