@brightspace-ui/core 2.50.1 → 2.50.2

package/components/dropdown/dropdown.js

@@ -22,9 +22,15 @@ class Dropdown extends DropdownOpenerMixin(LitElement) {
 	 */
 	getOpenerElement() {
 		if (!this.shadowRoot) return undefined;
-		return this.shadowRoot.querySelector('slot')
-			.assignedNodes({ flatten: true })
-			.filter(node => node.classList && node.classList.contains('d2l-dropdown-opener'))[0];
+
+		const nodes = this.shadowRoot.querySelector('slot').assignedNodes({ flatten: true });
+		for (let i = 0; i < nodes.length; i++) {
+			if (nodes[i].nodeType !== Node.ELEMENT_NODE) continue;
+			if (nodes[i].classList.contains('d2l-dropdown-opener')) return nodes[i];
+			if (nodes[i]._dropdownContent) continue;
+			const nestedOpener = nodes[i].querySelector('.d2l-dropdown-opener');
+			if (nestedOpener) return nestedOpener;
+		}
 	}
 
 }

package/components/tag-list/README.md

@@ -38,7 +38,7 @@ The corresponding `*-clear` event must be listened to for whatever component (`d
 
   document.addEventListener('d2l-tag-list-item-clear', (e) => {
     e.target.parentNode.removeChild(e.target);
-    console.log(`d2l-tag-list-item-clear event dispatched. Value: ${e.detail.value}, handleFocus: ${e.detail.handleFocus}`);
+    console.log(`d2l-tag-list-item-clear event dispatched. Value: ${e.detail.value}`);
   });
 
   document.addEventListener('d2l-tag-list-clear', (e) => {

package/components/tag-list/demo/tag-list.html

@@ -42,31 +42,47 @@
 			</script>
 			<d2l-demo-snippet fullscreen>
 				<d2l-tag-list description="A bunch of example tags">
-					<d2l-tag-list-item text="Example Tag"></d2l-tag-list-item>
-					<d2l-tag-list-item text="Longer Example Tag - much much much much much much much much longer"></d2l-tag-list-item>
-					<d2l-tag-list-item text="Another Example Tag"></d2l-tag-list-item>
+					<d2l-tag-list-item text="Example 1"></d2l-tag-list-item>
+					<d2l-tag-list-item text="Example 2 - much much much much much much much much longer"></d2l-tag-list-item>
+					<d2l-tag-list-item text="Example 3"></d2l-tag-list-item>
 					<d2l-tag-list-item-mixin-consumer name="Custom Tag List Item"></d2l-tag-list-item-mixin-consumer>
-					<d2l-tag-list-item text="Example Tag 5"></d2l-tag-list-item>
-					<d2l-tag-list-item text="Example Tag 6"></d2l-tag-list-item>
-					<d2l-tag-list-item text="Example Tag 7"></d2l-tag-list-item>
+					<d2l-tag-list-item text="Example 5"></d2l-tag-list-item>
+					<d2l-tag-list-item text="Example 6" description="this is a description"></d2l-tag-list-item>
+					<d2l-tag-list-item text="Example 7"></d2l-tag-list-item>
+					<d2l-tag-list-item text="Example 8"></d2l-tag-list-item>
+					<d2l-tag-list-item text="Example 9"></d2l-tag-list-item>
 				</d2l-tag-list>
 			</d2l-demo-snippet>
 
 			<h2>Clearable Tag List</h2>
 			<d2l-demo-snippet fullscreen>
 				<d2l-tag-list description="A bunch of example tags" clearable>
-					<d2l-tag-list-item text="Example Tag"></d2l-tag-list-item>
-					<d2l-tag-list-item text="Longer Example Tag - much much much much much longer"></d2l-tag-list-item>
-					<d2l-tag-list-item text="Another Example Tag"></d2l-tag-list-item>
+					<d2l-tag-list-item text="Example 1"></d2l-tag-list-item>
+					<d2l-tag-list-item text="Example 2 - much much much much much much much much longer"></d2l-tag-list-item>
+					<d2l-tag-list-item text="Example 3"></d2l-tag-list-item>
 					<d2l-tag-list-item-mixin-consumer name="Custom Tag List Item"></d2l-tag-list-item-mixin-consumer>
-					<d2l-tag-list-item text="Example Tag 5"></d2l-tag-list-item>
-					<d2l-tag-list-item text="Example Tag 6"></d2l-tag-list-item>
-					<d2l-tag-list-item text="Example Tag 7"></d2l-tag-list-item>
+					<d2l-tag-list-item text="Example 5"></d2l-tag-list-item>
+					<d2l-tag-list-item text="Example 6" description="this is a description"></d2l-tag-list-item>
+					<d2l-tag-list-item text="Example 7"></d2l-tag-list-item>
+					<d2l-tag-list-item text="Example 8"></d2l-tag-list-item>
+					<d2l-tag-list-item text="Example 9"></d2l-tag-list-item>
 				</d2l-tag-list>
-				<script>
+				<script type="module">
+					import { forceFocusVisible, getNextFocusable } from '../../../helpers/focus.js';
+
 					document.addEventListener('d2l-tag-list-item-clear', (e) => {
 						e.target.parentNode.removeChild(e.target);
-						console.log(`d2l-tag-list-item-clear event dispatched. Value: ${e.detail.value}, handleFocus: ${e.detail.handleFocus}`);
+						console.log(`d2l-tag-list-item-clear event dispatched. Value: ${e.detail.value}`);
+					});
+
+					document.addEventListener('d2l-tag-list-clear', (e) => {
+						console.log('d2l-tag-list-clear event dispatched.', e.target);
+						const nextFocusable = getNextFocusable(e.target, true, true, true);
+						[...e.target.children].forEach(tag => {
+							e.target.removeChild(tag);
+						});
+						// consumer must move focus someplace logical
+						forceFocusVisible(nextFocusable);
 					});
 				</script>
 			</d2l-demo-snippet>

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

@@ -5,8 +5,8 @@ import { css, html, nothing } from 'lit';
 import { heading4Styles, labelStyles } from '../typography/styles.js';
 import { announce } from '../../helpers/announce.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { findComposedAncestor } from '../../helpers/dom.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { RtlMixin } from '../../mixins/rtl-mixin.js';
 
@@ -30,11 +30,7 @@ export const TagListItemMixin = superclass => class extends LocalizeCoreElement(
 			 * @ignore
 			 */
 			keyboardTooltipItem: { type: Boolean, attribute: 'keyboard-tooltip-item' },
-			/**
-			 * @ignore
-			 */
-			role: { type: String, reflect: true },
-			_displayKeyboardTooltip: { type: Boolean }
+			_displayKeyboardTooltip: { state: true }
 		};
 	}
 
@@ -76,12 +72,12 @@ export const TagListItemMixin = superclass => class extends LocalizeCoreElement(
 				padding: 0.25rem 0.6rem;
 				text-overflow: ellipsis;
 			}
-			:host(:focus-visible) .tag-list-item-container,
-			:host(:focus-visible:hover) .tag-list-item-container {
+			:host(:focus-within) .tag-list-item-container,
+			:host(:focus-within:hover) .tag-list-item-container {
 				box-shadow: inset 0 0 0 2px var(--d2l-color-celestine), 0 2px 4px rgba(0, 0, 0, 0.03);
 			}
 			:host(:hover) .tag-list-item-container,
-			:host(:focus-visible) .tag-list-item-container {
+			:host(:focus-within) .tag-list-item-container {
 				background-color: var(--d2l-color-sylvite);
 			}
 			:host(:hover) .tag-list-item-container {
@@ -131,52 +127,55 @@ export const TagListItemMixin = superclass => class extends LocalizeCoreElement(
 		this.clearable = false;
 		/** @ignore */
 		this.keyboardTooltipItem = false;
-		/** @ignore */
-		this.role = 'listitem';
 		this._displayKeyboardTooltip = false;
 		this._id = getUniqueId();
-		this._tooltipShown = false;
+		this._keyboardTooltipShown = false;
 	}
 
 	firstUpdated(changedProperties) {
 		super.firstUpdated(changedProperties);
 
 		const container = this.shadowRoot.querySelector('.tag-list-item-content');
+
 		this.addEventListener('focus', async(e) => {
 			// ignore focus events coming from inside the tag content
 			if (e.composedPath()[0] !== this) return;
 
-			this._displayKeyboardTooltip = (this.keyboardTooltipItem && !this._tooltipShown);
+			this._displayKeyboardTooltip = (this.keyboardTooltipItem && !this._keyboardTooltipShown);
 			await this.updateComplete;
 
-			/** @ignore */
-			container.dispatchEvent(new FocusEvent('focus', { bubbles: false, cancelable: true }));
+			container.focus();
 		});
+
 		this.addEventListener('blur', () => {
 			this._displayKeyboardTooltip = false;
-			/** @ignore */
-			container.dispatchEvent(new FocusEvent('blur', { bubbles: false, cancelable: true }));
 		});
+
 		this.addEventListener('keydown', this._handleKeydown);
 	}
 
-	handleClearItem(e, clearAll) {
+	_handleClearItem() {
 		if (!this.clearable) return;
 
-		let handleFocus = false;
-		if (e) {
-			const listItemParent = findComposedAncestor(e.composedPath()[0], (node) => node.role === 'listitem');
-			handleFocus = listItemParent ? true : false;
-		}
-
-		if (clearAll) return;
-
 		announce(this.localize('components.tag-list.cleared-item', { value: this.text }));
 
 		/** Dispatched when a user selects to delete an individual tag list item. The consumer must handle the actual element deletion and focus behaviour if there are no remaining list items. */
 		this.dispatchEvent(new CustomEvent(
 			'd2l-tag-list-item-clear',
-			{ bubbles: true, composed: true, detail: { value: this.text, handleFocus } }
+			{ bubbles: true, composed: true, detail: { value: this.text } }
+		));
+	}
+
+	_handleKeyboardTooltipHide() {
+		if (this._keyboardTooltipShown) this._displayKeyboardTooltip = false;
+	}
+
+	_handleKeyboardTooltipShow() {
+		this._keyboardTooltipShown = true;
+		/** @ignore */
+		this.dispatchEvent(new CustomEvent(
+			'd2l-tag-list-item-tooltip-show',
+			{ bubbles: true, composed: true }
 		));
 	}
 
@@ -187,55 +186,72 @@ export const TagListItemMixin = superclass => class extends LocalizeCoreElement(
 		const clearKeys = e.keyCode === keyCodes.BACKSPACE || e.keyCode === keyCodes.DELETE;
 		if (!this.clearable || !clearKeys) return;
 		e.preventDefault();
-		this.handleClearItem(e);
+		this._handleClearItem();
 	}
 
-	_handleTooltipHide() {
-		if (this._tooltipShown) this._displayKeyboardTooltip = false;
+	_renderKeyboardTooltipContent() {
+		return html`
+			<div class="d2l-tag-list-item-tooltip-title-key">${this.localize('components.tag-list-item.tooltip-title')}</div>
+			<ul>
+				<li><span class="d2l-tag-list-item-tooltip-title-key">${this.localize('components.tag-list-item.tooltip-arrow-keys')}</span> - ${this.localize('components.tag-list-item.tooltip-arrow-keys-desc')}</li>
+				<li><span class="d2l-tag-list-item-tooltip-title-key">${this.localize('components.tag-list-item.tooltip-delete-key')}</span> - ${this.localize('components.tag-list-item.tooltip-delete-key-desc')}</li>
+			</ul>
+		`;
 	}
 
-	_handleTooltipShow() {
-		this._tooltipShown = true;
-		/** @ignore */
-		this.dispatchEvent(new CustomEvent(
-			'd2l-tag-list-item-tooltip-show',
-			{ bubbles: true, composed: true }
-		));
-	}
+	_renderTag(tagContent, options) {
+		if (!options) options = {};
 
-	_renderTag(tagContent, hasTruncationTooltip, description) {
 		const buttonText = typeof tagContent === 'object'
 			? this.localize('components.tag-list.clear', { value: '' })
 			: this.localize('components.tag-list.clear', { value: tagContent });
-		const hasDescription = !!description;
-		const tooltipHeader = hasDescription ? html`<div class="d2l-heading-4">${tagContent}</div>` : tagContent;
-		const tooltipTagOverflow = hasTruncationTooltip ? html`
+
+		const hasDescription = !!options.description;
+
+		let tooltip = nothing;
+		if (this._displayKeyboardTooltip) {
+			tooltip = html`
+				<d2l-tooltip
+					align="start"
+					@d2l-tooltip-hide="${this._handleKeyboardTooltipHide}"
+					@d2l-tooltip-show="${this._handleKeyboardTooltipShow}"
+					for="${this._id}">
+						${this._renderKeyboardTooltipContent()}
+				</d2l-tooltip>`;
+		} else if (options.hasTruncationTooltip || hasDescription) {
+			const tooltipHeader = hasDescription ? html`<div class="d2l-heading-4">${tagContent}</div>` : tagContent;
+			tooltip = html`
 				<d2l-tooltip for="${this._id}" ?show-truncated-only="${!hasDescription}">
 					${tooltipHeader}
-					${hasDescription ? description : nothing}
-				</d2l-tooltip>
-			` : null;
-		const tooltipKeyboardInstructions = this._displayKeyboardTooltip ? html`
-			<d2l-tooltip
-				align="start"
-				@d2l-tooltip-hide="${this._handleTooltipHide}"
-				@d2l-tooltip-show="${this._handleTooltipShow}"
-				for="${this._id}">
-					${this._renderTooltipContent()}
-			</d2l-tooltip>` : null;
+					${hasDescription ? options.description : nothing}
+				</d2l-tooltip>`;
+		}
+
 		const containerClasses = {
 			'd2l-label-text': true,
 			'tag-list-item-container': true,
 			'tag-list-item-container-clearable': this.clearable
 		};
+		const focusableClasses = {
+			'tag-list-item-content': true
+		};
+		if (options.focusableClass) focusableClasses[options.focusableClass] = true;
+
 		return html`
-			${tooltipKeyboardInstructions || tooltipTagOverflow}
+			${tooltip}
 			<div class="${classMap(containerClasses)}">
-				<div class="tag-list-item-content" id="${this._id}" tabindex="-1">${tagContent}</div>
+				<div aria-label="${ifDefined(options.label)}"
+					aria-roledescription="${this.localize('components.tag-list-item.role-description')}"
+					class="${classMap(focusableClasses)}"
+					id="${this._id}"
+					role="button"
+					tabindex="-1">
+					${tagContent}
+				</div>
 				${this.clearable ? html`
 					<d2l-button-icon
 						class="d2l-tag-list-item-clear-button"
-						@click="${this.handleClearItem}"
+						@click="${this._handleClearItem}"
 						icon="tier1:close-small"
 						tabindex="-1"
 						text="${buttonText}">
@@ -244,14 +260,4 @@ export const TagListItemMixin = superclass => class extends LocalizeCoreElement(
 		`;
 	}
 
-	_renderTooltipContent() {
-		return html`
-			<div class="d2l-tag-list-item-tooltip-title-key">${this.localize('components.tag-list-item.tooltip-title')}</div>
-			<ul>
-				<li><span class="d2l-tag-list-item-tooltip-title-key">${this.localize('components.tag-list-item.tooltip-arrow-keys')}</span> - ${this.localize('components.tag-list-item.tooltip-arrow-keys-desc')}</li>
-				<li><span class="d2l-tag-list-item-tooltip-title-key">${this.localize('components.tag-list-item.tooltip-delete-key')}</span> - ${this.localize('components.tag-list-item.tooltip-delete-key-desc')}</li>
-			</ul>
-		`;
-	}
-
 };

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

@@ -20,7 +20,10 @@ class TagListItem extends TagListItemMixin(LitElement) {
 	}
 
 	render() {
-		return this._renderTag(this.text, true, this.description);
+		return this._renderTag(this.text, {
+			description: this.description,
+			hasTruncationTooltip: true
+		});
 	}
 }
 

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

