@brightspace-ui/core 2.182.0 → 2.183.0

package/components/empty-state/README.md

@@ -32,10 +32,10 @@ Empty state components are used to convey that there is no data available to be
 
 <!-- docs: start best practices -->
 <!-- docs: start dos -->
-* Do make it clear that there is no data available to be displayed
-* Do include guidance on next steps if available, either as short instructions or as a Call to Action
-* Do use a link for navigation and a button for actions
-* Do replace the entire content with its empty state for accessibility
+* Use clear language to indicate there is no data available
+* Offer concise guidance about next steps
+* Include an [Empty State Action](#d2l-empty-state-action-button) or [Link](#d2l-empty-state-action-link) if it can help the user
+* Replace the entire content with its empty state; do not show an empty table or list header
 <!-- docs: end dos -->
 
 <!-- docs: start donts -->
@@ -84,7 +84,9 @@ The `illustration-name` property can be set to use one of the preset illustratio
 
 ## Empty State Action Button [d2l-empty-state-action-button]
 
-`d2l-empty-state-action-button` is an empty state action component that can be placed inside of the default slot of `empty-state-simple` or `empty-state-illustrated` to add a button action to the component. Only a single action can be placed within an empty state component.
+Use a `d2l-empty-state-action-button` to add a button that provides users with an easy next step, assuming the next step is to perform an action. If the next step is to navigate to another page, consider using an [Empty State Action Link](#d2l-empty-state-action-link) instead.
+
+To add the button, place a `d2l-empty-state-action-button` component inside of the default slot of `empty-state-simple` or `empty-state-illustrated`. Only a single action can be placed within an empty state component.
 
 The `primary` attribute can be set to render a primary button in place of the default subtle button. Note that the `primary` attribute is only valid when placed within `empty-state-illustrated` components and will have no effect on `empty-state-simple`.
 
@@ -117,7 +119,9 @@ The `primary` attribute can be set to render a primary button in place of the de
 
 ## Empty State Action Link [d2l-empty-state-action-link]
 
-`d2l-empty-state-action-link` is an empty state action component that can be placed inside of the default slot of `empty-state-simple` or `empty-state-illustrated` to add a link action to the component. Only a single action can be placed within an empty state component.
+Use a `d2l-empty-state-action-link` to add a link that provides users with an easy next step, provided the next step is to navigate to another page. If the next step is actually an action, use an [Empty State Action Button](#d2l-empty-state-action-button) instead.
+
+To add the link, place a `d2l-empty-state-action-link` component inside of the default slot of `empty-state-simple` or `empty-state-illustrated`. Only a single action can be placed within an empty state component.
 
 <!-- docs: demo code properties name:d2l-empty-state-action-link -->
 ```html

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/lang/ar.js

@@ -7,7 +7,7 @@ export default {
 	"components.calendar.show": "إظهار {month}",
 	"components.count-badge.plus": "{number}+",
 	"components.dialog.close": "إغلاق مربع الحوار هذا",
-	"components.dialog.critical": "Critical!",
+	"components.dialog.critical": "مهم!",
 	"components.dropdown.close": "إغلاق",
 	"components.filter.activeFilters": "عوامل تصفية نشطة:",
 	"components.filter.clear": "مسح",

package/lang/cy.js

@@ -7,7 +7,7 @@ export default {
 	"components.calendar.show": "Dangos {month}",
 	"components.count-badge.plus": "{number}+",
 	"components.dialog.close": "Cau'r dialog hwn",
-	"components.dialog.critical": "Critical!",
+	"components.dialog.critical": "Critigol!",
 	"components.dropdown.close": "Cau",
 	"components.filter.activeFilters": "Dim Hidlwyr Gweithredol:",
 	"components.filter.clear": "Clirio",

package/lang/da.js

@@ -7,7 +7,7 @@ export default {
 	"components.calendar.show": "Vis {month}",
 	"components.count-badge.plus": "{number}+",
 	"components.dialog.close": "Luk denne dialogboks",
-	"components.dialog.critical": "Critical!",
+	"components.dialog.critical": "Kritisk!",
 	"components.dropdown.close": "Luk",
 	"components.filter.activeFilters": "Aktive filtre:",
 	"components.filter.clear": "Ryd",

package/lang/de.js

@@ -7,7 +7,7 @@ export default {
 	"components.calendar.show": "{month} anzeigen",
 	"components.count-badge.plus": "{number}+",
 	"components.dialog.close": "Dieses Dialogfeld schließen",
-	"components.dialog.critical": "Critical!",
+	"components.dialog.critical": "Kritisch!",
 	"components.dropdown.close": "Schließen",
 	"components.filter.activeFilters": "Aktive Filter:",
 	"components.filter.clear": "Löschen",

package/lang/es-es.js

@@ -7,7 +7,7 @@ export default {
 	"components.calendar.show": "Mostrar {month}",
 	"components.count-badge.plus": "{number}+",
 	"components.dialog.close": "Cerrar este cuadro de diálogo",
-	"components.dialog.critical": "Critical!",
+	"components.dialog.critical": "¡Crítico!",
 	"components.dropdown.close": "Cerrar",
 	"components.filter.activeFilters": "Filtros activos:",
 	"components.filter.clear": "Borrar",

package/lang/es.js

@@ -7,7 +7,7 @@ export default {
 	"components.calendar.show": "Mostrar {month}",
 	"components.count-badge.plus": "{number}+",
 	"components.dialog.close": "Cerrar este cuadro de diálogo",
-	"components.dialog.critical": "Critical!",
+	"components.dialog.critical": "¡Crucial!",
 	"components.dropdown.close": "Cerrar",
 	"components.filter.activeFilters": "Filtros activos:",
 	"components.filter.clear": "Borrar",

package/lang/fr-fr.js

@@ -7,7 +7,7 @@ export default {
 	"components.calendar.show": "Afficher {month}",
 	"components.count-badge.plus": "{number}+",
 	"components.dialog.close": "Fermer cette boîte de dialogue",
-	"components.dialog.critical": "Critical!",
+	"components.dialog.critical": "Critique !",
 	"components.dropdown.close": "Fermer",
 	"components.filter.activeFilters": "Filtres actifs :",
 	"components.filter.clear": "Effacer",

package/lang/fr.js

@@ -7,7 +7,7 @@ export default {
 	"components.calendar.show": "Afficher {month}",
 	"components.count-badge.plus": "{number}+",
 	"components.dialog.close": "Fermer cette boîte de dialogue",
-	"components.dialog.critical": "Critical!",
+	"components.dialog.critical": "Essentiel!",
 	"components.dropdown.close": "Fermer",
 	"components.filter.activeFilters": "Filtres actifs :",
 	"components.filter.clear": "Effacer",

package/lang/hi.js

@@ -7,7 +7,7 @@ export default {
 	"components.calendar.show": "{month} दिखाएँ",
 	"components.count-badge.plus": "{number}+",
 	"components.dialog.close": "यह संवाद बंद करें",
-	"components.dialog.critical": "Critical!",
+	"components.dialog.critical": "महत्वपूर्ण!",
 	"components.dropdown.close": "बंद करें",
 	"components.filter.activeFilters": "सक्रिय फ़िल्टर्स:",
 	"components.filter.clear": "साफ़ करें",

package/lang/ja.js

@@ -7,7 +7,7 @@ export default {
 	"components.calendar.show": "{month} を表示",
 	"components.count-badge.plus": "{number}+",
 	"components.dialog.close": "このダイアログを閉じる",
-	"components.dialog.critical": "Critical!",
+	"components.dialog.critical": "重大です！",
 	"components.dropdown.close": "閉じる",
 	"components.filter.activeFilters": "アクティブフィルタ:",
 	"components.filter.clear": "クリア",

package/lang/ko.js

@@ -7,7 +7,7 @@ export default {
 	"components.calendar.show": "{month} 표시",
 	"components.count-badge.plus": "{number}+",
 	"components.dialog.close": "이 대화 상자 닫기",
-	"components.dialog.critical": "Critical!",
+	"components.dialog.critical": "중요!",
 	"components.dropdown.close": "닫기",
 	"components.filter.activeFilters": "활성 필터:",
 	"components.filter.clear": "지우기",

package/lang/nl.js

@@ -7,7 +7,7 @@ export default {
 	"components.calendar.show": "{month} weergeven",
 	"components.count-badge.plus": "{number}+",
 	"components.dialog.close": "Dit dialoogvenster sluiten",
-	"components.dialog.critical": "Critical!",
+	"components.dialog.critical": "Kritiek!",
 	"components.dropdown.close": "Sluiten",
 	"components.filter.activeFilters": "Actieve filters:",
 	"components.filter.clear": "Wissen",

package/lang/pt.js

@@ -7,7 +7,7 @@ export default {
 	"components.calendar.show": "Mostrar {month}",
 	"components.count-badge.plus": "{number}+",
 	"components.dialog.close": "Fechar esta caixa de diálogo",
-	"components.dialog.critical": "Critical!",
+	"components.dialog.critical": "Crítico!",
 	"components.dropdown.close": "Fechar",
 	"components.filter.activeFilters": "Filtros ativos:",
 	"components.filter.clear": "Limpar",

package/lang/sv.js

@@ -7,7 +7,7 @@ export default {
 	"components.calendar.show": "Visa {month}",
 	"components.count-badge.plus": "{number}+",
 	"components.dialog.close": "Stäng dialogrutan",
-	"components.dialog.critical": "Critical!",
+	"components.dialog.critical": "Viktigt!",
 	"components.dropdown.close": "Stäng",
 	"components.filter.activeFilters": "Aktiva filter:",
 	"components.filter.clear": "Rensa",

package/lang/tr.js

@@ -7,7 +7,7 @@ export default {
 	"components.calendar.show": "{month} Göster",
 	"components.count-badge.plus": "{number}+",
 	"components.dialog.close": "Bu iletişim kutusunu kapat",
-	"components.dialog.critical": "Critical!",
+	"components.dialog.critical": "Kritik!",
 	"components.dropdown.close": "Kapat",
 	"components.filter.activeFilters": "Etkin Filtreler:",
 	"components.filter.clear": "Temizle",

package/lang/zh-cn.js

@@ -7,7 +7,7 @@ export default {
 	"components.calendar.show": "显示 {month}",
 	"components.count-badge.plus": "{number}+",
 	"components.dialog.close": "关闭此对话框",
-	"components.dialog.critical": "Critical!",
+	"components.dialog.critical": "严重问题！",
 	"components.dropdown.close": "关闭",
 	"components.filter.activeFilters": "活动筛选器：",
 	"components.filter.clear": "清除",

package/lang/zh-tw.js

@@ -7,7 +7,7 @@ export default {
 	"components.calendar.show": "顯示{month}",
 	"components.count-badge.plus": "{number}+",
 	"components.dialog.close": "關閉此對話方塊",
-	"components.dialog.critical": "Critical!",
+	"components.dialog.critical": "重大！",
 	"components.dropdown.close": "關閉",
 	"components.filter.activeFilters": "啟用中的篩選器：",
 	"components.filter.clear": "清除",

package/package.json

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