@brightspace-ui/core 3.239.1 → 3.240.1

package/components/dialog/dialog-confirm.js

@@ -2,6 +2,8 @@ import { _generateResetStyles, heading3Styles } from '../typography/styles.js';
 import { css, html, LitElement, nothing } from 'lit';
 import { DialogMixin } from './dialog-mixin.js';
 import { dialogStyles } from './dialog-styles.js';
+import { getFlag } from '../../helpers/flags.js';
+import { getFocusRingStyles } from '../../helpers/focus.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
@@ -35,11 +37,25 @@ class DialogConfirm extends LocalizeCoreElement(DialogMixin(LitElement)) {
 				max-width: 420px;
 			}
 
-			.d2l-dialog-content > div {
+			.d2l-dialog-header > h2 {
+				margin: 0;
+				width: fit-content;
+			}
+
+			${getFocusRingStyles(pseudoClass => `.d2l-dialog-content:${pseudoClass} > div`, { extraStyles: css`
+
+				--d2l-focus-ring-offset: -1px; border-radius: 6px;`
+			})}
+			.d2l-dialog-content:focus,
+			.d2l-dialog-content:focus-visible {
+				outline: none;
+			}
+
+			.d2l-dialog-content {
 				padding-top: 30px;
 			}
 
-			.d2l-dialog-header + .d2l-dialog-content > div {
+			.d2l-dialog-header + .d2l-dialog-content {
 				padding-top: 0;
 			}
 
@@ -64,7 +80,7 @@ class DialogConfirm extends LocalizeCoreElement(DialogMixin(LitElement)) {
 					top: 0;
 				}
 
-				.d2l-dialog-content > div {
+				.d2l-dialog-content {
 					padding-top: 20px;
 				}
 
@@ -76,21 +92,37 @@ class DialogConfirm extends LocalizeCoreElement(DialogMixin(LitElement)) {
 	constructor() {
 		super();
 		this.critical = false;
+		this.preferNative = getFlag('GAUD-9644-prefer-native-confirm-dialogs', false);
 		this._criticalLabelId = getUniqueId();
 		this._textId = getUniqueId();
 		this._titleId = getUniqueId();
 	}
 
 	render() {
-		const contentTabIndex = !this.focusableContentElemPresent ? '0' : undefined;
+		let contentTabIndex = undefined;
+		let titleTabIndex = undefined;
+		let contentAutofocus = false;
+		let titleAutofocus = false;
+		if (this._useNative) {
+			if (this.titleText) {
+				titleTabIndex = '-1';
+				titleAutofocus = true;
+			} else {
+				contentTabIndex = '-1';
+				contentAutofocus = true;
+			}
+		} else {
+			contentTabIndex = !this.focusableContentElemPresent ? '0' : undefined;
+		}
+
 		const inner = html`
 			${this.critical ? html`<div id="${this._criticalLabelId}" hidden>${this.localize('components.dialog.critical')}</div>` : nothing}
 			<div class="d2l-dialog-inner">
 				${this.titleText ? html`
 					<div class="d2l-dialog-header">
-						<div><h2 id="${this._titleId}" class="d2l-heading-3">${this.titleText}</h2></div>
+						<h2 id="${this._titleId}" class="d2l-heading-3" tabindex="${ifDefined(titleTabIndex)}" ?autofocus="${titleAutofocus}">${this.titleText}</h2>
 					</div>` : null}
-				<div id="${this._textId}" class="d2l-dialog-content" tabindex="${ifDefined(contentTabIndex)}">
+				<div id="${this._textId}" class="d2l-dialog-content" tabindex="${ifDefined(contentTabIndex)}" ?autofocus="${contentAutofocus}">
 					<div>${this.text ? this.text.split('\n').map(line => html`<p>${line}</p>`) : null}</div>
 				</div>
 				<div class="d2l-dialog-footer">
@@ -113,7 +145,7 @@ class DialogConfirm extends LocalizeCoreElement(DialogMixin(LitElement)) {
 	}
 
 	_focusInitial() {
-		if (!this.shadowRoot) return;
+		if (!this.shadowRoot || this._useNative) return;
 		const footer = this.shadowRoot.querySelector('.d2l-dialog-footer-slot');
 		const nodes = footer.assignedNodes();
 		for (let i = 0; i < nodes.length; i++) {

package/components/dialog/dialog-fullscreen.js

@@ -193,6 +193,7 @@ class DialogFullscreen extends PropertyRequiredMixin(LocalizeCoreElement(AsyncCo
 		super();
 		this.async = false;
 		this.noPadding = false;
+		this.preferNative = false;
 		this._autoSize = false;
 		this._hasFooterContent = false;
 		this._icon = 'tier1:close-large-thick';

package/components/dialog/dialog-mixin.js

@@ -19,10 +19,7 @@ window.D2L.DialogMixin = window.D2L.DialogMixin || {};
 // https://bugs.webkit.org/show_bug.cgi?id=233320
 // starting in Chrome 102, all elements inside <dialog>s that are inside shadow roots have null offsetParent
 // https://bugs.chromium.org/p/chromium/issues/detail?id=1331803
-window.D2L.DialogMixin.hasNative = false;
-if (window.D2L.DialogMixin.preferNative === undefined) {
-	window.D2L.DialogMixin.preferNative = true;
-}
+window.D2L.DialogMixin.hasNative = (window.HTMLDialogElement !== undefined);
 
 const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
 const abortAction = 'abort';
@@ -44,6 +41,11 @@ export const DialogMixin = superclass => class extends superclass {
 			 * ADVANCED: Opt out of dialog content scrolling
 			 */
 			noContentScroll: { type: Boolean, attribute: 'no-content-scroll', reflect: true },
+			/**
+			 * @ignore
+			 * Do NOT use this
+			 */
+			preferNative: { type: Boolean, attribute: 'prefer-native' },
 			/**
 			 * The optional title for the dialog
 			 */
@@ -72,6 +74,7 @@ export const DialogMixin = superclass => class extends superclass {
 		this.focusableContentElemPresent = false;
 		this.noContentScroll = false;
 		this.opened = false;
+		this.preferNative = false;
 		this._autoSize = true;
 		this._dialogId = getUniqueId();
 		this._fullscreenWithin = 0;
@@ -91,7 +94,6 @@ export const DialogMixin = superclass => class extends superclass {
 		this._top = 0;
 		this._updateOverflow = this._updateOverflow.bind(this);
 		this._updateSize = this._updateSize.bind(this);
-		this._useNative = (window.D2L.DialogMixin.hasNative && window.D2L.DialogMixin.preferNative);
 		this._width = 0;
 	}
 
@@ -127,6 +129,13 @@ export const DialogMixin = superclass => class extends superclass {
 		}
 	}
 
+	willUpdate(changedProperties) {
+		super.willUpdate(changedProperties);
+		if (this.#useNativeInitialized) return;
+		this._useNative = (window.D2L.DialogMixin.hasNative && this.preferNative);
+		this.#useNativeInitialized = true;
+	}
+
 	open() {
 		if (this.opened) return;
 		this.opened = true;
@@ -155,6 +164,8 @@ export const DialogMixin = superclass => class extends superclass {
 		await Promise.all(composedChildren.map(child => waitForElem(child, predicate)));
 	}
 
+	#useNativeInitialized = false;
+
 	_addHandlers() {
 		window.addEventListener('resize', this._updateSize);
 		this.addEventListener('touchstart', this._handleTouchStart);
@@ -387,7 +398,7 @@ export const DialogMixin = superclass => class extends superclass {
 		return abortEvent.defaultPrevented;
 	}
 
-	_open() {
+	async _open() {
 		if (!this.opened) return;
 
 		this._opener = getComposedActiveElement();
@@ -411,6 +422,8 @@ export const DialogMixin = superclass => class extends superclass {
 		});
 
 		if (this._useNative) {
+			this._state = 'showing';
+			await this.updateComplete;
 			dialog.showModal();
 		}
 
@@ -432,7 +445,7 @@ export const DialogMixin = superclass => class extends superclass {
 			}, 0);
 
 			await this._updateSize();
-			this._state = 'showing';
+			if (!this._useNative) this._state = 'showing';
 			await this.updateComplete;
 
 			// edge case: no children were focused, try again after one redraw

package/components/dialog/dialog.js

@@ -103,6 +103,7 @@ class Dialog extends PropertyRequiredMixin(LocalizeCoreElement(AsyncContainerMix
 		this.critical = false;
 		this.describeContent = false;
 		this.fullHeight = false;
+		this.preferNative = false;
 		this.width = 600;
 		this._criticalLabelId = getUniqueId();
 		this._handleResize = this._handleResize.bind(this);

package/components/object-property-list/object-property-list-item.js

@@ -47,14 +47,14 @@ export class ObjectPropertyListItem extends SkeletonMixin(LitElement) {
 				margin: 0 -0.05rem; /* 10px desired margin, subtract 5px arbitrary whitespace and 6px whitespace inside bullet icon. */
 			}
 			.separator d2l-icon {
-				color: var(--d2l-color-galena);
+				color: var(--d2l-theme-text-color-static-faint);
 			}
 			.item-icon {
 				margin-inline-end: 0.05rem; /* 6px desired margin, subtract 5px arbitrary whitespace. */
 				margin-top: -0.1rem;
 			}
 			:host([skeleton]) d2l-icon {
-				color: var(--d2l-color-sylvite);
+				color: var(--d2l-theme-background-color-interactive-faint-hover);
 			}
 			:host([skeleton]) .d2l-skeletize {
 				display: inline-block;

package/custom-elements.json

@@ -2548,6 +2548,10 @@
           "description": "Whether or not the dialog is open",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "preferNative",
+          "default": "false"
         }
       ],
       "events": [
@@ -2667,6 +2671,11 @@
           "description": "Whether or not the dialog is open",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "preferNative",
+          "type": "boolean",
+          "default": "false"
         }
       ],
       "events": [
@@ -2816,6 +2825,11 @@
           "description": "Whether or not the dialog is open",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "preferNative",
+          "type": "boolean",
+          "default": "false"
         }
       ],
       "events": [

package/package.json

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