@brightspace-ui/core 3.24.1 → 3.25.1

package/components/collapsible-panel/README.md

@@ -100,10 +100,6 @@ The `d2l-collapsible-panel` element is a container that provides specific layout
 	d2l-collapsible-panel {
 		width: 800px;
 	}
-	/* TODO: remove this when daylight demo resizing is fixed */
-	d2l-collapsible-panel:not([expanded]) {
-		margin-bottom: 14rem;
-	}
 </style>
 
 <d2l-collapsible-panel panel-title="Collapsible Panel">
@@ -238,10 +234,6 @@ class CollapsiblePanelDaylightDemo extends LitElement {
 			d2l-collapsible-panel {
 				width: 500px;
 			}
-			/* TODO: remove this when daylight demo resizing is fixed */
-			d2l-collapsible-panel:not([expanded]) {
-				margin-bottom: 12rem;
-			}
 		`];
 	}
 

package/components/collapsible-panel/collapsible-panel.js

@@ -216,7 +216,13 @@ class CollapsiblePanel extends SkeletonMixin(FocusMixin(RtlMixin(LitElement))) {
 			}
 			.d2l-collapsible-panel-opener {
 				align-self: self-start;
+				background-color: transparent;
+				border: none;
 				margin-inline-end: var(--d2l-collapsible-panel-spacing-inline);
+				order: 1;
+				outline: none;
+				padding-block: 0;
+				padding-inline: 0;
 			}
 			.d2l-collapsible-panel-opener > d2l-icon-custom {
 				height: 0.9rem;
@@ -307,7 +313,7 @@ class CollapsiblePanel extends SkeletonMixin(FocusMixin(RtlMixin(LitElement))) {
 	}
 
 	static get focusElementSelector() {
-		return 'button.d2l-offscreen';
+		return '.d2l-collapsible-panel-opener';
 	}
 
 	disconnectedCallback() {
@@ -324,17 +330,8 @@ class CollapsiblePanel extends SkeletonMixin(FocusMixin(RtlMixin(LitElement))) {
 			'scrolled': this._scrolled,
 			'no-bottom-border': this._noBottomBorder,
 		};
-		const expandCollapseLabel = this.expandCollapseLabel || this.panelTitle;
 
 		return html`
-			<button
-				aria-expanded="${this.expanded}"
-				class="d2l-offscreen"
-				type="button"
-				@click="${this._toggleExpand}"
-				@focus="${this._onFocus}"
-				@blur="${this._onBlur}"
-			>${expandCollapseLabel}</button>
 			<div class="${classMap(classes)}" @click="${this._handlePanelClick}">
 				<div class="d2l-collapsible-panel-top-sentinel"></div>
 				${this._renderHeader()}
@@ -427,22 +424,31 @@ class CollapsiblePanel extends SkeletonMixin(FocusMixin(RtlMixin(LitElement))) {
 	}
 
 	_renderHeader() {
+		const expandCollapseLabel = this.expandCollapseLabel || this.panelTitle;
 		return html`
 			<div class="d2l-collapsible-panel-header" @click="${this._handleHeaderClick}">
 				<div class="d2l-collapsible-panel-before">
 					<slot name="before" @slotchange="${this._handleBeforeSlotChange}"></slot>
 				</div>
 				<div class="d2l-collapsible-panel-header-primary">
-					${this._renderPanelTitle()}
-					<div class="d2l-collapsible-panel-header-actions" @click="${this._handleActionsClick}">
-						<slot name="actions"></slot>
-					</div>
-					<div class="d2l-collapsible-panel-opener">
+					<button
+						class="d2l-collapsible-panel-opener"
+						aria-expanded="${this.expanded}"
+						type="button"
+						@click="${this._handleHeaderClick}"
+						@focus="${this._onFocus}"
+						@blur="${this._onBlur}"
+						aria-label="${expandCollapseLabel}"
+						>
 						<d2l-icon-custom size="tier1" class="d2l-skeletize">
 							<svg xmlns="http://www.w3.org/2000/svg" width="10" height="18" fill="none" viewBox="0 0 10 18">
 								<path stroke="var(--d2l-color-tungsten)" stroke-linejoin="round" stroke-width="2" d="m9 9-8 8V1l8 8Z"/>
 							</svg>
 						</d2l-icon-custom>
+					</button>
+					${this._renderPanelTitle()}
+					<div class="d2l-collapsible-panel-header-actions" @click="${this._handleActionsClick}">
+						<slot name="actions"></slot>
 					</div>
 				</div>
 				<div class="d2l-collapsible-panel-header-secondary" @click="${this._handleHeaderSecondaryClick}">

package/components/inputs/input-date-time-range-to.js

@@ -51,7 +51,8 @@ class InputDateTimeRangeTo extends SkeletonMixin(LocalizeCoreElement(LitElement)
 				display: flex;
 				flex-wrap: wrap;
 			}
-			:host([display-to]) div:not(.d2l-input-date-time-range-to-container-block).d2l-input-date-time-range-to-container {
+			:host([display-to]) div:not(.d2l-input-date-time-range-to-container-block).d2l-input-date-time-range-to-container,
+			:host([display-to]) div:not(.d2l-input-date-time-range-to-container-block).d2l-input-date-time-range-to-container .d2l-input-date-time-range-end-container {
 				column-gap: 0.9rem;
 			}
 			.d2l-input-date-time-range-end-container {
@@ -114,10 +115,10 @@ class InputDateTimeRangeTo extends SkeletonMixin(LocalizeCoreElement(LitElement)
 				<div class="d2l-input-date-time-range-start-container">
 					<slot name="left"></slot>
 				</div>
+				<div class="d2l-input-date-time-range-end-container">
 					<div class="d2l-body-small d2l-skeletize d2l-input-date-time-range-to-to">
 						${this.localize('components.input-date-time-range-to.to')}
 					</div>
-				<div class="d2l-input-date-time-range-end-container">
 					<slot name="right"></slot>
 				</div>
 			</div>

package/components/popover/demo/popover.html

@@ -8,6 +8,7 @@
 	<script type="module">
 		import '../../button/button-subtle.js';
 		import '../../demo/demo-page.js';
+		import '../../link/link.js';
 		import '../test/popover.js';
 	</script>
 </head>
@@ -32,6 +33,24 @@
 			</template>
 		</d2l-demo-snippet>
 
+		<h2>Popover (trap-focus)</h2>
+		<d2l-demo-snippet>
+			<template>
+				<d2l-button-subtle id="open2" text="Open"></d2l-button-subtle>
+				<d2l-test-popover trap-focus id="popover2" style="max-width: 400px;">
+					<d2l-link href="https://pirateipsum.me/" target="_blank">Pirate Ipsum</d2l-link>
+					<div>Sink me piracy Gold Road quarterdeck wherry long boat line pillage walk the plank Plate Fleet. Haul wind black spot strike colors deadlights lee Barbary Coast yo-ho-ho ballast gally Shiver me timbers. Sea Legs quarterdeck yard scourge of the seven seas coffer plunder lanyard holystone code of conduct belay.</div>
+					<d2l-button-subtle id="close2" text="Close"></d2l-button-subtle>
+				</d2l-test-popover>
+				<script>
+					const popover2 = document.querySelector('#popover2');
+					document.querySelector('#open2').addEventListener('click', () => popover2.opened = !popover2.opened);
+					document.querySelector('#close2').addEventListener('click', () => popover2.opened = false);
+					popover2.addEventListener('d2l-popover-focus-enter', e => console.log(e.type, e));
+				</script>
+			</template>
+		</d2l-demo-snippet>
+
 		<script>
 			document.addEventListener('d2l-popover-open', e => console.log(e.type, e));
 			document.addEventListener('d2l-popover-close', e => console.log(e.type, e));

package/components/popover/popover-mixin.js

@@ -1,7 +1,8 @@
 import '../colors/colors.js';
+import '../focus-trap/focus-trap.js';
 import { clearDismissible, setDismissible } from '../../helpers/dismissible.js';
 import { css, html } from 'lit';
-import { getComposedActiveElement, getPreviousFocusableAncestor } from '../../helpers/focus.js';
+import { getComposedActiveElement, getFirstFocusableDescendant, getPreviousFocusableAncestor } from '../../helpers/focus.js';
 import { isComposedAncestor } from '../../helpers/dom.js';
 
 const isSupported = ('popover' in HTMLElement.prototype);
@@ -13,16 +14,10 @@ export const PopoverMixin = superclass => class extends superclass {
 
 	static get properties() {
 		return {
-			/**
-			 * Whether the popover is open or not
-			 * @type {boolean}
-			 */
-			opened: { type: Boolean, reflect: true },
-			/**
-			 * Whether to disable auto-close/light-dismiss
-			 * @type {boolean}
-			 */
-			noAutoClose: { type: Boolean, reflect: true, attribute: 'no-auto-close' },
+			_noAutoClose: { state: true },
+			_noAutoFocus: { state: true },
+			_opened: { type: Boolean, reflect: true, attribute: '_opened' },
+			_trapFocus: { state: true },
 			_useNativePopover: { type: String, reflect: true, attribute: 'popover' }
 		};
 	}
@@ -55,7 +50,7 @@ export const PopoverMixin = superclass => class extends superclass {
 			:host(:not([popover])) {
 				z-index: 998; /* position on top of floating buttons */
 			}
-			:host([opened]) {
+			:host([_opened]) {
 				display: inline-block;
 			}
 
@@ -65,6 +60,7 @@ export const PopoverMixin = superclass => class extends superclass {
 				border-radius: var(--d2l-popover-border-radius, var(--d2l-popover-default-border-radius));
 				box-shadow: var(--d2l-popover-shadow, var(--d2l-popover-default-shadow));
 				box-sizing: border-box;
+				outline: none;
 			}
 
 			@keyframes d2l-popover-animation {
@@ -72,8 +68,8 @@ export const PopoverMixin = superclass => class extends superclass {
 				100% { opacity: 1; transform: translate(0, 0); }
 			}
 			@media (prefers-reduced-motion: no-preference) {
-				:host([opened]) {
-					animation: var(--d2l-popover-animation-name, var(--d2l-popover-default-animation-name)) 6000ms ease;
+				:host([_opened]) {
+					animation: var(--d2l-popover-animation-name, var(--d2l-popover-default-animation-name)) 300ms ease;
 				}
 			}
 		`;
@@ -81,8 +77,7 @@ export const PopoverMixin = superclass => class extends superclass {
 
 	constructor() {
 		super();
-		this.noAutoClose = false;
-		this.opened = false;
+		this.configure();
 		this._useNativePopover = isSupported ? 'manual' : undefined;
 		this._handleAutoCloseClick = this._handleAutoCloseClick.bind(this);
 		this._handleAutoCloseFocus = this._handleAutoCloseFocus.bind(this);
@@ -90,7 +85,7 @@ export const PopoverMixin = superclass => class extends superclass {
 
 	connectedCallback() {
 		super.connectedCallback();
-		if (this.opened) this._addAutoCloseHandlers();
+		if (this._opened) this._addAutoCloseHandlers();
 	}
 
 	disconnectedCallback() {
@@ -99,29 +94,48 @@ export const PopoverMixin = superclass => class extends superclass {
 		this._clearDismissible();
 	}
 
-	updated(changedProperties) {
-		super.updated(changedProperties);
-		if (changedProperties.has('opened')) {
+	async close() {
+		if (!this._opened) return;
 
-			if (this._useNativePopover) {
-				if (this.opened) this.showPopover();
-				else this.hidePopover();
-			}
+		this._opened = false;
 
-			this._previousFocusableAncestor = this.opened ? getPreviousFocusableAncestor(this, false, false) : null;
-
-			if (this.opened) {
-				this._opener = getComposedActiveElement();
-				this._addAutoCloseHandlers();
-				this._dismissibleId = setDismissible(() => this._close());
-				this.dispatchEvent(new CustomEvent('d2l-popover-open', { bubbles: true, composed: true }));
-			} else if (changedProperties.get('opened') !== undefined) {
-				this._removeAutoCloseHandlers();
-				this._clearDismissible();
-				this.dispatchEvent(new CustomEvent('d2l-popover-close', { bubbles: true, composed: true }));
-			}
+		if (this._useNativePopover) this.hidePopover();
 
-		}
+		this._previousFocusableAncestor = null;
+		this._removeAutoCloseHandlers();
+		this._clearDismissible();
+		await this.updateComplete; // wait before applying focus to opener
+		this._focusOpener();
+		this.dispatchEvent(new CustomEvent('d2l-popover-close', { bubbles: true, composed: true }));
+	}
+
+	configure(properties) {
+		this._noAutoClose = properties?.noAutoClose ?? false;
+		this._noAutoFocus = properties?.noAutoFocus ?? false;
+		this._trapFocus = properties?.trapFocus ?? false;
+	}
+
+	async open(applyFocus = true) {
+		if (this._opened) return;
+
+		this._applyFocus = applyFocus !== undefined ? applyFocus : true;
+		this._opened = true;
+
+		await this.updateComplete; // wait for popover attribute before managing top-layer
+		if (this._useNativePopover) this.showPopover();
+
+		this._previousFocusableAncestor = getPreviousFocusableAncestor(this, false, false);
+
+		this._opener = getComposedActiveElement();
+		this._addAutoCloseHandlers();
+		this._dismissibleId = setDismissible(() => this.close());
+		this._focusContent(this);
+		this.dispatchEvent(new CustomEvent('d2l-popover-open', { bubbles: true, composed: true }));
+	}
+
+	toggleOpen(applyFocus = true) {
+		if (this._opened) return this.close();
+		else return this.open(!this._noAutoFocus && applyFocus);
 	}
 
 	_addAutoCloseHandlers() {
@@ -136,25 +150,42 @@ export const PopoverMixin = superclass => class extends superclass {
 		this._dismissibleId = null;
 	}
 
-	_close() {
-		const hide = () => {
-			this.opened = false;
-		};
+	_focusContent(container) {
+		if (this._noAutoFocus || this._applyFocus === false) return;
+
+		const focusable = getFirstFocusableDescendant(container);
+		if (focusable) {
+			// Removing the rAF call can allow infinite focus looping to happen in content using a focus trap
+			requestAnimationFrame(() => focusable.focus());
+		} else {
+			const content = this._getContentContainer();
+			content.setAttribute('tabindex', '-1');
+			content.focus();
+		}
+	}
+
+	_focusOpener() {
+		if (!document.activeElement) return;
+		if (!isComposedAncestor(this, getComposedActiveElement())) return;
 
-		hide();
+		this?._opener.focus();
+	}
+
+	_getContentContainer() {
+		return this.shadowRoot.querySelector('.content');
 	}
 
 	_handleAutoCloseClick(e) {
 
-		if (!this.opened || this.noAutoClose) return;
+		if (!this._opened || this._noAutoClose) return;
 
 		const rootTarget = e.composedPath()[0];
-		if (isComposedAncestor(this.shadowRoot.querySelector('.content'), rootTarget)
+		if (isComposedAncestor(this._getContentContainer(), rootTarget)
 			|| (this._opener !== document.body && isComposedAncestor(this._opener, rootTarget))) {
 			return;
 		}
 
-		this._close();
+		this.close();
 	}
 
 	_handleAutoCloseFocus() {
@@ -162,8 +193,8 @@ export const PopoverMixin = superclass => class extends superclass {
 		// todo: try to use relatedTarget instead - this logic is largely copied as-is from dropdown simply to mitigate risk of this fragile code
 		setTimeout(() => {
 			// we ignore focusable ancestors othrwise the popover will close when user clicks empty space inside the popover
-			if (!this.opened
-				|| this.noAutoClose
+			if (!this._opened
+				|| this._noAutoClose
 				|| !document.activeElement
 				|| document.activeElement === this._previousFocusableAncestor
 				|| document.activeElement === document.body) {
@@ -171,16 +202,23 @@ export const PopoverMixin = superclass => class extends superclass {
 			}
 
 			const activeElement = getComposedActiveElement();
-			if (isComposedAncestor(this.shadowRoot.querySelector('.content'), activeElement)
+			if (isComposedAncestor(this, activeElement)
 				|| activeElement === this._opener) {
 				return;
 			}
 
-			this._close();
+			this.close();
 		}, 0);
 
 	}
 
+	_handleFocusTrapEnter() {
+		this._focusContent(this._getContentContainer());
+
+		/** Dispatched when user focus enters the popover (trap-focus option only) */
+		this.dispatchEvent(new CustomEvent('d2l-popover-focus-enter', { detail: { applyFocus: this._applyFocus } }));
+	}
+
 	_removeAutoCloseHandlers() {
 		this.removeEventListener('blur', this._handleAutoCloseFocus, { capture: true });
 		document.body?.removeEventListener('focus', this._handleAutoCloseFocus, { capture: true }); // DE41322: document.body can be null in some scenarios
@@ -188,7 +226,13 @@ export const PopoverMixin = superclass => class extends superclass {
 	}
 
 	_renderPopover() {
-		return html`<div class="content"><slot></slot></div>`;
+		const content = html`<div class="content"><slot></slot></div>`;
+
+		if (this._trapFocus) return html`<d2l-focus-trap @d2l-focus-trap-enter="${this._handleFocusTrapEnter}" ?trap="${this._opened}">
+			${content}
+		</d2l-focus-trap>`;
+
+		return content;
 	}
 
 };

package/custom-elements.json

@@ -10723,11 +10723,23 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "no-auto-focus",
+          "description": "Whether to disable auto-focus on the first focusable element when opened",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "opened",
           "description": "Whether the popover is open or not",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "trap-focus",
+          "description": "Whether to render a d2l-focus-trap around the content",
+          "type": "boolean",
+          "default": "false"
         }
       ],
       "properties": [
@@ -10738,20 +10750,38 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "noAutoFocus",
+          "attribute": "no-auto-focus",
+          "description": "Whether to disable auto-focus on the first focusable element when opened",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "opened",
           "attribute": "opened",
           "description": "Whether the popover is open or not",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "trapFocus",
+          "attribute": "trap-focus",
+          "description": "Whether to render a d2l-focus-trap around the content",
+          "type": "boolean",
+          "default": "false"
         }
       ],
       "events": [
+        {
+          "name": "d2l-popover-close"
+        },
         {
           "name": "d2l-popover-open"
         },
         {
-          "name": "d2l-popover-close"
+          "name": "d2l-popover-focus-enter",
+          "description": "Dispatched when user focus enters the popover (trap-focus option only)"
         }
       ]
     },

package/package.json

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