@brightspace-ui/core 2.180.8 → 2.180.9

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

@@ -172,8 +172,8 @@ export const TagListItemMixin = superclass => class extends LocalizeCoreElement(
 			}
 
 			await this.updateComplete;
-
-			container.focus();
+			// delay the focus to allow focusin to fire
+			setTimeout(() => container.focus());
 		});
 
 		this.addEventListener('keydown', this._handleKeydown);

package/components/tag-list/tag-list.js

@@ -1,10 +1,10 @@
 import '../button/button-subtle.js';
 import { css, html, LitElement } from 'lit';
+import { getOffsetParent, isComposedAncestor } from '../../helpers/dom.js';
 import { announce } from '../../helpers/announce.js';
 import { ArrowKeysMixin } from '../../mixins/arrow-keys/arrow-keys-mixin.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { getComposedActiveElement } from '../../helpers/focus.js';
-import { getOffsetParent } from '../../helpers/dom.js';
 import { InteractiveMixin } from '../../mixins/interactive/interactive-mixin.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
@@ -109,6 +109,7 @@ class TagList extends LocalizeCoreElement(InteractiveMixin(ArrowKeysMixin(LitEle
 		this._listContainerObserver = null;
 		this._resizeObserver = null;
 		this._showHiddenTags = false;
+		this._refocus = null;
 	}
 
 	disconnectedCallback() {
@@ -197,7 +198,7 @@ class TagList extends LocalizeCoreElement(InteractiveMixin(ArrowKeysMixin(LitEle
 				aria-roledescription="${this.localize('components.tag-list.role-description')}"
 				@d2l-tag-list-item-clear="${this._handleItemDeleted}"
 				@d2l-tag-list-item-tooltip-show="${this._handleKeyboardTooltipShown}">
-				<slot @slotchange="${this._handleSlotChange}"></slot>
+				<slot @slotchange="${this._handleSlotChange}" @focusout="${this._handleSlotFocusOut}" @focusin="${this._handleSlotFocusIn}"></slot>
 				${overflowButton}
 				<d2l-button-subtle
 					class="${classMap(clearableClasses)}"
@@ -219,9 +220,10 @@ class TagList extends LocalizeCoreElement(InteractiveMixin(ArrowKeysMixin(LitEle
 					<d2l-button-subtle aria-hidden="true" slim text="${this.localize('components.tag-list.num-hidden', { count: '##' })}" class="d2l-tag-list-hidden-button"></d2l-button-subtle>
 					${this.arrowKeysContainer(list)}
 				</div>
-			`, this.localize('components.tag-list.interactive-label', { count: this._items ? this._items.length : 0 }),
+			`,
+			this.localize('components.tag-list.interactive-label', { count: this._items ? this._items.length : 0 }),
 			() => {
-				if (this._items && this._items.length > 0) this._items[0].focus();
+				this._items?.[0]?.focus?.();
 			}
 		);
 	}
@@ -350,9 +352,11 @@ class TagList extends LocalizeCoreElement(InteractiveMixin(ArrowKeysMixin(LitEle
 		const itemIndex = children.indexOf(rootTarget);
 
 		if (children.length <= 1) return;
-		const focusableElem = children[itemIndex - 1] || children[itemIndex + 1];
 
-		setTimeout(() => focusableElem.focus(), this.clearFocusTimeout);
+		setTimeout(() => {
+			const focusableElem = children[itemIndex - 1] || (children[itemIndex] === e.target ? children[itemIndex + 1] : children[itemIndex]);
+			focusableElem.focus();
+		}, this.clearFocusTimeout);
 	}
 
 	_handleKeyboardTooltipShown() {
@@ -406,7 +410,22 @@ class TagList extends LocalizeCoreElement(InteractiveMixin(ArrowKeysMixin(LitEle
 		this._items[0].setAttribute('keyboard-tooltip-item', true);
 		if (this._hasShownKeyboardTooltip) this._items[0].setAttribute('keyboard-tooltip-shown', true);
 		await this.updateComplete;
-		refocus.focus?.();
+		if (this._refocus?.classList.contains('d2l-tag-list-button')) {
+			this._refocus = this.shadowRoot.querySelector('.d2l-tag-list-button');
+		}
+		await this._refocus?.updateComplete;
+		(this._refocus || refocus).focus?.();
+		this._refocus = null;
+	}
+
+	_handleSlotFocusIn() {
+		this._items[0].setAttribute('tabindex', '-1');
+	}
+
+	_handleSlotFocusOut(e) {
+		if (!isComposedAncestor(e.currentTarget, e.relatedTarget)) {
+			this._items[0].setAttribute('tabindex', '0');
+		}
 	}
 
 	async _toggleHiddenTagVisibility(e) {
@@ -417,10 +436,11 @@ class TagList extends LocalizeCoreElement(InteractiveMixin(ArrowKeysMixin(LitEle
 		const isMoreButton = e.target.classList.contains('d2l-tag-list-button-show-more');
 		await this.updateComplete;
 		if (isMoreButton) {
-			this._items[this._chompIndex].focus();
+			this._refocus = this._items[this._chompIndex];
 		} else {
-			this.shadowRoot.querySelector('.d2l-tag-list-button')?.focus();
+			this._refocus = this.shadowRoot.querySelector('.d2l-tag-list-button');
 		}
+		this._refocus.focus();
 	}
 }
 

package/package.json

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