@brightspace-ui/core 2.15.2 → 2.16.0

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/filter/README.md

@@ -159,7 +159,8 @@ The filter will announce changes to filter selections, search results, and when
 | Property | Type | Description |
 |---|---|---|
 | `disabled` | Boolean, default: `false` | Disables the dropdown opener for the filter |
-| `opened` | Boolean, default: `false` | Whether or not the filter is open  |
+| `opened` | Boolean, default: `false` | Whether or not the filter is open |
+| `text` | String | Optional override for the button text used for a multi-dimensional filter |
 
 ### Events
 * `d2l-filter-change`: dispatched when any filter value has changed (may contain info about multiple dimensions and multiple changes in each)

package/components/filter/demo/filter.html

@@ -92,7 +92,7 @@
 				<d2l-filter>
 					<d2l-filter-dimension-set key="course" text="Course" loading select-all>
 						<d2l-filter-dimension-set-value key="art" text="Art"></d2l-filter-dimension-set-value>
-						<d2l-filter-dimension-set-value key="astronomy" text="Astronomy" selected></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-value key="astronomy" text="Astronomy"></d2l-filter-dimension-set-value>
 						<d2l-filter-dimension-set-value key="biology" text="Biology"></d2l-filter-dimension-set-value>
 						<d2l-filter-dimension-set-value key="chemistry" text="Chemistry"></d2l-filter-dimension-set-value>
 						<d2l-filter-dimension-set-value key="drama" text="Drama"></d2l-filter-dimension-set-value>
@@ -105,9 +105,13 @@
 					</d2l-filter-dimension-set>
 					
 				</d2l-filter>
-				<d2l-filter>
+				<d2l-filter text="More Filters">
 					<d2l-filter-dimension-set key="course" text="Course" loading select-all></d2l-filter-dimension-set>
-					<d2l-filter-dimension-set key="role" text="Role" loading></d2l-filter-dimension-set>
+					<d2l-filter-dimension-set key="role" text="Role" loading>
+						<d2l-filter-dimension-set-value key="admin" text="Admin"></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-value key="instructor" text="Instructor"></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-value key="student" text="Student"></d2l-filter-dimension-set-value>
+					</d2l-filter-dimension-set>
 					<d2l-filter-dimension-set key="semester" text="Semester" loading selection-single></d2l-filter-dimension-set>
 				</d2l-filter>
 				<d2l-button id="finish-loading">Finish loading (in 5 seconds)</d2l-button>

package/components/filter/filter.js

@@ -52,6 +52,11 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 			 * @type {boolean}
 			 */
 			opened: { type: Boolean, reflect: true },
+			/**
+			 * Optional override for the button text used for a multi-dimensional filter
+			 * @type {string}
+			 */
+			text: { type: String },
 			_activeDimensionKey: { type: String, attribute: false },
 			_dimensions: { type: Array, attribute: false },
 			_totalAppliedCount: { type: Number, attribute: false }
@@ -175,7 +180,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 		const dimensions = this._buildDimensions(singleDimension);
 
 		const filterCount = this._formatFilterCount(this._totalAppliedCount);
-		let buttonText = singleDimension ? this._dimensions[0].text : this.localize('components.filter.filters');
+		let buttonText = singleDimension ? this._dimensions[0].text : (this.text || this.localize('components.filter.filters'));
 		if (filterCount) buttonText = `${buttonText} (${filterCount})`;
 
 		let description = singleDimension ? this.localize('components.filter.singleDimensionDescription', { filterName: this._dimensions[0].text }) : this.localize('components.filter.filters');

package/custom-elements.json

@@ -3146,6 +3146,11 @@
       "path": "./components/filter/filter.js",
       "description": "A filter component that contains one or more dimensions a user can filter by.\nThis component is in charge of all rendering.",
       "attributes": [
+        {
+          "name": "text",
+          "description": "Optional override for the button text used for a multi-dimensional filter",
+          "type": "string"
+        },
         {
           "name": "disabled",
           "description": "Disables the dropdown opener for the filter",
@@ -3160,6 +3165,12 @@
         }
       ],
       "properties": [
+        {
+          "name": "text",
+          "attribute": "text",
+          "description": "Optional override for the button text used for a multi-dimensional filter",
+          "type": "string"
+        },
         {
           "name": "disabled",
           "attribute": "disabled",

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.2",
+  "version": "2.16.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",