@brightspace-ui/core 3.25.0 → 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/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,4 +1,5 @@
 import '../colors/colors.js';
+import '../focus-trap/focus-trap.js';
 import { clearDismissible, setDismissible } from '../../helpers/dismissible.js';
 import { css, html } from 'lit';
 import { getComposedActiveElement, getFirstFocusableDescendant, getPreviousFocusableAncestor } from '../../helpers/focus.js';
@@ -16,6 +17,7 @@ export const PopoverMixin = superclass => class extends superclass {
 			_noAutoClose: { state: true },
 			_noAutoFocus: { state: true },
 			_opened: { type: Boolean, reflect: true, attribute: '_opened' },
+			_trapFocus: { state: true },
 			_useNativePopover: { type: String, reflect: true, attribute: 'popover' }
 		};
 	}
@@ -92,52 +94,43 @@ 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._previousFocusableAncestor = this._opened ? getPreviousFocusableAncestor(this, false, false) : null;
-
-			if (this._opened) {
-
-				this._opener = getComposedActiveElement();
-				this._addAutoCloseHandlers();
-				this._dismissibleId = setDismissible(() => this.close());
-				this._focusContent(this);
-				this.dispatchEvent(new CustomEvent('d2l-popover-open', { bubbles: true, composed: true }));
-
-			} else if (changedProperties.get('_opened') !== undefined) {
-
-				this._removeAutoCloseHandlers();
-				this._clearDismissible();
-				this._focusOpener();
-				this.dispatchEvent(new CustomEvent('d2l-popover-close', { bubbles: true, composed: true }));
-
-			}
+		this._opened = false;
 
-		}
-	}
+		if (this._useNativePopover) this.hidePopover();
 
-	close() {
-		this._opened = false;
-		return this.updateComplete;
+		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._opened = properties?.opened ?? false;
+		this._trapFocus = properties?.trapFocus ?? false;
 	}
 
-	open(applyFocus = true) {
+	async open(applyFocus = true) {
+		if (this._opened) return;
+
 		this._applyFocus = applyFocus !== undefined ? applyFocus : true;
 		this._opened = true;
-		return this.updateComplete;
+
+		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) {
@@ -209,7 +202,7 @@ export const PopoverMixin = superclass => class extends superclass {
 			}
 
 			const activeElement = getComposedActiveElement();
-			if (isComposedAncestor(this._getContentContainer(), activeElement)
+			if (isComposedAncestor(this, activeElement)
 				|| activeElement === this._opener) {
 				return;
 			}
@@ -219,6 +212,13 @@ export const PopoverMixin = superclass => class extends superclass {
 
 	}
 
+	_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
@@ -226,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

@@ -10734,6 +10734,12 @@
           "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": [
@@ -10757,14 +10763,25 @@
           "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.25.0",
+  "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",