@brightspace-ui/core 2.13.2 → 2.14.1

package/README.md

@@ -70,6 +70,7 @@ npm install @brightspace-ui/core
   * [FocusMixin](mixins/focus-mixin.md): delegate focus to a nested element when `focus()` is called
   * [FocusVisiblePolyfillMixin](mixins/focus-visible-polyfill-mixin.md): components can use the `:focus-visible` pseudo-class polyfill
   * [FormElementMixin](components/form/docs/form-element-mixin.md): allow components to participate in forms and validation
+  * [InteractiveMixin](mixins/interactive-mixin.md): enables toggling interactive elements inside of nested grids
   * [LabelledMixin](mixins/labelled-mixin.md): label custom elements by referencing elements across DOM scopes
   * [LocalizeMixin](mixins/localize-mixin.md): localize text in your components
   * [ProviderMixin](mixins/provider-mixin.md): provide and consume data across elements in a DI-like fashion

package/components/html-block/demo/html-block.html

@@ -110,6 +110,38 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>HTML Block (large font)</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-html-block>
+						<div style="font-size: 42px;">
+							Just a text node...
+							<h1>heading 1</h1>
+							<h2>heading 2</h2>
+							<h3>heading 3</h3>
+							<h4>heading 4</h4>
+							<h5>heading 5</h5>
+							<h6>heading 6</h6>
+							<div><strong>strong</strong></div>
+							<div><b>bold</b></div>
+							<div>text</div>
+							<pre>preformatted</pre>
+							<p>paragraph</p>
+							<ul>
+								<li>unordered item 1</li>
+								<li>unordered item 2</li>
+							</ul>
+							<ol>
+								<li>ordered item 1</li>
+								<li>ordered item 2</li>
+							</ol>
+							<div><a href="https://d2l.com">anchor</a></div>
+						</div>
+					</d2l-html-block>
+				</template>
+			</d2l-demo-snippet>
+
 			<h2>HTML Block (math)</h2>
 
 			<d2l-demo-snippet>

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

@@ -6,10 +6,8 @@ import { requestInstance } from '../../mixins/provider-mixin.js';
 import { RtlMixin } from '../../mixins/rtl-mixin.js';
 
 export const htmlBlockContentStyles = css`
-	.d2l-html-block-compact {
-		font-size: 0.8rem;
-		font-weight: 400;
-		line-height: 1.2rem;
+	.d2l-html-block-rendered {
+		line-height: 1.47; /* 1.4rem / 0.95rem */
 	}
 	.d2l-html-block-rendered > :first-child {
 		margin-top: 0;
@@ -17,38 +15,43 @@ export const htmlBlockContentStyles = css`
 	.d2l-html-block-rendered > :last-child {
 		margin-bottom: 0;
 	}
