@brightspace-ui/core 2.181.0 → 2.182.1

package/components/switch/README.md

@@ -22,6 +22,7 @@ A switch is used to toggle between two states, on and off, just like a light swi
 
 <!-- docs: start donts -->
 * Don't toggle the language in the label, it should remain static
+  * The [Visibility Switch](#d2l-switch-visibility) is a necessary exception to this rule
 * Don't use a switch in a form, use a checkbox or radio options in stead
 <!-- docs: end donts -->
 <!-- docs: end best practices -->

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

@@ -18,6 +18,25 @@ const keyCodes = {
 	ENTER: 13,
 	SPACE: 32
 };
+let hasDisplayedKeyboardTooltip = false;
+let tabPressed = false;
+let tabListenerAdded = false;
+function addTabListener() {
+	if (tabListenerAdded) return;
+	tabListenerAdded = true;
+	document.addEventListener('keydown', e => {
+		if (e.keyCode !== 9) return;
+		tabPressed = true;
+	});
+	document.addEventListener('keyup', e => {
+		if (e.keyCode !== 9) return;
+		tabPressed = false;
+	});
+}
+
+export function resetHasDisplayedKeyboardTooltip() {
+	hasDisplayedKeyboardTooltip = false;
+}
 
 export const TagListItemMixin = superclass => class extends LocalizeCoreElement(PropertyRequiredMixin(RtlMixin(superclass))) {
 
@@ -37,10 +56,6 @@ export const TagListItemMixin = superclass => class extends LocalizeCoreElement(
 			 * @ignore
 			 */
 			keyboardTooltipItem: { type: Boolean, attribute: 'keyboard-tooltip-item' },
-			/**
-			 * @ignore
-			 */
-			keyboardTooltipShown: { type: Boolean, attribute: 'keyboard-tooltip-shown' },
 			/**
 			 * @ignore
 			 */
@@ -49,7 +64,8 @@ export const TagListItemMixin = superclass => class extends LocalizeCoreElement(
 				required: {
 					message: (_value, elem) => `TagListItemMixin: "${elem.tagName.toLowerCase()}" called "_renderTag()" with empty "plainText" option`
 				}
-			}
+			},
+			_displayKeyboardTooltip: { state: true }
 		};
 	}
 
@@ -143,11 +159,16 @@ export const TagListItemMixin = superclass => class extends LocalizeCoreElement(
 		this.clearable = false;
 		/** @ignore */
 		this.keyboardTooltipItem = false;
-		this.keyboardTooltipShown = false;
+		this._displayKeyboardTooltip = false;
 		this._id = getUniqueId();
 		this._plainText = '';
 	}
 
