@brightspace-ui/core 2.14.2 → 2.14.5

package/components/html-block/html-block.js

@@ -203,6 +203,8 @@ class HtmlBlock extends RtlMixin(LitElement) {
 		super.firstUpdated(changedProperties);
 
 		if (this._renderContainer) return;
+
+		// The d2l-html-block-rendered class is used to apply CSS outside of the html-block component. Do not change lightly.
 		this.shadowRoot.innerHTML += '<div class="d2l-html-block-rendered'
 			+ `${this.compact ? ' d2l-html-block-compact' : ''}`
 			+ '"></div><slot'

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

@@ -73,7 +73,7 @@
 
 			<h2>Tag List with Interactive</h2>
 			<d2l-demo-snippet fullscreen>
-				<div role="grid">
+				<div grid>
 					<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>

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

@@ -49,7 +49,7 @@ class TagList extends LocalizeCoreElement(InteractiveMixin(ArrowKeysMixin(LitEle
 	}
 
 	static get styles() {
-		return [super.styles, css`
+		return [...super.styles, css`
 			:host {
 				display: block;
 			}

package/lang/ar.js

@@ -101,8 +101,8 @@ export default {
 	"components.tag-list.cleared-all": "Removed all tag list items",
 	"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.show-less": "Show Less",
+	"components.tag-list.num-hidden": "زيادة {count} إضافي",
+	"components.tag-list.show-less": "إظهار أقل",
 	"components.tag-list.show-more-description": "Select to show hidden tag list items",
 	"templates.primary-secondary.adjustableSplitView": "تقسيم العرض القابل للضبط",
 	"templates.primary-secondary.keyboardHorizontal": "السهم المتّجه إلى اليسار أو إلى اليمين لضبط حجم لوحات العرض",

package/lang/cy.js

@@ -101,8 +101,8 @@ export default {
 	"components.tag-list.cleared-all": "Removed all tag list items",
 	"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.show-less": "Show Less",
+	"components.tag-list.num-hidden": "+ {count} yn rhagor",
+	"components.tag-list.show-less": "Dangos Llai",
 	"components.tag-list.show-more-description": "Select to show hidden tag list items",
 	"templates.primary-secondary.adjustableSplitView": "Gwedd Hollt Addasadwy",
 	"templates.primary-secondary.keyboardHorizontal": "Saeth i'r chwith neu'r dde i addasu maint y paneli gweld",

package/lang/da.js

@@ -101,8 +101,8 @@ export default {
 	"components.tag-list.cleared-all": "Removed all tag list items",
 	"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.show-less": "Show Less",
+	"components.tag-list.num-hidden": "+ {count} mere",
+	"components.tag-list.show-less": "Vis færre",
 	"components.tag-list.show-more-description": "Select to show hidden tag list items",
 	"templates.primary-secondary.adjustableSplitView": "Justerbar delt visning",
 	"templates.primary-secondary.keyboardHorizontal": "Pil til venstre eller højre for at justere størrelsen på visningspaneler",

package/lang/de.js

@@ -101,8 +101,8 @@ export default {
 	"components.tag-list.cleared-all": "Removed all tag list items",
 	"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.show-less": "Show Less",
+	"components.tag-list.num-hidden": "+ {count} weitere",
+	"components.tag-list.show-less": "Weniger anzeigen",
 	"components.tag-list.show-more-description": "Select to show hidden tag list items",
 	"templates.primary-secondary.adjustableSplitView": "Anpassbare geteilte Ansicht",
 	"templates.primary-secondary.keyboardHorizontal": "Pfeil nach links oder rechts, um die Größe der Ansichtsbereiche anzupassen",

package/lang/es-es.js

@@ -101,8 +101,8 @@ export default {
 	"components.tag-list.cleared-all": "Removed all tag list items",
 	"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.show-less": "Show Less",
+	"components.tag-list.num-hidden": "+ {count} más",
+	"components.tag-list.show-less": "Mostrar menos",
 	"components.tag-list.show-more-description": "Select to show hidden tag list items",
 	"templates.primary-secondary.adjustableSplitView": "Vista dividida ajustable",
 	"templates.primary-secondary.keyboardHorizontal": "Flecha hacia la izquierda o la derecha para ajustar el tamaño de los paneles de visualización",

package/lang/es.js

@@ -97,12 +97,12 @@ export default {
 	"components.tabs.next": "Desplazarse hacia adelante",
 	"components.tabs.previous": "Desplazarse hacia atrás",
 	"components.tag-list.clear": "Click to remove item {value}",
+	"components.tag-list.clear-all": "Clear All",
 	"components.tag-list.cleared-all": "Removed all tag list items",
 	"components.tag-list.cleared-item": "Removed tag list item {value}",
-	"components.tag-list.clear-all": "Clear All",
 	"components.tag-list.interactive-label": "Tag List, {count} items",
-	"components.tag-list.num-hidden": "+ {count} more",
-	"components.tag-list.show-less": "Show Less",
+	"components.tag-list.num-hidden": "+ {count} más",
+	"components.tag-list.show-less": "Mostrar menos",
 	"components.tag-list.show-more-description": "Select to show hidden tag list items",
 	"templates.primary-secondary.adjustableSplitView": "Pantalla dividida ajustable",
 	"templates.primary-secondary.keyboardHorizontal": "Utilice la flecha izquierda o derecha para ajustar el tamaño de los paneles de visualización",

package/lang/fr-fr.js

@@ -101,8 +101,8 @@ export default {
 	"components.tag-list.cleared-all": "Removed all tag list items",
 	"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.show-less": "Show Less",
+	"components.tag-list.num-hidden": "{count} de plus",
+	"components.tag-list.show-less": "Afficher moins",
 	"components.tag-list.show-more-description": "Select to show hidden tag list items",
 	"templates.primary-secondary.adjustableSplitView": "Vue fractionnée réglable",
 	"templates.primary-secondary.keyboardHorizontal": "Flèche vers la gauche ou vers la droite pour régler la taille des panneaux d’affichage",

package/lang/fr.js

@@ -101,8 +101,8 @@ export default {
 	"components.tag-list.cleared-all": "Removed all tag list items",
 	"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.show-less": "Show Less",
+	"components.tag-list.num-hidden": "+ {count} de plus",
+	"components.tag-list.show-less": "Afficher moins",
 	"components.tag-list.show-more-description": "Select to show hidden tag list items",
 	"templates.primary-secondary.adjustableSplitView": "Vue partagée réglable",
 	"templates.primary-secondary.keyboardHorizontal": "Utiliser la flèche vers la gauche ou vers la droite pour régler la taille des volets d'affichage",

package/lang/hi.js

@@ -101,8 +101,8 @@ export default {
 	"components.tag-list.cleared-all": "Removed all tag list items",
 	"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.show-less": "Show Less",
+	"components.tag-list.num-hidden": "+ {count} और",
+	"components.tag-list.show-less": "कम दिखाएँ",
 	"components.tag-list.show-more-description": "Select to show hidden tag list items",
 	"templates.primary-secondary.adjustableSplitView": "समायोजन योग्य विभाजन दृश्य",
 	"templates.primary-secondary.keyboardHorizontal": "दृश्य पैनल्स का आकार समायोजित करने के लिए तीर बाएँ या दाएँ करें",

package/lang/ja.js

@@ -101,8 +101,8 @@ export default {
 	"components.tag-list.cleared-all": "Removed all tag list items",
 	"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.show-less": "Show Less",
+	"components.tag-list.num-hidden": "+ {count} 件追加",
+	"components.tag-list.show-less": "少なく表示",
 	"components.tag-list.show-more-description": "Select to show hidden tag list items",
 	"templates.primary-secondary.adjustableSplitView": "調整可能な分割ビュー",
 	"templates.primary-secondary.keyboardHorizontal": "左矢印または右矢印を使用して、ビューパネルのサイズを調整します",

package/lang/ko.js

@@ -101,8 +101,8 @@ export default {
 	"components.tag-list.cleared-all": "Removed all tag list items",
 	"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.show-less": "Show Less",
+	"components.tag-list.num-hidden": "{count}개 더",
+	"components.tag-list.show-less": "간단히 표시",
 	"components.tag-list.show-more-description": "Select to show hidden tag list items",
 	"templates.primary-secondary.adjustableSplitView": "조정 가능한 분할 보기",
 	"templates.primary-secondary.keyboardHorizontal": "왼쪽 또는 오른쪽 화살표로 보기 패널의 크기 조정",

package/lang/nl.js

@@ -101,8 +101,8 @@ export default {
 	"components.tag-list.cleared-all": "Removed all tag list items",
 	"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.show-less": "Show Less",
+	"components.tag-list.num-hidden": "+ {count} extra",
+	"components.tag-list.show-less": "Minder weergeven",
 	"components.tag-list.show-more-description": "Select to show hidden tag list items",
 	"templates.primary-secondary.adjustableSplitView": "Instelbare gesplitste weergave",
 	"templates.primary-secondary.keyboardHorizontal": "Pijl naar links of rechts om de grootte van de weergavevensters aan te passen",

package/lang/pt.js

@@ -101,8 +101,8 @@ export default {
 	"components.tag-list.cleared-all": "Removed all tag list items",
 	"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.show-less": "Show Less",
+	"components.tag-list.num-hidden": "+ {count} mais",
+	"components.tag-list.show-less": "Mostrar menos",
 	"components.tag-list.show-more-description": "Select to show hidden tag list items",
 	"templates.primary-secondary.adjustableSplitView": "Exibição dividida ajustável",
 	"templates.primary-secondary.keyboardHorizontal": "Use a seta para a esquerda ou para a direita para ajustar o tamanho dos painéis de exibição",

package/lang/sv.js

@@ -101,8 +101,8 @@ export default {
 	"components.tag-list.cleared-all": "Removed all tag list items",
 	"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.show-less": "Show Less",
+	"components.tag-list.num-hidden": "+ {count} till",
+	"components.tag-list.show-less": "Visa färre",
 	"components.tag-list.show-more-description": "Select to show hidden tag list items",
 	"templates.primary-secondary.adjustableSplitView": "Justerbar delad vy",
 	"templates.primary-secondary.keyboardHorizontal": "Pil vänster eller höger för att justera storleken på vypaneler",

package/lang/tr.js

@@ -101,8 +101,8 @@ export default {
 	"components.tag-list.cleared-all": "Removed all tag list items",
 	"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.show-less": "Show Less",
+	"components.tag-list.num-hidden": "+{count} tane daha",
+	"components.tag-list.show-less": "Daha Azını Göster",
 	"components.tag-list.show-more-description": "Select to show hidden tag list items",
 	"templates.primary-secondary.adjustableSplitView": "Ayarlanabilir Bölünmüş Görüntü",
 	"templates.primary-secondary.keyboardHorizontal": "Görüntü panellerinin boyutunu ayarlamak için sol veya sağ okları kullanın",

package/lang/zh-cn.js

@@ -101,8 +101,8 @@ export default {
 	"components.tag-list.cleared-all": "Removed all tag list items",
 	"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.show-less": "Show Less",
+	"components.tag-list.num-hidden": "+ {count} 个",
+	"components.tag-list.show-less": "显示更少",
 	"components.tag-list.show-more-description": "Select to show hidden tag list items",
 	"templates.primary-secondary.adjustableSplitView": "可调分屏视图",
 	"templates.primary-secondary.keyboardHorizontal": "向左或向右箭头可调整视图面板的大小",

package/lang/zh-tw.js

@@ -101,8 +101,8 @@ export default {
 	"components.tag-list.cleared-all": "Removed all tag list items",
 	"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.show-less": "Show Less",
+	"components.tag-list.num-hidden": "還有 {count} 個",
+	"components.tag-list.show-less": "顯示更少",
 	"components.tag-list.show-more-description": "Select to show hidden tag list items",
 	"templates.primary-secondary.adjustableSplitView": "可調整的分割檢視",
 	"templates.primary-secondary.keyboardHorizontal": "向左或向右箭頭可調整檢視面板的大小",

package/mixins/interactive-mixin.js

@@ -1,8 +1,10 @@
 import { css, html } from 'lit';
 import { findComposedAncestor, isComposedAncestor } from '../helpers/dom.js';
-import { forceFocusVisible, getNextFocusable } from '../helpers/focus.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { getNextFocusable } from '../helpers/focus.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../helpers/localize-core-element.js';
+import { offscreenStyles } from '../components/offscreen/offscreen.js';
 
 const keyCodes = {
 	ENTER: 13,
@@ -13,24 +15,25 @@ export const InteractiveMixin = superclass => class extends LocalizeCoreElement(
 
 	static get properties() {
 		return {
+			_focusingToggle: { state: true },
 			_hasInteractiveAncestor: { state: true },
 			_interactive: { state: true }
 		};
 	}
 
 	static get styles() {
-		return css`
-			.interactive-container.focus-visible,
-			.interactive-container:focus-visible {
+		return [offscreenStyles, css`
+			.interactive-focusing-toggle {
 				border-radius: 6px;
 				outline: 2px solid var(--d2l-color-celestine);
 				outline-offset: 2px;
 			}
-		`;
+		`];
 	}
 
 	constructor() {
 		super();
+		this._focusingToggle = false;
 		this._hasInteractiveAncestor = false;
 		this._interactive = false;
 	}
@@ -39,14 +42,14 @@ export const InteractiveMixin = superclass => class extends LocalizeCoreElement(
 		super.connectedCallback();
 
 		const parentGrid = findComposedAncestor(this.parentNode, node => {
-			return ((node.tagName === 'D2L-LIST' && node.grid) || (node.nodeType === Node.ELEMENT_NODE && node.getAttribute('role') === 'grid'));
+			return (node.nodeType === Node.ELEMENT_NODE && (node.hasAttribute('grid') || node.getAttribute('role') === 'grid'));
 		});
 		this._hasInteractiveAncestor = (parentGrid !== null);
 	}
 
 	focus() {
 		if (!this.shadowRoot) return;
-		if (this._hasInteractiveAncestor && !this._interactive) forceFocusVisible(this.shadowRoot.querySelector('.interactive-container'));
+		if (this._hasInteractiveAncestor && !this._interactive) this.shadowRoot.querySelector('.interactive-toggle').focus();
 		else this._focusDelegate();
 	}
 
@@ -57,18 +60,27 @@ export const InteractiveMixin = superclass => class extends LocalizeCoreElement(
 		if (!focusDelegate) {
 			throw new Error(`InteractiveMixin: no focus delegate provided for "${this.tagName}"`);
 		}
+
 		this._focusDelegate = focusDelegate;
 		if (!this._hasInteractiveAncestor) return inner;
+
+		const classes = {
+			'interactive-focusing-toggle': this._focusingToggle
+		};
+
 		return html`
-			<div class="interactive-container"
-				aria-label="${label}"
-				aria-description="${this.localize('components.interactive.instructions')}"
-				@keydown="${this._handleInteractiveKeyDown}"
-				role="button"
-				tabindex="${ifDefined(this._hasInteractiveAncestor && !this._interactive ? '0' : undefined)}">
-					<span class="interactive-trap-start" @focus="${this._handleInteractiveStartFocus}" tabindex="${ifDefined(this._hasInteractiveAncestor ? '0' : undefined)}"></span>
+			<div class="${classMap(classes)}" @keydown="${this._handleInteractiveKeyDown}">
+					<button
+						class="interactive-toggle d2l-offscreen"
+						@blur="${this._handleInteractiveToggleBlur}"
+						@click="${this._handleInteractiveToggleClick}"
+						@focus="${this._handleInteractiveToggleFocus}"
+						tabindex="${ifDefined(this._hasInteractiveAncestor && !this._interactive ? '0' : '-1')}">
+						${`${label}, ${this.localize('components.interactive.instructions')}`}
+					</button>
+					<span class="interactive-trap-start" @focus="${this._handleInteractiveTrapStartFocus}" tabindex="${ifDefined(this._hasInteractiveAncestor ? '0' : undefined)}"></span>
 					<div class="interactive-container-content" @focusin="${this._handleInteractiveContentFocusIn}" @focusout="${this._handleInteractiveContentFocusOut}">${inner}</div>
-					<span class="interactive-trap-end" @focus="${this._handleInteractiveEndFocus}" tabindex="${ifDefined(this._hasInteractiveAncestor ? '0' : undefined)}"></span>
+					<span class="interactive-trap-end" @focus="${this._handleInteractiveTrapEndFocus}" tabindex="${ifDefined(this._hasInteractiveAncestor ? '0' : undefined)}"></span>
 			</div>
 		`;
 	}
@@ -83,27 +95,37 @@ export const InteractiveMixin = superclass => class extends LocalizeCoreElement(
 		this._interactive = false;
 	}
 
-	async _handleInteractiveEndFocus() {
-		// focus moved to trap-end either forwards from contents or backwards from outside - focus interactive toggle
-		this._interactive = false;
-		await this.updateComplete;
-		this.shadowRoot.querySelector('.interactive-container').focus();
-	}
-
 	async _handleInteractiveKeyDown(e) {
-		if (!this._interactive && e.keyCode === keyCodes.ENTER) {
-			this._interactive = true;
-			await this.updateComplete;
-			this.focus();
-		} else if (this._interactive && e.keyCode === keyCodes.ESCAPE) {
+		if (this._interactive && e.keyCode === keyCodes.ESCAPE) {
 			this._interactive = false;
 			await this.updateComplete;
-			this.shadowRoot.querySelector('.interactive-container').focus();
+			this.shadowRoot.querySelector('.interactive-toggle').focus();
 		}
 	}
 
-	async _handleInteractiveStartFocus(e) {
-		if (e.relatedTarget === this.shadowRoot.querySelector('.interactive-container')) {
+	_handleInteractiveToggleBlur() {
+		this._focusingToggle = false;
+	}
+
+	async _handleInteractiveToggleClick() {
+		this._interactive = true;
+		await this.updateComplete;
+		this.focus();
+	}
+
+	_handleInteractiveToggleFocus() {
+		this._focusingToggle = true;
+	}
+
+	async _handleInteractiveTrapEndFocus() {
+		// focus moved to trap-end either forwards from contents or backwards from outside - focus interactive toggle
+		this._interactive = false;
+		await this.updateComplete;
+		this.shadowRoot.querySelector('.interactive-toggle').focus();
+	}
+
+	async _handleInteractiveTrapStartFocus(e) {
+		if (e.relatedTarget === this.shadowRoot.querySelector('.interactive-toggle')) {
 			// focus moved to trap-start while non-interactive - focus next focusable after this component
 			const nextFocusable = getNextFocusable(this.shadowRoot.querySelector('.interactive-trap-end'));
 			if (nextFocusable) nextFocusable.focus();
@@ -111,7 +133,7 @@ export const InteractiveMixin = superclass => class extends LocalizeCoreElement(
 			// focus moved to trap-start backwards from within contents - toggle to non-interactive and apply focus
 			this._interactive = false;
 			await this.updateComplete;
-			this.shadowRoot.querySelector('.interactive-container').focus();
+			this.shadowRoot.querySelector('.interactive-toggle').focus();
 		}
 	}
 

package/package.json

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