+	.d2l-html-block-compact {
+		font-size: 0.8rem;
+		font-weight: 400;
+		line-height: 1.5; /* 1.2rem / 0.8rem */
+	}
 	h1, h2, h3, h4, h5, h6, b, strong, b *, strong * {
 		font-weight: bold;
 	}
 	h1 {
 		font-size: 2em;
-		line-height: 37px;
-		margin: 21.43px 0;
+		line-height: 1;
+		margin: 21px 0;
 	}
 	h2 {
 		font-size: 1.5em;
-		line-height: 27px;
-		margin: 19.92px 0;
+		line-height: 1;
+		margin: 20px 0;
 	}
 	h3 {
 		font-size: 1.2em;
-		line-height: 23px;
-		margin: 18.72px 0;
+		line-height: 1;
+		margin: 19px 0;
 	}
 	h4 {
 		font-size: 1em;
-		line-height: 20px;
-		margin: 21.28px 0;
+		line-height: 1.05;
+		margin: 21px 0;
 	}
 	h5 {
 		font-size: 0.83em;
-		line-height: 16px;
-		margin: 22.13px 0;
+		line-height: 1;
+		margin: 22px 0;
 	}
 	h6 {
 		font-size: 0.67em;
-		line-height: 13px;
-		margin: 24.97px 0;
+		line-height: 1;
+		margin: 25px 0;
 	}
 	pre {
 		font-family: Monospace;

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

@@ -71,6 +71,21 @@
 				</script>
 			</d2l-demo-snippet>
 
+			<h2>Tag List with Interactive</h2>
+			<d2l-demo-snippet fullscreen>
+				<div role="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>
+						<d2l-tag-list-item text="Another Example Tag"></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>
+				</div>
+			</d2l-demo-snippet>
+
 		</d2l-demo-page>
 	</body>
 </html>

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

@@ -3,6 +3,7 @@ import { css, html, LitElement } from 'lit';
 import { announce } from '../../helpers/announce.js';
 import { ArrowKeysMixin } from '../../mixins/arrow-keys-mixin.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { InteractiveMixin } from '../../mixins/interactive-mixin.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
 import { styleMap } from 'lit/directives/style-map.js';
@@ -16,7 +17,7 @@ const PAGE_SIZE_LINES = {
 	medium: 2,
 	small: 3
 };
-const MARGIN_TOP_RIGHT = 6;
+const GAP = 6;
 
 async function filterAsync(arr, callback) {
 	const fail = Symbol();
@@ -27,7 +28,7 @@ async function filterAsync(arr, callback) {
 	return results.filter(i => i !== fail);
 }
 
-class TagList extends LocalizeCoreElement(ArrowKeysMixin(LitElement)) {
+class TagList extends LocalizeCoreElement(InteractiveMixin(ArrowKeysMixin(LitElement))) {
 
 	static get properties() {
 		return {
@@ -48,7 +49,7 @@ class TagList extends LocalizeCoreElement(ArrowKeysMixin(LitElement)) {
 	}
 
 	static get styles() {
-		return css`
+		return [super.styles, css`
 			:host {
 				display: block;
 			}
@@ -79,7 +80,7 @@ class TagList extends LocalizeCoreElement(ArrowKeysMixin(LitElement)) {
 			.tag-list-hidden {
 				visibility: hidden;
 			}
-		`;
+		`];
 	}
 
 	constructor() {
@@ -184,26 +185,28 @@ class TagList extends LocalizeCoreElement(ArrowKeysMixin(LitElement)) {
 		`;
 
 		const outerContainerStyles = {
-			maxHeight: (this._showHiddenTags || !this._lines) ? undefined : `${(this._itemHeight + MARGIN_TOP_RIGHT) * this._lines}px`,
+			maxHeight: (this._showHiddenTags || !this._lines) ? undefined : `${(this._itemHeight + GAP) * this._lines}px`,
 			minHeight: `${Math.max(this._clearButtonHeight, this._itemHeight)}px`
 		};
 
-		return html`
-			<div role="application" class="tag-list-outer-container" style="${styleMap(outerContainerStyles)}">
-				<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>
-		`;
+		return this.renderInteractiveContainer(
+			html`
+				<div role="application" class="tag-list-outer-container" style="${styleMap(outerContainerStyles)}">
+					<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 }),
+			() => {
+				if (this._items && this._items.length > 0) this._items[0].focus();
+			}
+		);
+
 	}
 
 	async arrowKeysFocusablesProvider() {
 		return this._getVisibleEffectiveChildren();
 	}
 
-	focus() {
-		if (this._items && this._items.length > 0) this._items[0].focus();
-	}
-
 	_chomp() {
 		if (!this.shadowRoot || !this._lines || !this._itemLayouts) return;
 
@@ -226,9 +229,9 @@ class TagList extends LocalizeCoreElement(ArrowKeysMixin(LitElement)) {
 
 			for (let i = overflowingIndex; i < this._itemLayouts.length; i++) {
 				const itemLayout = this._itemLayouts[i];
-				const itemWidth = Math.min(itemLayout.width + MARGIN_TOP_RIGHT, this._availableWidth);
+				const itemWidth = Math.min(itemLayout.width + GAP, this._availableWidth);
 
-				if (!isOverflowing && ((showing.width + itemWidth) <= (this._availableWidth + MARGIN_TOP_RIGHT))) {
+				if (!isOverflowing && ((showing.width + itemWidth) <= (this._availableWidth + GAP))) {
 					showing.width += itemWidth;
 					showing.count += 1;
 					itemLayout.trigger = 'soft-show';

package/lang/ar.js

@@ -62,6 +62,7 @@ export default {
 	"components.input-time-range.endTime": "وقت النهاية",
 	"components.input-time-range.errorBadInput": "يجب أن يكون تاريخ {startLabel} قبل {endLabel}",
 	"components.input-time-range.startTime": "وقت البدء",
+	"components.interactive.instructions": "Press Enter to interact, Escape to exit",
 	"components.list-item-drag-handle.default": "إعادة ترتيب إجراء المادة لـ {name}",
 	"components.list-item-drag-handle.keyboard": "إعادة ترتيب المواد، الموضع الحالي {currentPosition} من أصل {size}. لنقل هذه المادة، اضغط على السهم المتجه إلى أعلى أو السهم المتجه إلى أسفل.",
 	"components.list-item-tooltip.title": "التنقل عبر لوحة المفاتيح للقوائم:",
@@ -99,6 +100,7 @@ export default {
 	"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.interactive-label": "Tag List, {count} items",
 	"components.tag-list.num-hidden": "+ {count} more",
 	"components.tag-list.show-less": "Show Less",
 	"components.tag-list.show-more-description": "Select to show hidden tag list items",

package/lang/cy.js

@@ -62,6 +62,7 @@ export default {
 	"components.input-time-range.endTime": "Amser Gorffen",
 	"components.input-time-range.errorBadInput": "Rhaid i {startLabel} fod cyn {endLabel}",
 	"components.input-time-range.startTime": "Amser Dechrau",
+	"components.interactive.instructions": "Press Enter to interact, Escape to exit",
 	"components.list-item-drag-handle.default": "Aildrefnu gweithred eitem ar gyfer {name}",
 	"components.list-item-drag-handle.keyboard": "Aildrefnu eitemau, safle presennol {currentPosition} allan o {size}. I symud yr eitem hon, pwyswch y saeth i fyny neu'r saeth i lawr.",
 	"components.list-item-tooltip.title": "Llywio Bysellfwrdd ar gyfer Rhestrau:",
@@ -99,6 +100,7 @@ export default {
 	"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.interactive-label": "Tag List, {count} items",
 	"components.tag-list.num-hidden": "+ {count} more",
 	"components.tag-list.show-less": "Show Less",
 	"components.tag-list.show-more-description": "Select to show hidden tag list items",

package/lang/da.js

@@ -62,6 +62,7 @@ export default {
 	"components.input-time-range.endTime": "Sluttidspunkt",
 	"components.input-time-range.errorBadInput": "{startLabel} skal være før {endLabel}",
 	"components.input-time-range.startTime": "Starttidspunkt",
+	"components.interactive.instructions": "Press Enter to interact, Escape to exit",
 	"components.list-item-drag-handle.default": "Omarranger elementhandling for {name}",
 	"components.list-item-drag-handle.keyboard": "Omarranger element, aktuel position {currentPosition} ud af {size}. For at flytte dette element skal du trykke på pil op eller pil ned.",
 	"components.list-item-tooltip.title": "Tastaturnavigering for lister:",
@@ -99,6 +100,7 @@ export default {
 	"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.interactive-label": "Tag List, {count} items",
 	"components.tag-list.num-hidden": "+ {count} more",
 	"components.tag-list.show-less": "Show Less",
 	"components.tag-list.show-more-description": "Select to show hidden tag list items",

package/lang/de.js

@@ -62,6 +62,7 @@ export default {
 	"components.input-time-range.endTime": "Endzeit",
 	"components.input-time-range.errorBadInput": "{startLabel} muss vor {endLabel} liegen",
 	"components.input-time-range.startTime": "Startzeit",
+	"components.interactive.instructions": "Press Enter to interact, Escape to exit",
 	"components.list-item-drag-handle.default": "Elementaktion für {name} neu anordnen",
 	"components.list-item-drag-handle.keyboard": "Elemente neu anordnen; aktuelle Position: {currentPosition} von {size}. Drücken Sie zum Bewegen dieses Elements auf den Pfeil nach oben oder den Pfeil nach unten.",
 	"components.list-item-tooltip.title": "Tastaturnavigation für Listen:",
@@ -99,6 +100,7 @@ export default {
 	"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.interactive-label": "Tag List, {count} items",
 	"components.tag-list.num-hidden": "+ {count} more",
 	"components.tag-list.show-less": "Show Less",
 	"components.tag-list.show-more-description": "Select to show hidden tag list items",

package/lang/en.js

@@ -62,6 +62,7 @@ export default {
 	"components.input-time-range.endTime": "End Time",
 	"components.input-time-range.errorBadInput": "{startLabel} must be before {endLabel}",
 	"components.input-time-range.startTime": "Start Time",
+	"components.interactive.instructions": "Press Enter to interact, Escape to exit",
 	"components.list-item-drag-handle.default": "Reorder item action for {name}",
 	"components.list-item-drag-handle.keyboard": "Reorder item, current position {currentPosition} out of {size}. To move this item, press up or down arrows.",
 	"components.list-item-tooltip.title": "Keyboard Navigation for Lists:",
@@ -99,6 +100,7 @@ export default {
 	"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.interactive-label": "Tag List, {count} items",
 	"components.tag-list.num-hidden": "+ {count} more",
 	"components.tag-list.show-less": "Show Less",
 	"components.tag-list.show-more-description": "Select to show hidden tag list items",

package/lang/es-es.js

@@ -62,6 +62,7 @@ export default {
 	"components.input-time-range.endTime": "Hora de finalización",
 	"components.input-time-range.errorBadInput": "{startLabel} debe ser anterior a {endLabel}",
 	"components.input-time-range.startTime": "Hora de inicio",
+	"components.interactive.instructions": "Press Enter to interact, Escape to exit",
 	"components.list-item-drag-handle.default": "Reordenar acción de elemento para {name}",
 	"components.list-item-drag-handle.keyboard": "Reordenar elementos, posición actual {currentPosition} de {size}. Para mover este elemento, pulse las flechas arriba o abajo.",
 	"components.list-item-tooltip.title": "Navegación de listas con el teclado:",
@@ -99,6 +100,7 @@ export default {
 	"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.interactive-label": "Tag List, {count} items",
 	"components.tag-list.num-hidden": "+ {count} more",
 	"components.tag-list.show-less": "Show Less",
 	"components.tag-list.show-more-description": "Select to show hidden tag list items",

package/lang/es.js

@@ -62,6 +62,7 @@ export default {
 	"components.input-time-range.endTime": "Hora de finalización",
 	"components.input-time-range.errorBadInput": "{startLabel} debe estar antes de {endLabel}",
 	"components.input-time-range.startTime": "Hora de inicio",
+	"components.interactive.instructions": "Press Enter to interact, Escape to exit",
 	"components.list-item-drag-handle.default": "Acción de reordenar elemento de {name}",
 	"components.list-item-drag-handle.keyboard": "Reordenar elemento, posición actual {currentPosition} de {size}. Para mover este elemento, presione las flechas hacia arriba o hacia abajo.",
 	"components.list-item-tooltip.title": "Navegación con el teclado para listas:",
@@ -99,6 +100,7 @@ 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.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.show-more-description": "Select to show hidden tag list items",

package/lang/fr-fr.js

@@ -62,6 +62,7 @@ export default {
 	"components.input-time-range.endTime": "Heure de fin",
 	"components.input-time-range.errorBadInput": "{startLabel} doit être antérieur à {endLabel}",
 	"components.input-time-range.startTime": "Heure de début",
+	"components.interactive.instructions": "Press Enter to interact, Escape to exit",
 	"components.list-item-drag-handle.default": "Action de réorganisation de l'élément pour {name}",
 	"components.list-item-drag-handle.keyboard": "Réordonner les éléments, position actuelle {currentPosition} sur {size}. Pour déplacer cet élément, appuyez sur les flèches vers le haut ou vers le bas.",
 	"components.list-item-tooltip.title": "Navigation au clavier pour les listes :",
@@ -99,6 +100,7 @@ export default {
 	"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.interactive-label": "Tag List, {count} items",
 	"components.tag-list.num-hidden": "+ {count} more",
 	"components.tag-list.show-less": "Show Less",
 	"components.tag-list.show-more-description": "Select to show hidden tag list items",

package/lang/fr.js

@@ -62,6 +62,7 @@ export default {
 	"components.input-time-range.endTime": "Heure de fin",
 	"components.input-time-range.errorBadInput": "{startLabel} doit précéder {endLabel}",
 	"components.input-time-range.startTime": "Heure de début",
+	"components.interactive.instructions": "Press Enter to interact, Escape to exit",
 	"components.list-item-drag-handle.default": "Réordonner l'action de l'élément pour {name}",
 	"components.list-item-drag-handle.keyboard": "Réorganiser les éléments, position actuelle {currentPosition} de {size}. Pour déplacer cet élément, utilisez les flèches vers le haut et vers le bas.",
 	"components.list-item-tooltip.title": "Navigation au clavier pour les listes :",
@@ -99,6 +100,7 @@ export default {
 	"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.interactive-label": "Tag List, {count} items",
 	"components.tag-list.num-hidden": "+ {count} more",
 	"components.tag-list.show-less": "Show Less",
 	"components.tag-list.show-more-description": "Select to show hidden tag list items",

package/lang/hi.js

@@ -62,6 +62,7 @@ export default {
 	"components.input-time-range.endTime": "समाप्ति समय",
 	"components.input-time-range.errorBadInput": "{startLabel} {endLabel} से पहले का होना चाहिए",
 	"components.input-time-range.startTime": "प्रारंभ समय",
+	"components.interactive.instructions": "Press Enter to interact, Escape to exit",
 	"components.list-item-drag-handle.default": "{name} के लिए आइटम कार्रवाई का क्रम बदलें",
 	"components.list-item-drag-handle.keyboard": "आइटम का क्रम बदलें, {size} में से वर्तमान स्थिति {currentPosition} इस आइटम को ले जाने के लिए, ऊपर या नीचे तीर दबाएँ।",
 	"components.list-item-tooltip.title": "सूचियों के लिए कीबोर्ड नेविगेशन:",
@@ -99,6 +100,7 @@ export default {
 	"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.interactive-label": "Tag List, {count} items",
 	"components.tag-list.num-hidden": "+ {count} more",
 	"components.tag-list.show-less": "Show Less",
 	"components.tag-list.show-more-description": "Select to show hidden tag list items",

package/lang/ja.js

@@ -62,6 +62,7 @@ export default {
 	"components.input-time-range.endTime": "終了時刻",
 	"components.input-time-range.errorBadInput": "{startLabel} は {endLabel} より前にする必要があります",
 	"components.input-time-range.startTime": "開始時刻",
+	"components.interactive.instructions": "Press Enter to interact, Escape to exit",
 	"components.list-item-drag-handle.default": "{name} の項目並べ替えアクション",
 	"components.list-item-drag-handle.keyboard": "項目の並べ替え、現在の位置 {currentPosition}、サイズ {size}。この項目を移動するには、上矢印または下矢印を押します。",
 	"components.list-item-tooltip.title": "リストのキーボードナビゲーション:",
@@ -99,6 +100,7 @@ export default {
 	"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.interactive-label": "Tag List, {count} items",
 	"components.tag-list.num-hidden": "+ {count} more",
 	"components.tag-list.show-less": "Show Less",
 	"components.tag-list.show-more-description": "Select to show hidden tag list items",

package/lang/ko.js

@@ -62,6 +62,7 @@ export default {
 	"components.input-time-range.endTime": "종료 시각",
 	"components.input-time-range.errorBadInput": "{startLabel}은(는) {endLabel} 앞에 있어야 합니다",
 	"components.input-time-range.startTime": "시작 시각",
+	"components.interactive.instructions": "Press Enter to interact, Escape to exit",
 	"components.list-item-drag-handle.default": "{name}에 대한 항목 작업 재정렬",
 	"components.list-item-drag-handle.keyboard": "전체 {size}에서 현재 위치 {currentPosition} 항목 재정렬 이 항목을 이동하라면 위쪽 또는 아래쪽 화살표를 누르십시오.",
 	"components.list-item-tooltip.title": "목록에 대한 키보드 탐색:",
@@ -99,6 +100,7 @@ export default {
 	"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.interactive-label": "Tag List, {count} items",
 	"components.tag-list.num-hidden": "+ {count} more",
 	"components.tag-list.show-less": "Show Less",
 	"components.tag-list.show-more-description": "Select to show hidden tag list items",

package/lang/nl.js

@@ -62,6 +62,7 @@ export default {
 	"components.input-time-range.endTime": "Eindtijd",
 	"components.input-time-range.errorBadInput": "{startLabel} moet voor {endLabel} liggen",
 	"components.input-time-range.startTime": "Starttijd",
+	"components.interactive.instructions": "Press Enter to interact, Escape to exit",
 	"components.list-item-drag-handle.default": "Itemactie voor {name} opnieuw rangschikken",
 	"components.list-item-drag-handle.keyboard": "Items opnieuw rangschikken, huidige positie {currentPosition} van {size}. Als u dit item wilt verplaatsen, drukt u op de pijl omhoog of omlaag.",
 	"components.list-item-tooltip.title": "Toetsenbordnavigatie voor lijsten:",
@@ -99,6 +100,7 @@ export default {
 	"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.interactive-label": "Tag List, {count} items",
 	"components.tag-list.num-hidden": "+ {count} more",
 	"components.tag-list.show-less": "Show Less",
 	"components.tag-list.show-more-description": "Select to show hidden tag list items",

package/lang/pt.js

@@ -62,6 +62,7 @@ export default {
 	"components.input-time-range.endTime": "Hora final",
 	"components.input-time-range.errorBadInput": "{startLabel} precisa ser anterior a {endLabel}",
 	"components.input-time-range.startTime": "Hora de início",
+	"components.interactive.instructions": "Press Enter to interact, Escape to exit",
 	"components.list-item-drag-handle.default": "Reordenar ação de item para {name}",
 	"components.list-item-drag-handle.keyboard": "Reordenar item, posição atual {currentPosition} de {size}. Para mover este item, pressione as setas para cima ou para baixo.",
 	"components.list-item-tooltip.title": "Navegação do teclado para listas:",
@@ -99,6 +100,7 @@ export default {
 	"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.interactive-label": "Tag List, {count} items",
 	"components.tag-list.num-hidden": "+ {count} more",
 	"components.tag-list.show-less": "Show Less",
 	"components.tag-list.show-more-description": "Select to show hidden tag list items",

package/lang/sv.js

@@ -62,6 +62,7 @@ export default {
 	"components.input-time-range.endTime": "Sluttid",
 	"components.input-time-range.errorBadInput": "{startLabel} måste vara före {endLabel}",
 	"components.input-time-range.startTime": "Starttid",
+	"components.interactive.instructions": "Press Enter to interact, Escape to exit",
 	"components.list-item-drag-handle.default": "Åtgärd för att ändra ordning på objekt för {name}",
 	"components.list-item-drag-handle.keyboard": "Flytta objekt. Aktuell position: {currentPosition} av {size}. Om du vill flytta det här objektet trycker du på uppåt- eller nedåtpilen.",
 	"components.list-item-tooltip.title": "Tangentbordsnavigering för listor:",
@@ -99,6 +100,7 @@ export default {
 	"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.interactive-label": "Tag List, {count} items",
 	"components.tag-list.num-hidden": "+ {count} more",
 	"components.tag-list.show-less": "Show Less",
 	"components.tag-list.show-more-description": "Select to show hidden tag list items",

package/lang/tr.js

@@ -62,6 +62,7 @@ export default {
 	"components.input-time-range.endTime": "Bitiş Saati",
 	"components.input-time-range.errorBadInput": "{startLabel}, {endLabel} tarihinden önce olmalıdır",
 	"components.input-time-range.startTime": "Başlangıç Saati",
+	"components.interactive.instructions": "Press Enter to interact, Escape to exit",
 	"components.list-item-drag-handle.default": "{name} için öğe eylemini yeniden sırala",
 	"components.list-item-drag-handle.keyboard": "Öğeyi yeniden sırala, mevcut konum {currentPosition} / {size}. Bu öğeyi taşımak için yukarı veya aşağı oklara basın.",
 	"components.list-item-tooltip.title": "Listeler için Klavye ile Gezinme:",
@@ -99,6 +100,7 @@ export default {
 	"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.interactive-label": "Tag List, {count} items",
 	"components.tag-list.num-hidden": "+ {count} more",
 	"components.tag-list.show-less": "Show Less",
 	"components.tag-list.show-more-description": "Select to show hidden tag list items",

package/lang/zh-cn.js

@@ -62,6 +62,7 @@ export default {
 	"components.input-time-range.endTime": "结束时间",
 	"components.input-time-range.errorBadInput": "{startLabel} 必须早于 {endLabel}",
 	"components.input-time-range.startTime": "开始时间",
+	"components.interactive.instructions": "Press Enter to interact, Escape to exit",
 	"components.list-item-drag-handle.default": "对 {name} 的项目操作重新排序",
 	"components.list-item-drag-handle.keyboard": "对项目重新排序，当前位置 {currentPosition} 超出 {size}。要移动此项目，请按向上或向下箭头。",
 	"components.list-item-tooltip.title": "列表的键盘导航：",
@@ -99,6 +100,7 @@ export default {
 	"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.interactive-label": "Tag List, {count} items",
 	"components.tag-list.num-hidden": "+ {count} more",
 	"components.tag-list.show-less": "Show Less",
 	"components.tag-list.show-more-description": "Select to show hidden tag list items",

package/lang/zh-tw.js

@@ -62,6 +62,7 @@ export default {
 	"components.input-time-range.endTime": "結束時間",
 	"components.input-time-range.errorBadInput": "{startLabel} 必須早於 {endLabel}",
 	"components.input-time-range.startTime": "開始時間",
+	"components.interactive.instructions": "Press Enter to interact, Escape to exit",
 	"components.list-item-drag-handle.default": "重新排序 {name} 的項目動作",
 	"components.list-item-drag-handle.keyboard": "重新排序項目，目前位置 {currentPosition}，總共為 {size}。若要移除這個項目，請按向上或向下箭頭。",
 	"components.list-item-tooltip.title": "清單的鍵盤導覽：",
@@ -99,6 +100,7 @@ export default {
 	"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.interactive-label": "Tag List, {count} items",
 	"components.tag-list.num-hidden": "+ {count} more",
 	"components.tag-list.show-less": "Show Less",
 	"components.tag-list.show-more-description": "Select to show hidden tag list items",

package/mixins/interactive-mixin.js

@@ -0,0 +1,118 @@
+import { css, html } from 'lit';
+import { findComposedAncestor, isComposedAncestor } from '../helpers/dom.js';
+import { forceFocusVisible, getNextFocusable } from '../helpers/focus.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { LocalizeCoreElement } from '../helpers/localize-core-element.js';
+
+const keyCodes = {
+	ENTER: 13,
+	ESCAPE: 27
+};
+
+export const InteractiveMixin = superclass => class extends LocalizeCoreElement(superclass) {
+
+	static get properties() {
+		return {
+			_hasInteractiveAncestor: { state: true },
+			_interactive: { state: true }
+		};
+	}
+
+	static get styles() {
+		return css`
+			.interactive-container.focus-visible,
+			.interactive-container:focus-visible {
+				border-radius: 6px;
+				outline: 2px solid var(--d2l-color-celestine);
+				outline-offset: 2px;
+			}
+		`;
+	}
+
+	constructor() {
+		super();
+		this._hasInteractiveAncestor = false;
+		this._interactive = false;
+	}
+
+	connectedCallback() {
+		super.connectedCallback();
+
+		const parentGrid = findComposedAncestor(this.parentNode, node => {
+			return ((node.tagName === 'D2L-LIST' && node.grid) || (node.nodeType === Node.ELEMENT_NODE && node.getAttribute('role') === 'grid'));
+		});
+		this._hasInteractiveAncestor = (parentGrid !== null);
+	}
+
+	focus() {
+		if (!this.shadowRoot) return;
+		if (this._hasInteractiveAncestor && !this._interactive) forceFocusVisible(this.shadowRoot.querySelector('.interactive-container'));
+		else this._focusDelegate();
+	}
+
+	renderInteractiveContainer(inner, label, focusDelegate) {
+		if (!label) {
+			throw new Error(`InteractiveMixin: no label provided for "${this.tagName}"`);
+		}
+		if (!focusDelegate) {
+			throw new Error(`InteractiveMixin: no focus delegate provided for "${this.tagName}"`);
+		}
+		this._focusDelegate = focusDelegate;
+		if (!this._hasInteractiveAncestor) return inner;
+		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="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>
+			</div>
+		`;
+	}
+
+	_handleInteractiveContentFocusIn() {
+		this._interactive = true;
+	}
+
+	_handleInteractiveContentFocusOut(e) {
+		if (isComposedAncestor(this.shadowRoot.querySelector('.interactive-container-content'), e.relatedTarget)) return;
+		// focus moved out of the interactive content
+		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) {
+			this._interactive = false;
+			await this.updateComplete;
+			this.shadowRoot.querySelector('.interactive-container').focus();
+		}
+	}
+
+	async _handleInteractiveStartFocus(e) {
+		if (e.relatedTarget === this.shadowRoot.querySelector('.interactive-container')) {
+			// 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();
+		} else {
+			// 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();
+		}
+	}
+
+};

package/mixins/interactive-mixin.md

@@ -0,0 +1,27 @@
+# InteractiveMixin
+
+The `InteractiveMixin` enables keyboard toggling of interactive elements (such as those that use arrow keys) inside nested grids. It addresses the issue of conflicting arrow key behaviour. If the component is rendered as a descendant of a grid, keyboard users use the `Enter` key to toggle into interactive mode, and the `Escape` key to toggle out.
+
+## Usage
+
+Apply the mixin, call its `renderInteractiveContainer` method from `render`, providing the interactive content, label for the toggle, and a focus delegate that the mixin can call to focus on the contents.
+
+**Note:** consumers _must_ provide a focus delegate as mentioned. They _should not_ implement a `focus` method, since the mixin manages focus with its own implementation.
+
+```js
+import { InteractiveMixin } from '@brightspace-ui/core/mixins/interactive-mixin.js';
+
+class MyComponent extends InteractiveMixin(LitElement) {
+
+  render() {
+    return this.renderInteractiveContainer(
+      html`<div>interactive content</div>`,
+      'My Label',
+      () => {
+        // focus on interactive content element
+      }
+    );
+  }
+
+}
+```

package/package.json

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

package/tools/dom-test-helpers.js

@@ -0,0 +1,12 @@
+
+export function keyDown(element, keycode) {
+	const event = new CustomEvent('keydown', {
+		detail: 0,
+		bubbles: true,
+		cancelable: true,
+		composed: true
+	});
+	event.keyCode = keycode;
+	event.code = keycode;
+	element.dispatchEvent(event);
+}