@brightspace-ui/core 2.0.2 → 2.1.0

package/components/tabs/demo/tabs.html

@@ -19,20 +19,26 @@
 
 			<div style="margin-bottom: 30px;">
 				<d2l-button-subtle id="add" text="Add"></d2l-button-subtle>
+				<d2l-button-subtle id="add-selected" text="Add Selected"></d2l-button-subtle>
 				<d2l-button-subtle id="remove" text="Remove"></d2l-button-subtle>
 			</div>
 			<script>
 				let newPanelId = 0;
-				document.querySelector('#add').addEventListener('click', () => {
+				const addPanel = selected => {
 					newPanelId += 1;
 					const panel = document.createElement('d2l-tab-panel');
+					panel.selected = selected;
 					panel.text = `New Panel ${newPanelId}`;
 					panel.textContent = `Content for new panel ${newPanelId}`;
 					const tabs = document.querySelector('d2l-tabs');
 					const panels = [...tabs.querySelectorAll('d2l-tab-panel')];
 					if (panels.length < 2) tabs.appendChild(panel);
 					else tabs.insertBefore(panel, panels[1]);
-				});
+				};
+				
+				document.querySelector('#add').addEventListener('click', () => addPanel(false));
+				document.querySelector('#add-selected').addEventListener('click', () => addPanel(true));
+
 				document.querySelector('#remove').addEventListener('click', () => {
 					const tabs = document.querySelector('d2l-tabs');
 					const panels = [...tabs.querySelectorAll('d2l-tab-panel')];
@@ -73,30 +79,32 @@
 
 			<d2l-demo-snippet>
 				<template>
-					<d2l-tabs>
-						<d2l-tab-panel text="S18">Tab content for S18</d2l-tab-panel>
-						<d2l-tab-panel text="W18">Tab content for W18</d2l-tab-panel>
-						<d2l-tab-panel text="F17">Tab content for F17</d2l-tab-panel>
-						<d2l-tab-panel text="S17">Tab content for S17</d2l-tab-panel>
-						<d2l-tab-panel text="W17">Tab content for W17</d2l-tab-panel>
-						<d2l-tab-panel text="F16">Tab content for F16</d2l-tab-panel>
-						<d2l-tab-panel text="S16">Tab content for S16</d2l-tab-panel>
-						<d2l-tab-panel text="W16">Tab content for W16</d2l-tab-panel>
-						<d2l-tab-panel text="F15">Tab content for F15</d2l-tab-panel>
-						<d2l-tab-panel text="S15">Tab content for S15</d2l-tab-panel>
-						<d2l-tab-panel text="W15">Tab content for W15</d2l-tab-panel>
-						<d2l-tab-panel text="F14">Tab content for F14</d2l-tab-panel>
-						<d2l-tab-panel text="S14">Tab content for S14</d2l-tab-panel>
-						<d2l-tab-panel text="W14">Tab content for W14</d2l-tab-panel>
-						<d2l-tab-panel text="F13">Tab content for F13</d2l-tab-panel>
-						<d2l-tab-panel text="S13">Tab content for S13</d2l-tab-panel>
-						<d2l-tab-panel text="W13">Tab content for W13</d2l-tab-panel>
-						<d2l-tab-panel text="F12">Tab content for F12</d2l-tab-panel>
-						<d2l-tab-panel text="S12">Tab content for S12</d2l-tab-panel>
-						<d2l-tab-panel text="W12">Tab content for W12</d2l-tab-panel>
-						<d2l-tab-panel text="F11">Tab content for F11</d2l-tab-panel>
-						<d2l-tab-panel text="S11">Tab content for S11</d2l-tab-panel>
-					</d2l-tabs>
+					<div style="max-width: 500px;">
+						<d2l-tabs>
+							<d2l-tab-panel text="S18">Tab content for S18</d2l-tab-panel>
+							<d2l-tab-panel text="W18">Tab content for W18</d2l-tab-panel>
+							<d2l-tab-panel text="F17">Tab content for F17</d2l-tab-panel>
+							<d2l-tab-panel text="S17">Tab content for S17</d2l-tab-panel>
+							<d2l-tab-panel text="W17">Tab content for W17</d2l-tab-panel>
+							<d2l-tab-panel text="F16">Tab content for F16</d2l-tab-panel>
+							<d2l-tab-panel text="S16">Tab content for S16</d2l-tab-panel>
+							<d2l-tab-panel text="W16">Tab content for W16</d2l-tab-panel>
+							<d2l-tab-panel text="F15">Tab content for F15</d2l-tab-panel>
+							<d2l-tab-panel text="S15">Tab content for S15</d2l-tab-panel>
+							<d2l-tab-panel text="W15">Tab content for W15</d2l-tab-panel>
+							<d2l-tab-panel text="F14">Tab content for F14</d2l-tab-panel>
+							<d2l-tab-panel text="S14">Tab content for S14</d2l-tab-panel>
+							<d2l-tab-panel text="W14">Tab content for W14</d2l-tab-panel>
+							<d2l-tab-panel text="F13">Tab content for F13</d2l-tab-panel>
+							<d2l-tab-panel text="S13">Tab content for S13</d2l-tab-panel>
+							<d2l-tab-panel text="W13">Tab content for W13</d2l-tab-panel>
+							<d2l-tab-panel text="F12">Tab content for F12</d2l-tab-panel>
+							<d2l-tab-panel text="S12">Tab content for S12</d2l-tab-panel>
+							<d2l-tab-panel text="W12">Tab content for W12</d2l-tab-panel>
+							<d2l-tab-panel text="F11">Tab content for F11</d2l-tab-panel>
+							<d2l-tab-panel text="S11">Tab content for S11</d2l-tab-panel>
+						</d2l-tabs>
+					</div>
 				</template>
 			</d2l-demo-snippet>
 

package/components/tabs/tab-panel-mixin.js

@@ -51,17 +51,6 @@ export const TabPanelMixin = superclass => class extends superclass {
 		this.selected = false;
 	}
 
-	async attributeChangedCallback(name, oldval, newval) {
-		super.attributeChangedCallback(name, oldval, newval);
-		if (name === 'text') {
-			this.setAttribute('aria-label', this.text);
-			/** Dispatched when the text attribute is changed */
-			this.dispatchEvent(new CustomEvent(
-				'd2l-tab-panel-text-changed', { bubbles: true, composed: true, detail: { text: this.text } }
-			));
-		}
-	}
-
 	connectedCallback() {
 		super.connectedCallback();
 		if (this.id.length === 0) this.id = getUniqueId();
@@ -80,6 +69,11 @@ export const TabPanelMixin = superclass => class extends superclass {
 						));
 					});
 				}
