@brightspace-ui/core 3.255.0 → 3.256.0

package/components/backdrop/backdrop-loading.js

@@ -3,16 +3,11 @@ import '../loading-spinner/loading-spinner.js';
 import './backdrop-dirty-overlay.js';
 import { css, html, LitElement, nothing } from 'lit';
 import { getComposedChildren, getComposedParent } from '../../helpers/dom.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { getFlag } from '../../helpers/flags.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
-import { offscreenStyles } from '../offscreen/offscreen.js';
 
 import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
-const OffSCREEN_SIZELESS = getFlag('d2l-offscreen-sizeless', true);
-
 const BACKDROP_DELAY_MS = 800;
 const FADE_DURATION_MS = 500;
 const SPINNER_DELAY_MS = FADE_DURATION_MS;
@@ -139,7 +134,7 @@ class LoadingBackdrop extends PropertyRequiredMixin(LocalizeCoreElement(LitEleme
 			@media (prefers-reduced-motion: reduce) {
 				* { transition: none; }
 			}
-		`, offscreenStyles];
+		`];
 	}
 
 	constructor() {
@@ -152,18 +147,26 @@ class LoadingBackdrop extends PropertyRequiredMixin(LocalizeCoreElement(LitEleme
 	}
 
 	render() {
-		const forcedOffscreenSizelessStyles = OffSCREEN_SIZELESS ? {} : { height: '0px', width: '0px' };
-		const dirtyStateVisible = this._state !== 'hidden' && this.dataState === 'dirty';
+		const backdropVisible = this._state !== 'hidden';
 
 		return html`
-			${this._state === 'hidden' ? nothing :
+			${backdropVisible ?
 					html`<div id="visible">
 						<div class="backdrop" @transitionend="${this.#handleTransitionEnd}" @transitioncancel="${this.#handleTransitionEnd}"></div>
 						<d2l-loading-spinner style=${styleMap({ top: `${this._spinnerTop}px` })} size="${LOADING_SPINNER_SIZE}"></d2l-loading-spinner>
-					</div>`
+					</div>` : nothing
 			}
-			<div aria-live="polite" class="${classMap({ 'd2l-offscreen': !dirtyStateVisible })}" style="${styleMap(dirtyStateVisible ? {} : forcedOffscreenSizelessStyles)}">
-				${this.dataState === 'dirty' ? this.#renderDirtyOverlay() : this._ariaContent}
+			<div aria-live="polite" id="d2l-live-region">
+				${backdropVisible ?
+					html`<d2l-backdrop-dirty-overlay
+						style=${styleMap({ top: `${this._dirtyDialogTop}px` })}
+						description="${this.dirtyText}"
+						action="${this.dirtyButtonText}"
+						?inert=${this.dataState !== 'dirty'}
+					></d2l-backdrop-dirty-overlay>` : nothing }
+				<d2l-offscreen>
+					${this._ariaContent}
+				</d2l-offscreen>
 			</div>
 		`;
 	}
@@ -257,7 +260,7 @@ class LoadingBackdrop extends PropertyRequiredMixin(LocalizeCoreElement(LitEleme
 	#fade() {
 		let hideImmediately = reduceMotion || this._state === 'showing';
 		if (this._state === 'shown') {
-			const currentOpacity = getComputedStyle(this.shadowRoot.querySelector('.backdrop')).opacity;
+			const currentOpacity = getComputedStyle(this.shadowRoot.querySelector('#d2l-live-region')).opacity;
 			hideImmediately ||= (currentOpacity === '0');
 		}
 
@@ -296,14 +299,6 @@ class LoadingBackdrop extends PropertyRequiredMixin(LocalizeCoreElement(LitEleme
 		if (containingBlock.dataset.initiallyInert !== '1') containingBlock.removeAttribute('inert');
 	}
 
-	#renderDirtyOverlay() {
-		return html`<d2l-backdrop-dirty-overlay
-			style=${styleMap({ top: `${this._dirtyDialogTop}px` })}
-			description="${this.dirtyText}"
-			action="${this.dirtyButtonText}"
-		></d2l-backdrop-dirty-overlay>`;
-	}
-
 	#setLiveArea(content, { delay } = {}) {
 		this.announcementTimeout = setTimeout(() => this._ariaContent = content, delay || 0);
 	}

package/components/page/page-header-custom.js

@@ -1,6 +1,7 @@
 import '../colors/colors.js';
 import '../skip-nav/skip-nav-main.js';
 import { css, html, LitElement, nothing } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
 import { getNextFocusable } from '../../helpers/focus.js';
 
 export const isWindows = window.navigator.userAgent.indexOf('Windows') > -1;
@@ -17,6 +18,11 @@ class PageHeaderCustom extends LitElement {
 
 	static get properties() {
 		return {
+			/**
+			 * When set, the bottom slot will be a "d2l-visible-on-ancestor-target"
+			 * @type {boolean}
+			 */
+			bottomIsVisibleOnAncestorTarget: { type: Boolean, attribute: 'bottom-is-visible-on-ancestor-target' },
 			/**
 			 * Whether to render a skip nav link
 			 * @type {boolean}
@@ -132,6 +138,7 @@ class PageHeaderCustom extends LitElement {
 
 	constructor() {
 		super();
+		this.bottomIsVisibleOnAncestorTarget = false;
 		this.hasSkipNav = false;
 		this._hasBottom = false;
 	}
@@ -187,8 +194,12 @@ class PageHeaderCustom extends LitElement {
 	}
 
 	#renderBottom() {
+		const bottomClasses = {
+			bottom: true,
+			'd2l-visible-on-ancestor-target': this.bottomIsVisibleOnAncestorTarget
+		};
 		return html`
-			<div class="bottom" ?hidden="${!this._hasBottom}">
+			<div class="${classMap(bottomClasses)}" ?hidden="${!this._hasBottom}">
 				<div class="max-width">
 					<div class="padding">
 						<slot name="bottom" @slotchange="${this.#handleBottomSlotChange}"></slot>

package/custom-elements.json

@@ -12459,6 +12459,12 @@
       "path": "./components/page/page-header-custom.js",
       "description": "Generic page header layout component",
       "attributes": [
+        {
+          "name": "bottom-is-visible-on-ancestor-target",
+          "description": "When set, the bottom slot will be a \"d2l-visible-on-ancestor-target\"",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "has-skip-nav",
           "description": "Whether to render a skip nav link",
@@ -12467,6 +12473,13 @@
         }
       ],
       "properties": [
+        {
+          "name": "bottomIsVisibleOnAncestorTarget",
+          "attribute": "bottom-is-visible-on-ancestor-target",
+          "description": "When set, the bottom slot will be a \"d2l-visible-on-ancestor-target\"",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "hasSkipNav",
           "attribute": "has-skip-nav",

package/package.json

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