@brightspace-ui/core 3.159.4 → 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/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.4",
+  "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",