+			} else if (prop === 'text') {
+				this.setAttribute('aria-label', this.text);
+				this.dispatchEvent(new CustomEvent(
+					'd2l-tab-panel-text-changed', { bubbles: true, composed: true, detail: { text: this.text } }
+				));
 			}
 		});
 	}

package/components/tabs/tabs.js

@@ -4,7 +4,6 @@ import '../../helpers/queueMicrotask.js';
 import './tab-internal.js';
 import { css, html, LitElement } from 'lit-element/lit-element.js';
 import { cssEscape, findComposedAncestor } from '../../helpers/dom.js';
-import { getNextFocusable, getPreviousFocusable } from '../../helpers/focus.js';
 import { ArrowKeysMixin } from '../../mixins/arrow-keys-mixin.js';
 import { bodyCompactStyles } from '../typography/styles.js';
 import { classMap } from 'lit-html/directives/class-map.js';
@@ -125,11 +124,6 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(RtlMixin(FocusVisiblePolyf
 				transition: transform 200ms ease-out;
 				white-space: nowrap;
 			}
-			.d2l-tabs-focus-start,
-			.d2l-tabs-focus-end {
-				left: 0;
-				position: absolute;
-			}
 			.d2l-tabs-scroll-previous-container,
 			.d2l-tabs-scroll-next-container {
 				background-color: var(--d2l-tabs-background-color);
@@ -280,6 +274,11 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(RtlMixin(FocusVisiblePolyf
 
 		this.arrowKeysOnBeforeFocus = async(tab) => {
 			const tabInfo = this._getTabInfo(tab.controlsPanel);
+			this._setFocusable(tabInfo);
+
+			this.requestUpdate();
+			await this.updateComplete;
+
 			if (!this._scrollCollapsed) {
 				return this._updateScrollPosition(tabInfo);
 			} else {
@@ -340,22 +339,22 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(RtlMixin(FocusVisiblePolyf
 							<d2l-icon icon="tier1:chevron-left"></d2l-icon>
 						</button>
 					</div>
-					<span class="d2l-tabs-focus-start" @focus="${this._handleFocusStart}" tabindex="0"></span>
 					${this.arrowKeysContainer(html`
 						<div class="d2l-tabs-container-list"
 							@d2l-tab-selected="${this._handleTabSelected}"
+							@focusout="${this._handleFocusOut}"
 							role="tablist"
 							style="${styleMap(tabsContainerListStyles)}">
 							${repeat(this._tabInfos, (tabInfo) => tabInfo.id, (tabInfo) => html`
 								<d2l-tab-internal aria-selected="${tabInfo.selected ? 'true' : 'false'}"
 									.controlsPanel="${tabInfo.id}"
 									data-state="${tabInfo.state}"
+									tabindex="${tabInfo.activeFocusable ? 0 : -1}"
 									text="${tabInfo.text}">
 								</d2l-tab-internal>
 							`)}
 						</div>
 					`)}
-					<span class="d2l-tabs-focus-end" @focus="${this._handleFocusEnd}" tabindex="0"></span>
 					<div class="d2l-tabs-scroll-next-container">
 						<button class="d2l-tabs-scroll-button"
 							@click="${this._handleScrollNext}"
@@ -552,28 +551,17 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(RtlMixin(FocusVisiblePolyf
 		}
 	}
 
-	_handleFocusEnd(e) {
-		if (e.relatedTarget && e.relatedTarget.role !== 'tab') {
-			this._focusSelected();
-		} else {
-			const nextFocusable = getNextFocusable(e.target, false);
-			if (nextFocusable) nextFocusable.focus();
-		}
-	}
-
-	_handleFocusStart(e) {
-		if (e.relatedTarget && e.relatedTarget.role === 'tab') {
-			const previousFocusable = getPreviousFocusable(e.target, false);
-			if (previousFocusable) previousFocusable.focus();
-		} else {
-			this._focusSelected();
-		}
+	_handleFocusOut(e) {
+		if (e.relatedTarget && e.relatedTarget.role === 'tab') return;
+		this._resetFocusables();
 	}
 
 	_handlePanelSelected(e) {
 		const tabInfo = this._getTabInfo(e.target.id);
 		// event could be from nested tabs
 		if (!tabInfo) return;
+
+		this._setFocusable(tabInfo);
 		tabInfo.selected = true;
 		this.requestUpdate();
 	}
@@ -603,7 +591,10 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(RtlMixin(FocusVisiblePolyf
 				selected: panel.selected,
 				state: state
 			};
-			if (tabInfo.selected) selectedTabInfo = tabInfo;
+			if (tabInfo.selected) {
+				selectedTabInfo = tabInfo;
+				this._setFocusable(tabInfo);
+			}
 			return tabInfo;
 		});
 
@@ -619,6 +610,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(RtlMixin(FocusVisiblePolyf
 		this._tabInfos = newTabInfos;
 
 		if (this._tabInfos.length > 0 && !selectedTabInfo) {
+			this._tabInfos[0].activeFocusable = true;
 			this._tabInfos[0].selected = true;
 			selectedTabInfo = this._tabInfos[0];
 		}
@@ -756,19 +748,24 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(RtlMixin(FocusVisiblePolyf
 		const selectedTab = e.target;
 		const selectedPanel = this._getPanel(selectedTab.controlsPanel);
 		const selectedTabInfo = this._getTabInfo(selectedTab.controlsPanel);
+		selectedTabInfo.activeFocusable = true;
 
 		await this.updateComplete;
 		this._updateScrollPosition(selectedTabInfo);
 
 		selectedPanel.selected = true;
 		this._tabInfos.forEach((tabInfo) => {
-			if (tabInfo.selected && tabInfo.id !== selectedTab.controlsPanel) {
-				tabInfo.selected = false;
-				const panel = this._getPanel(tabInfo.id);
-				// panel may not exist if it's being removed
-				if (panel) panel.selected = false;
+			if (tabInfo.id !== selectedTab.controlsPanel) {
+				if (tabInfo.selected) {
+					tabInfo.selected = false;
+					const panel = this._getPanel(tabInfo.id);
+					// panel may not exist if it's being removed
+					if (panel) panel.selected = false;
+				}
+				if (tabInfo.activeFocusable) tabInfo.activeFocusable = false;
 			}
 		});
+
 		this.requestUpdate();
 	}
 
@@ -780,6 +777,12 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(RtlMixin(FocusVisiblePolyf
 		return (position > measures.tabsContainerRect.width - scrollButtonWidth) && (position < measures.tabsContainerRect.width);
 	}
 
+	_resetFocusables() {
+		const selectedTab = this._tabInfos.find(ti => ti.selected);
+		if (selectedTab) this._setFocusable(selectedTab);
+		this.requestUpdate();
+	}
+
 	_scrollToPosition(translationValue) {
 		if (translationValue === this._translationValue) {
 			return Promise.resolve();
@@ -801,6 +804,13 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(RtlMixin(FocusVisiblePolyf
 		});
 	}
 
+	_setFocusable(tabInfo) {
+		const currentFocusable = this._tabInfos.find(ti => ti.activeFocusable);
+		if (currentFocusable) currentFocusable.activeFocusable = false;
+
+		tabInfo.activeFocusable = true;
+	}
+
 	async _tryExpandTabsContainer(measures) {
 
 		if (!this._scrollCollapsed) return false;

package/custom-elements.json

@@ -9702,13 +9702,12 @@
         }
       ],
       "events": [
-        {
-          "name": "d2l-tab-panel-text-changed",
-          "description": "Dispatched when the text attribute is changed"
-        },
         {
           "name": "d2l-tab-panel-selected",
           "description": "Dispatched when a tab is selected"
+        },
+        {
+          "name": "d2l-tab-panel-text-changed"
         }
       ],
       "slots": [

package/mixins/localize-dynamic-mixin.js

@@ -2,11 +2,17 @@ import { getLocalizeOverrideResources } from '../helpers/getLocalizeResources.js
 import { LocalizeMixin } from './localize-mixin.js';
 
 const fallbackLang = 'en';
+const supportedLangpacks = ['ar', 'cy', 'da', 'de', 'en', 'es', 'es-es', 'fr', 'fr-fr', 'fr-on', 'hi', 'ja', 'ko', 'nl', 'pt', 'sv', 'tr', 'zh-cn', 'zh-tw'];
 
 export const LocalizeDynamicMixin = superclass => class extends LocalizeMixin(superclass) {
 
 	static async getLocalizeResources(langs, { importFunc, osloCollection }) {
 
+		// in dev, don't request unsupported langpacks
+		if (!importFunc.toString().includes('switch')) {
+			langs = langs.filter(lang => supportedLangpacks.includes(lang));
+		}
+
 		for (const lang of [...langs, fallbackLang]) {
 
 			const resources = await importFunc(lang).catch(() => {});

package/mixins/localize-mixin.md

@@ -83,7 +83,9 @@ class MyComponent extends LocalizeDynamicMixin(LitElement) {
 }
 ```
 
-If your build system does not support variable dynamic imports, you'll need to manually set up imports for each language:
+When using this method, depending on various user settings, it's possible that a language file that does not exist will be requested, resulting in a network error (404). In production, your build system should prevent this by transpiling the variable dynamic import into a `switch` statement.
+
+If your build system does not support variable dynamic imports, you'll need to manually set up imports for each supported language:
 
 ```javascript
 static get localizeConfig() {

package/package.json

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