@brightspace-ui/core 3.159.3 → 3.159.5

package/components/dropdown/dropdown-menu.js

@@ -123,6 +123,7 @@ if (usePopoverMixin) {
 			// reset to root view
 			const menu = this.#getMenuElement();
 			menu.show({ preventFocus: true });
+			menu.resetFocusables();
 		}
 
 		#handleFocus(e) {
@@ -303,6 +304,7 @@ if (usePopoverMixin) {
 			// reset to root view
 			const menu = this.__getMenuElement();
 			menu.show({ preventFocus: true });
+			menu.resetFocusables();
 		}
 
 		_onFocus(e) {

package/components/list/demo/list-item-actions.html

@@ -44,32 +44,30 @@
 
 			<h2>Navigation (href) Primary Action</h2>
 
-			<d2l-demo-snippet id="link-demo">
+			<d2l-demo-snippet>
 				<template>
 					<d2l-list add-button>
-						<d2l-list>
-							<d2l-list-item href="http://www.d2l.com">
-								<d2l-list-item-content>Introductory Earth Sciences</d2l-list-item-content>
-							</d2l-list-item>
-							<d2l-list-item href="http://www.d2l.com">
-								<d2l-list-item-content>Engineering Materials for Energy Systems</d2l-list-item-content>
-							</d2l-list-item>
-							<d2l-list-item href="http://www.d2l.com">
-								<d2l-list-item-content>Geomorphology and GIS</d2l-list-item-content>
-							</d2l-list-item>
-						</d2l-list>
+						<d2l-list-item href="http://www.d2l.com">
+							<d2l-list-item-content>Introductory Earth Sciences</d2l-list-item-content>
+						</d2l-list-item>
+						<d2l-list-item href="http://www.d2l.com">
+							<d2l-list-item-content>Engineering Materials for Energy Systems</d2l-list-item-content>
+						</d2l-list-item>
+						<d2l-list-item href="http://www.d2l.com">
+							<d2l-list-item-content>Geomorphology and GIS</d2l-list-item-content>
+						</d2l-list-item>
 					</d2l-list>
 					<script>
-						document.querySelector('#link-demo').addEventListener('d2l-list-item-link-click', (e) => {
-							console.log('d2l-list-item-link clicked!', e);
-						});
+						(demo => {
+							demo.addEventListener('d2l-list-item-link-click', e => console.log('d2l-list-item-link clicked!', e));
+						})(document.currentScript.parentNode);
 					</script>
 				</template>
 			</d2l-demo-snippet>
 
 			<h2>Button Primary Action</h2>
 
-			<d2l-demo-snippet id="button-demo">
+			<d2l-demo-snippet>
 				<template>
 					<d2l-list>
 						<d2l-list-item-button>
@@ -83,9 +81,9 @@
 						</d2l-list-item-button>
 					</d2l-list>
 					<script>
-						document.querySelector('#button-demo').addEventListener('d2l-list-item-button-click', (e) => {
-							console.log('d2l-list-item-button clicked!', e);
-						});
+						(demo => {
+							demo.addEventListener('d2l-list-item-button-click', e => console.log('d2l-list-item-button clicked!', e));
+						})(document.currentScript.parentNode);
 					</script>
 				</template>
 			</d2l-demo-snippet>
@@ -240,7 +238,7 @@
 
 			<h2>Selection & Navigation (href) Primary Action</h2>
 
-			<d2l-demo-snippet id="selection-link-demo">
+			<d2l-demo-snippet>
 				<template>
 					<d2l-list>
 						<d2l-list-controls slot="controls">
@@ -258,16 +256,16 @@
 						</d2l-list-item>
 					</d2l-list>
 					<script>
-						document.querySelector('#selection-link-demo').addEventListener('d2l-list-item-link-click', (e) => {
-							console.log('d2l-list-item-link clicked!', e);
-						});
+						(demo => {
+							demo.addEventListener('d2l-list-item-link-click', e => console.log('d2l-list-item-link clicked!', e));
+						})(document.currentScript.parentNode);
 					</script>
 				</template>
 			</d2l-demo-snippet>
 
 			<h2>Selection & Button Primary Action</h2>
 
-			<d2l-demo-snippet id="selection-button-demo">
+			<d2l-demo-snippet>
 				<template>
 					<d2l-list>
 						<d2l-list-controls slot="controls">
@@ -285,16 +283,16 @@
 						</d2l-list-item-button>
 					</d2l-list>
 					<script>
-						document.querySelector('#selection-button-demo').addEventListener('d2l-list-item-button-click', (e) => {
-							console.log('d2l-list-item-button clicked!', e);
-						});
+						(demo => {
+							demo.addEventListener('d2l-list-item-button-click', e => console.log('d2l-list-item-button clicked!', e));
+						})(document.currentScript.parentNode);
 					</script>
 				</template>
 			</d2l-demo-snippet>
 
 			<h2>Grid Actions with Navigation (href) Primary Action</h2>
 
-			<d2l-demo-snippet id="grid-link-demo">
+			<d2l-demo-snippet>
 				<template>
 					<d2l-list grid add-button>
 						<d2l-list-controls slot="controls">
@@ -321,16 +319,16 @@
 						</d2l-list-item>
 					</d2l-list>
 					<script>
-						document.querySelector('#grid-link-demo').addEventListener('d2l-list-item-link-click', (e) => {
-							console.log('d2l-list-item-link clicked!', e);
-						});
+						(demo => {
+							demo.addEventListener('d2l-list-item-link-click', e => console.log('d2l-list-item-link clicked!', e));
+						})(document.currentScript.parentNode);
 					</script>
 				</template>
 			</d2l-demo-snippet>
 
 			<h2>Grid Actions with Button Primary Action</h2>
 
-			<d2l-demo-snippet id="grid-button-demo">
+			<d2l-demo-snippet>
 				<template>
 					<d2l-list grid>
 						<d2l-list-controls slot="controls">
@@ -357,9 +355,9 @@
 						</d2l-list-item-button>
 					</d2l-list>
 					<script>
-						document.querySelector('#grid-button-demo').addEventListener('d2l-list-item-button-click', (e) => {
-							console.log('d2l-list-item-button clicked!', e);
-						});
+						(demo => {
+							demo.addEventListener('d2l-list-item-button-click', e => console.log('d2l-list-item-button clicked!', e));
+						})(document.currentScript.parentNode);
 					</script>
 				</template>
 			</d2l-demo-snippet>

package/components/list/list-item-mixin.js

@@ -108,6 +108,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
 			_addButtonText: { state: true },
 			_displayKeyboardTooltip: { type: Boolean },
 			_hasColorSlot: { type: Boolean, reflect: true, attribute: '_has-color-slot' },
+			_hasListItemContent: { state: true },
 			_hasNestedList: { type: Boolean, reflect: true, attribute: '_has-nested-list' },
 			_hasNestedListAddButton: { type: Boolean, reflect: true, attribute: '_has-nested-list-add-button' },
 			_hovering: { type: Boolean, reflect: true },
@@ -216,6 +217,11 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				--d2l-list-item-content-text-outline: 2px solid var(--d2l-color-celestine);
 				--d2l-list-item-content-text-outline-offset: 1px;
 			}
