@brightspace-ui/core 2.180.7 → 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/components/tooltip/tooltip.js

@@ -582,18 +582,17 @@ class Tooltip extends RtlMixin(LitElement) {
 		this._openDir = space.dir;
 
 		// Compute the x and y position of the tooltip relative to its target
-		let parentTop;
-		let parentLeft;
+		let offsetTop, offsetLeft;
 		if (offsetParent && offsetParent.tagName !== 'BODY') {
-			const parentRect = offsetParent.getBoundingClientRect();
-			parentTop = parentRect.top + offsetParent.clientTop;
-			parentLeft = parentRect.left + offsetParent.clientLeft;
+			const offsetRect = offsetParent.getBoundingClientRect();
+			offsetTop = offsetRect.top + offsetParent.clientTop - offsetParent.scrollTop;
+			offsetLeft = offsetRect.left + offsetParent.clientLeft - offsetParent.scrollLeft;
 		} else {
-			parentTop = -document.documentElement.scrollTop;
-			parentLeft = -document.documentElement.scrollLeft;
+			offsetTop = -document.documentElement.scrollTop;
+			offsetLeft = -document.documentElement.scrollLeft;
 		}
-		const top = targetRect.top - parentTop;
-		const left = targetRect.left - parentLeft;
+		const top = targetRect.top - offsetTop;
+		const left = targetRect.left - offsetLeft;
 
 		let positionRect;
 		if (this._isAboveOrBelow()) {
@@ -699,18 +698,18 @@ class Tooltip extends RtlMixin(LitElement) {
 		});
 
 		if (this.boundary && offsetParent) {
-			const parentRect = offsetParent.getBoundingClientRect();
+			const offsetRect = offsetParent.getBoundingClientRect();
 			if (!isNaN(this.boundary.left)) {
-				spaceAround.left = Math.min(targetRect.left - parentRect.left - this.boundary.left, spaceAround.left);
+				spaceAround.left = Math.min(targetRect.left - offsetRect.left - this.boundary.left, spaceAround.left);
 			}
 			if (!isNaN(this.boundary.right)) {
-				spaceAround.right = Math.min(parentRect.right - targetRect.right - this.boundary.right, spaceAround.right);
+				spaceAround.right = Math.min(offsetRect.right - targetRect.right - this.boundary.right, spaceAround.right);
 			}
 			if (!isNaN(this.boundary.top)) {
-				spaceAround.above = Math.min(targetRect.top - parentRect.top - this.boundary.top, spaceAround.above);
+				spaceAround.above = Math.min(targetRect.top - offsetRect.top - this.boundary.top, spaceAround.above);
 			}
 			if (!isNaN(this.boundary.bottom)) {
-				spaceAround.below = Math.min(parentRect.bottom - targetRect.bottom - this.boundary.bottom, spaceAround.below);
+				spaceAround.below = Math.min(offsetRect.bottom - targetRect.bottom - this.boundary.bottom, spaceAround.below);
 			}
 		}
 		const isRTL = this.getAttribute('dir') === 'rtl';
@@ -729,8 +728,9 @@ class Tooltip extends RtlMixin(LitElement) {
 		if (this.for) {
 			const targetSelector = `#${cssEscape(this.for)}`;
 			target = ownerRoot.querySelector(targetSelector);
-			target = target || (ownerRoot && ownerRoot.host && ownerRoot.host.querySelector(targetSelector));
+			target = target || ownerRoot?.host?.querySelector(targetSelector);
 		} else {
+			console.warn('<d2l-tooltip>: missing required attribute "for"');
 			const parentNode = this.parentNode;
 			target = parentNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE ? ownerRoot.host : parentNode;
 		}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "2.180.7",
+  "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",