@@ -2,7 +2,6 @@ import '../button/button-subtle.js';
 import { css, html, LitElement } from 'lit';
 import { announce } from '../../helpers/announce.js';
 import { ArrowKeysMixin } from '../../mixins/arrow-keys-mixin.js';
-import { BACKDROP_ROLE } from '../backdrop/backdrop.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { getOffsetParent } from '../../helpers/dom.js';
 import { InteractiveMixin } from '../../mixins/interactive-mixin.js';
@@ -193,18 +192,17 @@ class TagList extends LocalizeCoreElement(InteractiveMixin(ArrowKeysMixin(LitEle
 			<div
 				aria-label="${this.description}"
 				class="${classMap(containerClasses)}"
-				role="list"
+				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-tooltip-show="${this._handleKeyboardTooltipShown}">
 				<slot @slotchange="${this._handleSlotChange}"></slot>
 				${overflowButton}
 				<d2l-button-subtle
 					class="${classMap(clearableClasses)}"
 					@click="${this._handleClearAll}"
 					slim
-					text="${this.localize('components.tag-list.clear-all')}"
-				>
+					text="${this.localize('components.tag-list.clear-all')}">
 				</d2l-button-subtle>
 			</div>
 		`;
@@ -313,10 +311,6 @@ class TagList extends LocalizeCoreElement(InteractiveMixin(ArrowKeysMixin(LitEle
 			if (node.nodeType !== Node.ELEMENT_NODE) return false;
 			await node.updateComplete;
 
-			const role = node.getAttribute('role');
-			const backdropRole = node.getAttribute(BACKDROP_ROLE);
-			if (role !== 'listitem' && backdropRole !== 'listitem') return false;
-
 			if (this.clearable) node.setAttribute('clearable', 'clearable');
 			node.removeAttribute('data-is-chomped');
 			node.removeAttribute('keyboard-tooltip-item');
@@ -337,7 +331,7 @@ class TagList extends LocalizeCoreElement(InteractiveMixin(ArrowKeysMixin(LitEle
 		return items.concat(showMoreButton).concat(clearButton);
 	}
 
-	_handleClearAll(e) {
+	_handleClearAll() {
 		if (!this._items) return;
 
 		/** Dispatched when a user selects to delete all tag list items. The consumer must handle the actual element deletion and focus behaviour. */
@@ -347,15 +341,9 @@ class TagList extends LocalizeCoreElement(InteractiveMixin(ArrowKeysMixin(LitEle
 		));
 
 		announce(this.localize('components.tag-list.cleared-all'));
-
-		this._items.forEach((item) => {
-			item.handleClearItem(e, true);
-		});
 	}
 
 	_handleItemDeleted(e) {
-		if (!e || !e.detail || !e.detail.handleFocus) return;
-
 		const rootTarget = e.composedPath()[0];
 		const children = this._getVisibleEffectiveChildren();
 		const itemIndex = children.indexOf(rootTarget);

package/lang/ar.js

@@ -110,8 +110,10 @@ export default {
 	"components.tag-list.cleared-item": "تمت إزالة عنصر قائمة العلامات {value}",
 	"components.tag-list.interactive-label": "قائمة العلامات، {count} من العناصر",
 	"components.tag-list.num-hidden": "زيادة {count} إضافي",
+	"components.tag-list.role-description": "Tag List",
 	"components.tag-list.show-less": "إظهار أقل",
 	"components.tag-list.show-more-description": "حدد لإظهار عناصر قائمة العلامات المخفية",
+	"components.tag-list-item.role-description": "Tag",
 	"components.tag-list-item.tooltip-arrow-keys": "مفاتيح الأسهم",
 	"components.tag-list-item.tooltip-arrow-keys-desc": "التنقل بين العلامات",
 	"components.tag-list-item.tooltip-delete-key": "مسافة للخلف/حذف",

package/lang/cy.js

@@ -110,8 +110,10 @@ export default {
 	"components.tag-list.cleared-item": "Wedi tynnu’r eitem rhestr tag {value}",
 	"components.tag-list.interactive-label": "Rhestr Tag, {count} o eitemau",
 	"components.tag-list.num-hidden": "+ {count} yn rhagor",
+	"components.tag-list.role-description": "Tag List",
 	"components.tag-list.show-less": "Dangos Llai",
 	"components.tag-list.show-more-description": "Dewis i ddangos eitemau rhestr tag cudd",
+	"components.tag-list-item.role-description": "Tag",
 	"components.tag-list-item.tooltip-arrow-keys": "Byselli Saeth",
 	"components.tag-list-item.tooltip-arrow-keys-desc": "Symud rhwng tagiau",
 	"components.tag-list-item.tooltip-delete-key": "Yn ôl/Dileu",

package/lang/da.js

@@ -110,8 +110,10 @@ export default {
 	"components.tag-list.cleared-item": "Fjernede taglisteelement {value}",
 	"components.tag-list.interactive-label": "Tagliste, {count} elementer",
 	"components.tag-list.num-hidden": "+ {count} mere",
+	"components.tag-list.role-description": "Tag List",
 	"components.tag-list.show-less": "Vis færre",
 	"components.tag-list.show-more-description": "Vælg for at få vist skjulte taglisteelementer",
+	"components.tag-list-item.role-description": "Tag",
 	"components.tag-list-item.tooltip-arrow-keys": "Piletaster",
 	"components.tag-list-item.tooltip-arrow-keys-desc": "Flyt mellem tags",
 	"components.tag-list-item.tooltip-delete-key": "Tilbage/Slet",

package/lang/de.js

@@ -110,8 +110,10 @@ export default {
 	"components.tag-list.cleared-item": "Element {value} der Tag-Liste wurde entfernt",
 	"components.tag-list.interactive-label": "Tag-Liste, {count} Elemente",
 	"components.tag-list.num-hidden": "+ {count} weitere",
+	"components.tag-list.role-description": "Tag List",
 	"components.tag-list.show-less": "Weniger anzeigen",
 	"components.tag-list.show-more-description": "Wählen Sie diese Option, um ausgeblendete Elemente der Tag-Liste anzuzeigen",
+	"components.tag-list-item.role-description": "Tag",
 	"components.tag-list-item.tooltip-arrow-keys": "Pfeiltasten",
 	"components.tag-list-item.tooltip-arrow-keys-desc": "Zwischen Tags wechseln",
 	"components.tag-list-item.tooltip-delete-key": "Rücktaste/Entfernen",

package/lang/en.js

@@ -110,8 +110,10 @@ export default {
 	"components.tag-list.cleared-item": "Removed tag list item {value}",
 	"components.tag-list.interactive-label": "Tag List, {count} items",
 	"components.tag-list.num-hidden": "+ {count} more",
+	"components.tag-list.role-description": "Tag List",
 	"components.tag-list.show-less": "Show Less",
 	"components.tag-list.show-more-description": "Select to show hidden tag list items",
+	"components.tag-list-item.role-description": "Tag",
 	"components.tag-list-item.tooltip-arrow-keys": "Arrow Keys",
 	"components.tag-list-item.tooltip-arrow-keys-desc": "Move between tags",
 	"components.tag-list-item.tooltip-delete-key": "Backspace/Delete",

package/lang/es-es.js

@@ -110,8 +110,10 @@ export default {
 	"components.tag-list.cleared-item": "Se ha eliminado el elemento {value} de la lista de etiquetas",
 	"components.tag-list.interactive-label": "Lista de etiquetas, {count} elementos",
 	"components.tag-list.num-hidden": "+ {count} más",
+	"components.tag-list.role-description": "Tag List",
 	"components.tag-list.show-less": "Mostrar menos",
 	"components.tag-list.show-more-description": "Seleccione esta opción para mostrar los elementos ocultos de la lista de etiquetas",
+	"components.tag-list-item.role-description": "Tag",
 	"components.tag-list-item.tooltip-arrow-keys": "Teclas de flecha",
 	"components.tag-list-item.tooltip-arrow-keys-desc": "Desplazamiento entre etiquetas",
 	"components.tag-list-item.tooltip-delete-key": "Retroceso/Eliminar",

package/lang/es.js

@@ -110,8 +110,10 @@ export default {
 	"components.tag-list.cleared-item": "Se eliminó el elemento {value} de la lista de etiquetas",
 	"components.tag-list.interactive-label": "Lista de etiquetas, {count} elementos",
 	"components.tag-list.num-hidden": "+ {count} más",
+	"components.tag-list.role-description": "Tag List",
 	"components.tag-list.show-less": "Mostrar menos",
 	"components.tag-list.show-more-description": "Seleccione para mostrar los elementos ocultos de la lista de etiquetas",
+	"components.tag-list-item.role-description": "Tag",
 	"components.tag-list-item.tooltip-arrow-keys": "Teclas de flecha",
 	"components.tag-list-item.tooltip-arrow-keys-desc": "Mover entre etiquetas",
 	"components.tag-list-item.tooltip-delete-key": "Retroceso/Suprimir",

package/lang/fr-fr.js

@@ -110,8 +110,10 @@ export default {
 	"components.tag-list.cleared-item": "Suppression de l’élément de liste d’étiquettes {value}",
 	"components.tag-list.interactive-label": "Liste d’étiquettes, {count} éléments",
 	"components.tag-list.num-hidden": "{count} de plus",
+	"components.tag-list.role-description": "Tag List",
 	"components.tag-list.show-less": "Afficher moins",
 	"components.tag-list.show-more-description": "Sélectionnez cette option pour afficher les éléments de la liste d’étiquettes masquées",
+	"components.tag-list-item.role-description": "Tag",
 	"components.tag-list-item.tooltip-arrow-keys": "Touches fléchées",
 	"components.tag-list-item.tooltip-arrow-keys-desc": "Passez d’une étiquette à l’autre",
 	"components.tag-list-item.tooltip-delete-key": "Retour arrière/Supprimer",

package/lang/fr.js

@@ -110,8 +110,10 @@ export default {
 	"components.tag-list.cleared-item": "Élément {value} de la liste des balises supprimé",
 	"components.tag-list.interactive-label": "Liste des balises, {count} éléments",
 	"components.tag-list.num-hidden": "+ {count} de plus",
+	"components.tag-list.role-description": "Tag List",
 	"components.tag-list.show-less": "Afficher moins",
 	"components.tag-list.show-more-description": "Sélectionnez cette option pour afficher les éléments de la liste des balises cachées",
+	"components.tag-list-item.role-description": "Tag",
 	"components.tag-list-item.tooltip-arrow-keys": "Touches fléchées",
 	"components.tag-list-item.tooltip-arrow-keys-desc": "Passer d’une balise à l’autre",
 	"components.tag-list-item.tooltip-delete-key": "Retour arrière/suppression",

package/lang/hi.js

@@ -110,8 +110,10 @@ export default {
 	"components.tag-list.cleared-item": "टैग लिस्ट आइटम {value} हटाए गए",
 	"components.tag-list.interactive-label": "टैग लिस्ट, {count} आइटम",
 	"components.tag-list.num-hidden": "+ {count} और",
+	"components.tag-list.role-description": "Tag List",
 	"components.tag-list.show-less": "कम दिखाएँ",
 	"components.tag-list.show-more-description": "छिपे हुए टैग लिस्ट आइटम दिखाने के लिए चुनें",
+	"components.tag-list-item.role-description": "Tag",
 	"components.tag-list-item.tooltip-arrow-keys": "तीर कुंजियाँ",
 	"components.tag-list-item.tooltip-arrow-keys-desc": "टैग के बीच आना-जाना",
 	"components.tag-list-item.tooltip-delete-key": "बैकस्पेस/हटाएँ",

package/lang/ja.js

@@ -110,8 +110,10 @@ export default {
 	"components.tag-list.cleared-item": "タグリスト項目 {value} を削除しました",
 	"components.tag-list.interactive-label": "タグリスト、{count} 項目",
 	"components.tag-list.num-hidden": "+ {count} 件追加",
+	"components.tag-list.role-description": "Tag List",
 	"components.tag-list.show-less": "少なく表示",
 	"components.tag-list.show-more-description": "選択すると、非表示のタグリスト項目が表示されます",
+	"components.tag-list-item.role-description": "Tag",
 	"components.tag-list-item.tooltip-arrow-keys": "矢印キー",
 	"components.tag-list-item.tooltip-arrow-keys-desc": "タグ間を移動します",
 	"components.tag-list-item.tooltip-delete-key": "Backspace キー／Delete キー",

package/lang/ko.js

@@ -110,8 +110,10 @@ export default {
 	"components.tag-list.cleared-item": "태그 목록 항목 {value}을(를) 제거했습니다",
 	"components.tag-list.interactive-label": "태그 목록, {count}개 항목",
 	"components.tag-list.num-hidden": "{count}개 더",
+	"components.tag-list.role-description": "Tag List",
 	"components.tag-list.show-less": "간단히 표시",
 	"components.tag-list.show-more-description": "숨겨진 태그 목록 항목을 표시하려면 선택합니다",
+	"components.tag-list-item.role-description": "Tag",
 	"components.tag-list-item.tooltip-arrow-keys": "화살표 키",
 	"components.tag-list-item.tooltip-arrow-keys-desc": "태그 간에 이동합니다",
 	"components.tag-list-item.tooltip-delete-key": "백스페이스/삭제",

package/lang/nl.js

@@ -110,8 +110,10 @@ export default {
 	"components.tag-list.cleared-item": "Item {value} op de labellijst is verwijderd",
 	"components.tag-list.interactive-label": "Labellijst, {count} items",
 	"components.tag-list.num-hidden": "+ {count} extra",
+	"components.tag-list.role-description": "Tag List",
 	"components.tag-list.show-less": "Minder weergeven",
 	"components.tag-list.show-more-description": "Selecteer deze optie om verborgen items op labellijsten weer te geven",
+	"components.tag-list-item.role-description": "Tag",
 	"components.tag-list-item.tooltip-arrow-keys": "Pijltoetsen",
 	"components.tag-list-item.tooltip-arrow-keys-desc": "Schakelen tussen tags",
 	"components.tag-list-item.tooltip-delete-key": "Backspace/Verwijderen",

package/lang/pt.js

@@ -110,8 +110,10 @@ export default {
 	"components.tag-list.cleared-item": "Item {value} da lista de marcas removido",
 	"components.tag-list.interactive-label": "Lista de marcas, {count} itens",
 	"components.tag-list.num-hidden": "+ {count} mais",
+	"components.tag-list.role-description": "Tag List",
 	"components.tag-list.show-less": "Mostrar menos",
 	"components.tag-list.show-more-description": "Selecione para mostrar itens ocultos da lista de marcas",
+	"components.tag-list-item.role-description": "Tag",
 	"components.tag-list-item.tooltip-arrow-keys": "Teclas de seta",
 	"components.tag-list-item.tooltip-arrow-keys-desc": "Mover entre marcas",
 	"components.tag-list-item.tooltip-delete-key": "Retroceder/Excluir",

package/lang/sv.js

@@ -110,8 +110,10 @@ export default {
 	"components.tag-list.cleared-item": "Ta bort tagglistobjektet {value}",
 	"components.tag-list.interactive-label": "Tagglista, {count} objekt",
 	"components.tag-list.num-hidden": "+ {count} till",
+	"components.tag-list.role-description": "Tag List",
 	"components.tag-list.show-less": "Visa färre",
 	"components.tag-list.show-more-description": "Välj för att visa dolda tagglistobjekt",
+	"components.tag-list-item.role-description": "Tag",
 	"components.tag-list-item.tooltip-arrow-keys": "Piltangenter",
 	"components.tag-list-item.tooltip-arrow-keys-desc": "Flytta mellan taggar",
 	"components.tag-list-item.tooltip-delete-key": "Backstegstangenten/Delete-tangenten",

package/lang/tr.js

@@ -110,8 +110,10 @@ export default {
 	"components.tag-list.cleared-item": "Kaldırılan etiket listesi öğesi {value}",
 	"components.tag-list.interactive-label": "Etiket Listesi, {count} öğe",
 	"components.tag-list.num-hidden": "+{count} tane daha",
+	"components.tag-list.role-description": "Tag List",
 	"components.tag-list.show-less": "Daha Azını Göster",
 	"components.tag-list.show-more-description": "Gizli etiket listesi öğelerini göstermek için seçin",
+	"components.tag-list-item.role-description": "Tag",
 	"components.tag-list-item.tooltip-arrow-keys": "Ok Tuşları",
 	"components.tag-list-item.tooltip-arrow-keys-desc": "Etiketler arasında gezinme",
 	"components.tag-list-item.tooltip-delete-key": "Geri Al/Sil",

package/lang/zh-cn.js

@@ -110,8 +110,10 @@ export default {
 	"components.tag-list.cleared-item": "已移除标签列表项目 {value}",
 	"components.tag-list.interactive-label": "标签列表，{count} 个项目",
 	"components.tag-list.num-hidden": "+ {count} 个",
+	"components.tag-list.role-description": "Tag List",
 	"components.tag-list.show-less": "显示更少",
 	"components.tag-list.show-more-description": "选择以显示隐藏的标签列表项目",
+	"components.tag-list-item.role-description": "Tag",
 	"components.tag-list-item.tooltip-arrow-keys": "箭头键",
 	"components.tag-list-item.tooltip-arrow-keys-desc": "在标签之间移动",
 	"components.tag-list-item.tooltip-delete-key": "退格键/Delete 键",

package/lang/zh-tw.js

@@ -110,8 +110,10 @@ export default {
 	"components.tag-list.cleared-item": "已移除標記清單項目 {value}",
 	"components.tag-list.interactive-label": "標記清單，{count} 個項目",
 	"components.tag-list.num-hidden": "還有 {count} 個",
+	"components.tag-list.role-description": "Tag List",
 	"components.tag-list.show-less": "顯示更少",
 	"components.tag-list.show-more-description": "選取以顯示隱藏的標記清單項目",
+	"components.tag-list-item.role-description": "Tag",
 	"components.tag-list-item.tooltip-arrow-keys": "方向鍵",
 	"components.tag-list-item.tooltip-arrow-keys-desc": "在標記之間移動",
 	"components.tag-list-item.tooltip-delete-key": "退格/刪除",

package/package.json

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