+			:host([_focusing-primary-action]:not([padding-type="none"])) .d2l-list-item-content-none {
+				border-radius: 6px;
+				outline: var(--d2l-list-item-content-text-outline);
+				outline-offset: -4px;
+			}
 			@supports selector(:has(a, b)) {
 				:host([_list-item-new-styles][_focusing-primary-action]) .d2l-list-item-content {
 					--d2l-list-item-content-text-border-radius: initial;
@@ -227,7 +233,18 @@ export const ListItemMixin = superclass => class extends composeMixins(
 					--d2l-list-item-content-text-outline: 2px solid var(--d2l-color-celestine);
 					--d2l-list-item-content-text-outline-offset: 1px;
 				}
+				:host([_list-item-new-styles][_focusing-primary-action]:not([padding-type="none"])) .d2l-list-item-content-none {
+					border-radius: initial;
+					outline: initial;
+					outline-offset: initial;
+				}
+				:host([_list-item-new-styles][_focusing-primary-action]:not([padding-type="none"])):has(:focus-visible) .d2l-list-item-content-none {
+					border-radius: 8px;
+					outline: var(--d2l-list-item-content-text-outline);
+					outline-offset: -4px;
+				}
 			}
+
 			[slot="content-action"] {
 				height: 100%;
 			}
@@ -455,6 +472,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
 		this._contentId = getUniqueId();
 		this._displayKeyboardTooltip = false;
 		this._hasColorSlot = false;
+		this._hasListItemContent = true;
 		this._hasNestedList = false;
 		this._listItemInteractiveEnabled = listItemInteractiveFlag;
 		this._listItemNewStyles = useNewStylesFlag;
@@ -487,6 +505,10 @@ export const ListItemMixin = superclass => class extends composeMixins(
 		if (changedProperties.has('_siblingHasColor') || changedProperties.has('color')) {
 			this._hasColorSlot = this.color || this._siblingHasColor;
 		}
+		if (this._focusingPrimaryAction && changedProperties.has('_focusingPrimaryAction')) {
+			this._hasListItemContent = !!this.shadowRoot.querySelector('slot:not([name])').assignedElements({ flatten: true })
+				.find(elem => elem.tagName === 'D2L-LIST-ITEM-CONTENT');
+		}
 	}
 
 	focus() {
@@ -698,11 +720,15 @@ export const ListItemMixin = superclass => class extends composeMixins(
 			'd2l-list-item-color-inner': true,
 			'd2l-skeletize': this.color
 		};
+		const contentClasses = {
+			'd2l-list-item-content': true,
+			'd2l-list-item-content-none': !this._hasListItemContent
+		};
 
 		const alignNested = ((this.draggable && this.selectable) || (this.expandable && this.selectable && this.color) || (this._listItemInteractiveEnabled && this.expandable && !this.selectable)) ? 'control' : undefined;
 		const contentAreaContent = html`
 			<div slot="content"
-				class="d2l-list-item-content"
+				class="${classMap(contentClasses)}"
 				id="${this._contentId}"
 				@mouseenter="${this._onMouseEnter}"
 				@mouseleave="${this._onMouseLeave}">

package/components/menu/menu.js

@@ -97,14 +97,13 @@ class Menu extends PropertyRequiredMixin(ThemeMixin(HierarchicalViewMixin(LitEle
 	firstUpdated(changedProperties) {
 		super.firstUpdated(changedProperties);
 
-		this.addEventListener('d2l-hierarchical-view-show-start', this._onVisibilityChange);
-		this.addEventListener('d2l-hierarchical-view-hide-complete', this._onVisibilityChange);
+		this.addEventListener('d2l-hierarchical-view-show-start', this._onShowStart);
+		this.addEventListener('d2l-hierarchical-view-hide-complete', this._onHideComplete);
 		this.addEventListener('d2l-hierarchical-view-show-complete', this._onShowComplete);
 		this.addEventListener('d2l-hierarchical-view-resize', this._onViewResize);
 		this.addEventListener('d2l-menu-item-visibility-change', this._onMenuItemsChanged);
 		this.addEventListener('keydown', this._onKeyDown);
 		this.addEventListener('keypress', this._onKeyPress);
-		this.addEventListener('focusout', this._onFocusOut);
 
 		this._labelChanged();
 
@@ -144,7 +143,9 @@ class Menu extends PropertyRequiredMixin(ThemeMixin(HierarchicalViewMixin(LitEle
 		if (this.getMenuType() === 'menu-radio') {
 			this._focusSelected();
 		} else {
-			this._focusFirst();
+			const lastFocused = this._getTabFocusable();
+			if (lastFocused) this._focusItem(lastFocused);
+			else this._focusFirst();
 		}
 	}
 
@@ -166,6 +167,10 @@ class Menu extends PropertyRequiredMixin(ThemeMixin(HierarchicalViewMixin(LitEle
 		}
 	}
 
+	resetFocusables() {
+		this._getTabFocusable()?.setAttribute('tabindex', '-1');
+	}
+
 	_createReturnItem() {
 		const item = document.createElement('d2l-menu-item-return');
 		item.addEventListener('d2l-menu-item-select', (e) => {
@@ -177,6 +182,8 @@ class Menu extends PropertyRequiredMixin(ThemeMixin(HierarchicalViewMixin(LitEle
 	}
 
 	_focusFirst() {
+		const lastFocused = this._getTabFocusable();
+		if (lastFocused) lastFocused.setAttribute('tabindex', '-1');
 		const item = this._tryGetNextFocusable();
 		if (item) this._focusItem(item);
 	}
@@ -192,11 +199,13 @@ class Menu extends PropertyRequiredMixin(ThemeMixin(HierarchicalViewMixin(LitEle
 	}
 
 	_focusNext(item) {
+		item.setAttribute('tabindex', '-1');
 		item = this._tryGetNextFocusable(item);
 		item ? this._focusItem(item) : this._focusFirst();
 	}
 
 	_focusPrevious(item) {
+		item.setAttribute('tabindex', '-1');
 		item = this._tryGetPreviousFocusable(item);
 		item ? this._focusItem(item) : this._focusLast();
 	}
@@ -249,6 +258,10 @@ class Menu extends PropertyRequiredMixin(ThemeMixin(HierarchicalViewMixin(LitEle
 		});
 	}
 
+	_getTabFocusable() {
+		return this._items.find(i => i.getAttribute('tabindex') === '0');
+	}
+
 	_isFocusable(item) {
 		if (item.nodeType !== 1) {
 			return false;
@@ -272,11 +285,9 @@ class Menu extends PropertyRequiredMixin(ThemeMixin(HierarchicalViewMixin(LitEle
 		if (returnItem) returnItem.setAttribute('text', this.label);
 	}
 
-	_onFocusOut(e) {
-		e.stopPropagation();
-		const isMenuItem = e.target.role === 'menuitem' || e.target.role === 'menuitemcheckbox' || e.target.role === 'menuitemradio';
-		if (!isMenuItem || e.target.hasAttribute('first') || e.target.hasChildView) return;
-		e.target.setAttribute('tabindex', '-1');
+	_onHideComplete() {
+		this.resetFocusables();
+		this.active = this.isActive();
 	}
 
 	_onKeyDown(e) {
@@ -304,7 +315,8 @@ class Menu extends PropertyRequiredMixin(ThemeMixin(HierarchicalViewMixin(LitEle
 	}
 
 	_onKeyPress(e) {
-		if (this._items.indexOf(e.composedPath()[0]) === -1) return;
+		const currentItem = e.composedPath()[0];
+		if (this._items.indexOf(currentItem) === -1) return;
 
 		if (e.keyCode === keyCodes.DOWN || e.keyCode === keyCodes.UP
 			|| e.keyCode === keyCodes.SPACE || e.keyCode === keyCodes.ENTER
@@ -314,6 +326,8 @@ class Menu extends PropertyRequiredMixin(ThemeMixin(HierarchicalViewMixin(LitEle
 
 		e.stopPropagation();
 
+		currentItem.setAttribute('tabindex', '-1');
+
 		const startsWith = function(item, value) {
 			if (item.text && item.text.length > 0 && item.text.toLowerCase().substr(0, 1) === value) {
 				return true;
@@ -361,6 +375,10 @@ class Menu extends PropertyRequiredMixin(ThemeMixin(HierarchicalViewMixin(LitEle
 		this.focus();
 	}
 
+	_onShowStart() {
+		this.active = this.isActive();
+	}
+
 	_onViewResize(e) {
 		if (!this.rootView) return;
 
@@ -372,10 +390,6 @@ class Menu extends PropertyRequiredMixin(ThemeMixin(HierarchicalViewMixin(LitEle
 		this.dispatchEvent(new CustomEvent('d2l-menu-resize', eventDetails));
 	}
 
-	_onVisibilityChange() {
-		this.active = this.isActive();
-	}
-
 	_tryGetNextFocusable(item) {
 		const focusableItems = this._items.filter(this._isFocusable, this);
 		if (!focusableItems || focusableItems.length === 0) {

package/package.json

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