@brightspace-ui/core 2.15.1 → 2.15.4

package/components/dialog/dialog-mixin.js

@@ -14,6 +14,8 @@ import { tryGetIfrauBackdropService } from '../../helpers/ifrauBackdropService.j
 window.D2L = window.D2L || {};
 window.D2L.DialogMixin = window.D2L.DialogMixin || {};
 
+// while implemented in Webkit, native <dialog> focus mangement across slotted content is buggy
+// https://bugs.webkit.org/show_bug.cgi?id=233320
 window.D2L.DialogMixin.hasNative = (window.HTMLDialogElement !== undefined)
 	&& (navigator.vendor && navigator.vendor.toLowerCase().indexOf('apple') === -1);
 if (window.D2L.DialogMixin.preferNative === undefined) {
@@ -182,7 +184,16 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 				return;
 			}
 		}
-		this.shadowRoot.querySelector('d2l-focus-trap').focus();
+		const focusTrap = this.shadowRoot.querySelector('d2l-focus-trap');
+		if (focusTrap) {
+			focusTrap.focus();
+			return;
+		}
+		const header = this.shadowRoot.querySelector('.d2l-dialog-header');
+		if (header) {
+			const firstFocusable = getNextFocusable(header);
+			if (firstFocusable) forceFocusVisible(firstFocusable);
+		}
 	}
 
 	_focusInitial() {
@@ -412,12 +423,6 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 			'd2l-dialog-fullscreen-within': this._fullscreenWithin !== 0
 		};
 
-		inner = html`<d2l-focus-trap
-			@d2l-focus-trap-enter="${this._handleFocusTrapEnter}"
-			?trap="${this.opened}">
-				${inner}
-			</d2l-focus-trap>`;
-
 		return html`${this._useNative ?
 			html`<dialog
 				aria-describedby="${ifDefined(info.descId)}"
@@ -443,7 +448,9 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 				id="${this._dialogId}"
 				role="${info.role}"
 				style=${styleMap(styles)}>
-					${inner}
+					<d2l-focus-trap
+						@d2l-focus-trap-enter="${this._handleFocusTrapEnter}"
+						?trap="${this.opened}">${inner}</d2l-focus-trap>
 				</div>
 				<d2l-backdrop for-target="${this._dialogId}" ?shown="${this._state === 'showing'}"></d2l-backdrop>`}
 		`;

package/components/dialog/dialog.js

@@ -106,7 +106,6 @@ class Dialog extends LocalizeCoreElement(AsyncContainerMixin(DialogMixin(LitElem
 		this.describeContent = false;
 		this.width = 600;
 		this._handleResize = this._handleResize.bind(this);
-		this._handleResize();
 	}
 
 	get asyncContainerCustom() {
@@ -123,6 +122,11 @@ class Dialog extends LocalizeCoreElement(AsyncContainerMixin(DialogMixin(LitElem
 		super.disconnectedCallback();
 	}
 
+	firstUpdated(changedProperties) {
+		super.firstUpdated(changedProperties);
+		this._handleResize();
+	}
+
 	render() {
 
 		let loading = null;

package/helpers/mathjax.js

@@ -56,19 +56,24 @@ export class HtmlBlockMathRenderer {
 
 		await loadMathJax(mathJaxConfig);
 
+		// MathJax 3 does not support newlines, but it does persist styles, so add custom styles to mimic a linebreak
+		// This work-around should be removed when linebreaks are natively supported.
+		// MathJax issue: https://github.com/mathjax/MathJax/issues/2312
+		// A duplicate that explains our exact issue: https://github.com/mathjax/MathJax/issues/2495
+		const lineBreakStyle = 'display: block; height: 0.5rem;';
+
 		// If we're opting out of deferred rendering, we need to rely
 		// on the global MathJax install for rendering.
 		if (options.noDeferredRendering) {
+			elem.querySelectorAll('mspace[linebreak="newline"]').forEach(elm => {
+				elm.setAttribute('style', lineBreakStyle);
+			});
 			await window.MathJax.startup.promise;
 			window.MathJax.typeset([elem]);
 			return elem;
 		}
 
-		// MathJax 3 does not support newlines, but it does persist styles, so add custom styles to mimic a linebreak
-		// This work-around should be removed when linebreaks are natively supported.
-		// MathJax issue: https://github.com/mathjax/MathJax/issues/2312
-		// A duplicate that explains our exact issue: https://github.com/mathjax/MathJax/issues/2495
-		const inner = elem.innerHTML.replaceAll('<mspace linebreak="newline">', '<mspace linebreak="newline" style="display: block; height: 0.5rem;">');
+		const inner = elem.innerHTML.replaceAll('<mspace linebreak="newline">', `<mspace linebreak="newline" style="${lineBreakStyle}">`);
 
 		const temp = document.createElement('div');
 		temp.style.display = 'none';

package/package.json

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