@brightspace-ui/core 3.73.0 → 3.73.1

package/components/backdrop/README.md

@@ -1,6 +1,6 @@
 # Backdrops
 
-The `d2l-backdrop` element is a web component to display a semi-transparent backdrop behind a specified sibling element. It also hides elements other than the target from assistive technologies by applying `role="presentation"` and `aria-hidden="true"`.
+The `d2l-backdrop` element displays a semi-transparent backdrop behind a specified sibling target element. It also hides elements other than the target from assistive technologies by applying `aria-hidden="true"`.
 
 ## Backdrop [d2l-backdrop]
 
@@ -9,7 +9,6 @@ The `d2l-backdrop` element is a web component to display a semi-transparent back
 <script type="module">
   import '@brightspace-ui/core/components/button/button.js';
   import '@brightspace-ui/core/components/backdrop/backdrop.js';
-  import '@brightspace-ui/core/components/switch/switch.js';
 
   const backdrop = document.querySelector('d2l-backdrop');
   document.querySelector('#target > d2l-button').addEventListener('click', () => {
@@ -36,3 +35,11 @@ The `d2l-backdrop` element is a web component to display a semi-transparent back
 | `shown` | Boolean | Used to control whether the backdrop is shown |
 | `slow-transition` | Boolean | Increases the fade transition time to 1200ms (default is 200ms) |
 <!-- docs: end hidden content -->
+
+### Focus Management
+
+Elements with `aria-hidden` applied (as well as their descendants) are completely hidden from assistive technologies. It's therefore very important that the element with active focus be within the backdrop target.
+
+**When showing a backdrop**: first move focus inside the target, then set the `shown` attribute on the backdrop.
+
+**When hiding a backdrop**: first remove the `shown` attribute on the backdrop, then if appropriate move focus outside the target.

package/components/backdrop/backdrop.js

@@ -1,6 +1,7 @@
 import '../colors/colors.js';
 import { css, html, LitElement } from 'lit';
-import { cssEscape, getComposedChildren, getComposedParent, isVisible } from '../../helpers/dom.js';
+import { cssEscape, getComposedChildren, getComposedParent, isComposedAncestor, isVisible } from '../../helpers/dom.js';
+import { getComposedActiveElement } from '../../helpers/focus.js';
 
 const BACKDROP_HIDDEN = 'data-d2l-backdrop-hidden';
 const BACKDROP_ARIA_HIDDEN = 'data-d2l-backdrop-aria-hidden';
@@ -12,7 +13,7 @@ const modals = new Set();
 let scrollOverflow = null;
 
 /**
- * A component for displaying a semi-transparent backdrop behind a specified sibling element. It also hides elements other than the target from assistive technologies by applying 'role="presentation"' and 'aria-hidden="true"'.
+ * A component for displaying a semi-transparent backdrop behind a specified sibling element. It also hides elements other than the target from assistive technologies by applying 'aria-hidden="true"'.
  */
 class Backdrop extends LitElement {
 
@@ -85,10 +86,8 @@ class Backdrop extends LitElement {
 	disconnectedCallback() {
 		// allow body scrolling, show hidden elements, if backdrop is removed from the DOM
 		allowBodyScroll(this);
-		if (this._hiddenElements) {
-			showAccessible(this._hiddenElements);
-			this._hiddenElements = null;
-		}
+		showAccessible(this._hiddenElements);
+		this._hiddenElements = null;
 		this._state = null;
 		super.disconnectedCallback();
 	}
@@ -106,7 +105,12 @@ class Backdrop extends LitElement {
 
 			if (this._state === null) {
 				preventBodyScroll(this);
-				this._hiddenElements = hideAccessible(this.parentNode.querySelector(`#${cssEscape(this.forTarget)}`));
+				const target = this.parentNode.querySelector(`#${cssEscape(this.forTarget)}`);
+				// aria-hidden elements cannot have focus, so wait for focus to be within target
+				waitForFocusWithinTarget(target, Date.now() + 200).then(() => {
+					if (!this.shown || this._state !== 'showing') return;
+					this._hiddenElements = hideAccessible(target);
+				});
 			}
 			this._state = 'showing';
 
@@ -188,6 +192,7 @@ function hideAccessible(target) {
 }
 
 function showAccessible(elems) {
+	if (!elems) return;
 	for (let i = 0; i < elems.length; i++) {
 		const elem = elems[i];
 		if (elem.hasAttribute(BACKDROP_ARIA_HIDDEN)) {
@@ -200,4 +205,18 @@ function showAccessible(elems) {
 	}
 }
 
+async function waitForFocusWithinTarget(target, expireTime) {
+
+	if (Date.now() > expireTime) return;
+
+	const activeElem = getComposedActiveElement();
+	const targetIsAncestor = isComposedAncestor(target, activeElem);
+
+	if (targetIsAncestor) return;
+
+	await new Promise(resolve => requestAnimationFrame(resolve));
+	return waitForFocusWithinTarget(target, expireTime);
+
+}
+
 customElements.define('d2l-backdrop', Backdrop);

package/custom-elements.json

@@ -189,7 +189,7 @@
     {
       "name": "d2l-backdrop",
       "path": "./components/backdrop/backdrop.js",
-      "description": "A component for displaying a semi-transparent backdrop behind a specified sibling element. It also hides elements other than the target from assistive technologies by applying 'role=\"presentation\"' and 'aria-hidden=\"true\"'.",
+      "description": "A component for displaying a semi-transparent backdrop behind a specified sibling element. It also hides elements other than the target from assistive technologies by applying 'aria-hidden=\"true\"'.",
       "attributes": [
         {
           "name": "for-target",

package/package.json

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