@brightspace-ui/core 3.94.1 → 3.94.3

package/components/tabs/tabs.js

@@ -242,33 +242,61 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 		super.firstUpdated(changedProperties);
 
 		this.arrowKeysFocusablesProvider = async() => {
-			return [...this.shadowRoot.querySelectorAll('d2l-tab-internal')];
+			return this._defaultSlotBehavior ? [...this.shadowRoot.querySelectorAll('d2l-tab-internal')] : this._tabs;
 		};
 
 		this.arrowKeysOnBeforeFocus = async(tab) => {
-			const tabInfo = this._getTabInfo(tab.controlsPanel);
-			this._setFocusable(tabInfo);
+			if (this._defaultSlotBehavior) {
+				// remove this section after d2l-tab/d2l-tab-panel backport
+				const tabInfo = this._getTabInfo(tab.controlsPanel);
+				this._setFocusableDefaultSlotBehavior(tabInfo);
 
-			this.requestUpdate();
-			await this.updateComplete;
-
-			if (!this._scrollCollapsed) {
-				return this._updateScrollPositionDefaultSlotBehavior(tabInfo);
-			} else {
-				const measures = this._getMeasures();
-				const newTranslationValue = this._calculateScrollPositionDefaultSlotBehavior(tabInfo, measures);
+				this.requestUpdate();
+				await this.updateComplete;
 
-				if (!this.#isRTL()) {
-					if (newTranslationValue >= 0) return;
+				if (!this._scrollCollapsed) {
+					return this._updateScrollPositionDefaultSlotBehavior(tabInfo);
 				} else {
-					if (newTranslationValue <= 0) return;
+					const measures = this._getMeasures();
+					const newTranslationValue = this._calculateScrollPositionDefaultSlotBehavior(tabInfo, measures);
+
+					if (!this.#isRTL()) {
+						if (newTranslationValue >= 0) return;
+					} else {
+						if (newTranslationValue <= 0) return;
+					}
+
+					const expanded = await this._tryExpandTabsContainer(measures);
+					if (expanded) {
+						return;
+					} else {
+						return this._updateScrollPositionDefaultSlotBehavior(tabInfo);
+					}
 				}
+			} else {
+				this._setFocusable(tab);
 
-				const expanded = await this._tryExpandTabsContainer(measures);
-				if (expanded) {
-					return;
+				this.requestUpdate();
+				await this.updateComplete;
+
+				if (!this._scrollCollapsed) {
+					return this._updateScrollPosition(tab);
 				} else {
-					return this._updateScrollPositionDefaultSlotBehavior(tabInfo);
+					const measures = this._getMeasures();
+					const newTranslationValue = this._calculateScrollPosition(tab, measures);
+
+					if (!this.#isRTL()) {
+						if (newTranslationValue >= 0) return;
+					} else {
+						if (newTranslationValue <= 0) return;
+					}
+
+					const expanded = await this._tryExpandTabsContainer(measures);
+					if (expanded) {
+						return;
+					} else {
+						return this._updateScrollPosition(tab);
+					}
 				}
 			}
 		};
@@ -364,6 +392,10 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 		return this.shadowRoot.querySelector('.d2l-tabs-container-list').getBoundingClientRect();
 	}
 
+	#checkTabPanelMatchRequested;
+	#panels;
+	#updateAriaControlsRequested;
+
 	_animateTabAddition(tabInfo) {
 		const tab = this.shadowRoot
 			&& this.shadowRoot.querySelector(`d2l-tab-internal[controls-panel="${cssEscape(tabInfo.id)}"]`);
@@ -407,6 +439,21 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 	}
 
 	async _focusSelected() {
+		if (this._defaultSlotBehavior) {
+			this._focusSelectedDefaultSlotBehavior();
+			return;
+		}
+
+		const selectedTab = this._tabs.find(ti => ti.selected);
+		if (!selectedTab) return;
+
+		await this._updateScrollPosition(selectedTab);
+
+		selectedTab.focus();
+	}
+
+	// remove after d2l-tab/d2l-tab-panel backport
+	async _focusSelectedDefaultSlotBehavior() {
 		const selectedTab = this.shadowRoot && this.shadowRoot.querySelector('d2l-tab-internal[aria-selected="true"]');
 		if (!selectedTab) return;
 
@@ -438,10 +485,8 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 	_getPanel(id) {
 		if (this._defaultSlotBehavior) return this._getPanelDefaultSlotBehavior(id);
 
-		if (!this.shadowRoot) return;
-		const slot = this.shadowRoot.querySelector('slot[name="panels"]');
-		const panels = this._getPanels(slot);
-		return panels.find(panel => panel.labelledBy === id);
+		if (!this.#panels) return;
+		return this.#panels.find(panel => panel.labelledBy === id);
 	}
 
 	// remove after d2l-tab/d2l-tab-panel backport
@@ -449,7 +494,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 		if (!this.shadowRoot) return;
 		// use simple selector for slot (Edge)
 		const slot = this.shadowRoot.querySelector('.d2l-panels-container').querySelector('slot');
-		const panels = this._getPanels(slot);
+		const panels = this._getPanelsDefaultSlotBehavior(slot);
 		for (let i = 0; i < panels.length; i++) {
 			if (panels[i].nodeType === Node.ELEMENT_NODE && panels[i].role === 'tabpanel' && panels[i].id === id) {
 				return panels[i];
@@ -457,7 +502,8 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 		}
 	}
 
-	_getPanels(slot) {
+	// remove after d2l-tab/d2l-tab-panel backport
+	_getPanelsDefaultSlotBehavior(slot) {
 		if (!slot) return;
 		return slot.assignedElements({ flatten: true }).filter((node) => node.role === 'tabpanel');
 	}
@@ -470,7 +516,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 	async _handleDefaultSlotChange(e) {
 		if (!this._defaultSlotBehavior) return;
 
-		const panels = this._getPanels(e.target);
+		const panels = this._getPanelsDefaultSlotBehavior(e.target);
 
 		// handle case where there are less than two tabs initially
 		this._updateTabListVisibility(panels);
@@ -495,7 +541,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 			};
 			if (tabInfo.selected) {
 				selectedTabInfo = tabInfo;
-				this._setFocusable(tabInfo);
+				this._setFocusableDefaultSlotBehavior(tabInfo);
 			}
 			return tabInfo;
 		});
@@ -563,17 +609,20 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 		// event could be from nested tabs
 		if (!tabInfo) return;
 
-		this._setFocusable(tabInfo);
+		this._setFocusableDefaultSlotBehavior(tabInfo);
 		tabInfo.selected = true;
 		this.requestUpdate();
 	}
 
-	_handlePanelsSlotChange() {
+	_handlePanelsSlotChange(e) {
 		if (this._defaultSlotBehavior) return;
 
+		this.#panels = e.target.assignedElements({ flatten: true }).filter((node) => node.role === 'tabpanel');
+		this.#checkTabPanelMatch();
 		this.#setAriaControls();
 	}
 
+	// remove after d2l-tab/d2l-tab-panel backport
 	async _handlePanelTextChange(e) {
 		const tabInfo = this._getTabInfo(e.target.id);
 		// event could be from nested tabs
@@ -727,9 +776,10 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 		if (selectedTab) {
 			this.#updateSelectedTab(selectedTab);
 		}
-		this.#setAriaControls();
 
 		await this.updateComplete;
+		this.#checkTabPanelMatch();
+		this.#setAriaControls();
 
 		if (!this._initialized && this._tabs.length > 0) {
 			this._initialized = true;
@@ -751,8 +801,13 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 	}
 
 	_resetFocusables() {
-		const selectedTab = this._tabInfos.find(ti => ti.selected);
-		if (selectedTab) this._setFocusable(selectedTab);
+		if (this._defaultSlotBehavior) {
+			const selectedTab = this._tabInfos.find(ti => ti.selected);
+			if (selectedTab) this._setFocusableDefaultSlotBehavior(selectedTab);
+		} else {
+			const selectedTab = this._tabs.find(ti => ti.selected);
+			if (selectedTab) this._setFocusable(selectedTab);
+		}
 		this.requestUpdate();
 	}
 
@@ -777,7 +832,15 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 		});
 	}
 
-	_setFocusable(tabInfo) {
+	_setFocusable(tab) {
+		const currentFocusable = this._tabs.find(tab => tab.tabIndex === 0);
+		if (currentFocusable) currentFocusable.tabIndex = -1;
+
+		tab.tabIndex = 0;
+	}
+
+	// remove after d2l-tab/d2l-tab-panel backport
+	_setFocusableDefaultSlotBehavior(tabInfo) {
 		const currentFocusable = this._tabInfos.find(ti => ti.activeFocusable);
 		if (currentFocusable) currentFocusable.activeFocusable = false;
 
@@ -1011,22 +1074,40 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 		return newTranslationValue;
 	}
 
+	#checkTabPanelMatch() {
+		// debounce so only runs once when tabs/panels slots changing
+		if (this.#checkTabPanelMatchRequested) return;
+
+		this.#checkTabPanelMatchRequested = true;
+		setTimeout(() => {
+			if ((this._tabs && !this.#panels) || (this.#panels && !this._tabs)) {
+				console.warn('d2l-tabs: tabs and panels are not in sync');
+			} else if (this._tabs.length !== this.#panels.length) {
+				console.warn('d2l-tabs: number of tabs and panels does not match');
+			}
+			this.#checkTabPanelMatchRequested = false;
+		}, 0);
+	}
+
 	#isRTL() {
 		return document.documentElement.getAttribute('dir') === 'rtl';
 	}
 
 	#setAriaControls() {
 		// debounce so only runs once when tabs/panels slots changing
-		if (this._updateAriaControlsRequested) return;
+		if (this.#updateAriaControlsRequested) return;
 
-		this._updateAriaControlsRequested = true;
+		this.#updateAriaControlsRequested = true;
 		setTimeout(() => {
 			this._tabs?.forEach((tab) => {
 				const panel = this._getPanel(tab.id);
-				if (!panel) return;
+				if (!panel) {
+					console.warn('d2l-tabs: tab without matching panel');
+					return;
+				}
 				tab.setAttribute('aria-controls', `${panel.id}`);
 			});
-			this._updateAriaControlsRequested = false;
+			this.#updateAriaControlsRequested = false;
 		}, 0);
 	}
 
@@ -1047,12 +1128,12 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 	}
 
 	async #updateSelectedTab(selectedTab) {
-		const selectedPanel = this._getPanel(selectedTab.id);
 		selectedTab.tabIndex = 0;
 
 		await this.updateComplete;
 
-		selectedPanel.selected = true;
+		const selectedPanel = this._getPanel(selectedTab.id);
+		if (selectedPanel) selectedPanel.selected = true;
 		this._tabs.forEach((tab) => {
 			if (tab.id !== selectedTab.id) {
 				if (tab.selected) {

package/package.json

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