+	connectedCallback() {
+		super.connectedCallback();
+		addTabListener();
+	}
+
 	firstUpdated(changedProperties) {
 		super.firstUpdated(changedProperties);
 
@@ -157,7 +178,7 @@ export const TagListItemMixin = superclass => class extends LocalizeCoreElement(
 			// ignore focus events coming from inside the tag content
 			if (e.composedPath()[0] !== this) return;
 			const tagList = findComposedAncestor(this, elem => elem.tagName === 'D2L-TAG-LIST');
-			if (this.keyboardTooltipItem && this.keyboardTooltipShown && !isComposedAncestor(tagList, e.relatedTarget)) {
+			if (this.keyboardTooltipItem && hasDisplayedKeyboardTooltip && !isComposedAncestor(tagList, e.relatedTarget)) {
 				const arrows = this.localize('components.tag-list-item.tooltip-arrow-keys');
 				const arrowsDescription = this.localize('components.tag-list-item.tooltip-arrow-keys-desc');
 
@@ -173,7 +194,10 @@ export const TagListItemMixin = superclass => class extends LocalizeCoreElement(
 
 			await this.updateComplete;
 			// delay the focus to allow focusin to fire
-			setTimeout(() => container.focus());
+			setTimeout(() => {
+				this._onFocusIn();
+				container.focus();
+			});
 		});
 
 		this.addEventListener('keydown', this._handleKeydown);
@@ -192,27 +216,22 @@ export const TagListItemMixin = superclass => class extends LocalizeCoreElement(
 	}
 
 	_handleKeyboardTooltipHide() {
-		this.keyboardTooltipShown = true;
-	}
-
-	_handleKeyboardTooltipShow() {
-		/** @ignore */
-		this.dispatchEvent(new CustomEvent(
-			'd2l-tag-list-item-tooltip-show',
-			{ bubbles: true, composed: true }
-		));
+		this._displayKeyboardTooltip = false;
 	}
 
 	_handleKeydown(e) {
-		const openKeys = e.keyCode === keyCodes.SPACE || e.keyCode === keyCodes.ENTER;
-		if (this.keyboardTooltipItem && !this.keyboardTooltipShown && openKeys) this.keyboardTooltipShown = true;
-
 		const clearKeys = e.keyCode === keyCodes.BACKSPACE || e.keyCode === keyCodes.DELETE;
 		if (!this.clearable || !clearKeys) return;
 		e.preventDefault();
 		this._handleClearItem();
 	}
 
+	_onFocusIn() {
+		if (!tabPressed || hasDisplayedKeyboardTooltip || !this.keyboardTooltipItem) return;
+		this._displayKeyboardTooltip = true;
+		hasDisplayedKeyboardTooltip = true;
+	}
+
 	_renderKeyboardTooltipContent() {
 		return html`
 			<div class="d2l-tag-list-item-tooltip-title-key">${this.localize('components.tag-list-item.tooltip-title')}</div>
@@ -233,13 +252,12 @@ export const TagListItemMixin = superclass => class extends LocalizeCoreElement(
 		const hasDescription = !!options.description;
 
 		let tooltip = nothing;
-		if (this.keyboardTooltipItem && !this.keyboardTooltipShown) {
+		if (this._displayKeyboardTooltip) {
 			tooltip = html`
 				<d2l-tooltip
 					class="vdiff-target"
 					align="start"
 					@d2l-tooltip-hide="${this._handleKeyboardTooltipHide}"
-					@d2l-tooltip-show="${this._handleKeyboardTooltipShow}"
 					for="${this._id}">
 						${this._renderKeyboardTooltipContent()}
 				</d2l-tooltip>`;

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

@@ -104,7 +104,6 @@ class TagList extends LocalizeCoreElement(InteractiveMixin(ArrowKeysMixin(LitEle
 		this._clearButtonWidth = 0;
 		this._contentReady = false;
 		this._hasResized = false;
-		this._hasShownKeyboardTooltip = false;
 		this._itemHeight = 0;
 		this._listContainerObserver = null;
 		this._resizeObserver = null;
@@ -196,8 +195,7 @@ class TagList extends LocalizeCoreElement(InteractiveMixin(ArrowKeysMixin(LitEle
 				class="${classMap(containerClasses)}"
 				role="group"
 				aria-roledescription="${this.localize('components.tag-list.role-description')}"
-				@d2l-tag-list-item-clear="${this._handleItemDeleted}"
-				@d2l-tag-list-item-tooltip-show="${this._handleKeyboardTooltipShown}">
+				@d2l-tag-list-item-clear="${this._handleItemDeleted}">
 				<slot @slotchange="${this._handleSlotChange}" @focusout="${this._handleSlotFocusOut}" @focusin="${this._handleSlotFocusIn}"></slot>
 				${overflowButton}
 				<d2l-button-subtle
@@ -359,10 +357,6 @@ class TagList extends LocalizeCoreElement(InteractiveMixin(ArrowKeysMixin(LitEle
 		}, this.clearFocusTimeout);
 	}
 
-	_handleKeyboardTooltipShown() {
-		if (!this._hasShownKeyboardTooltip) this._hasShownKeyboardTooltip = true;
-	}
-
 	async _handleResize() {
 		const refocus = getComposedActiveElement();
 		this._contentReady = false;
@@ -408,7 +402,6 @@ class TagList extends LocalizeCoreElement(InteractiveMixin(ArrowKeysMixin(LitEle
 
 		this._contentReady = true;
 		this._items[0].setAttribute('keyboard-tooltip-item', true);
-		if (this._hasShownKeyboardTooltip) this._items[0].setAttribute('keyboard-tooltip-shown', true);
 		await this.updateComplete;
 		if (this._refocus?.classList.contains('d2l-tag-list-button')) {
 			this._refocus = this.shadowRoot.querySelector('.d2l-tag-list-button');

package/custom-elements.json

@@ -12538,11 +12538,6 @@
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "keyboardTooltipShown",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "documentLocaleSettings",
           "default": "\"getDocumentLocaleSettings()\""
@@ -12659,11 +12654,6 @@
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "keyboardTooltipShown",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "documentLocaleSettings",
           "default": "\"getDocumentLocaleSettings()\""

package/package.json

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