@brightspace-ui/core 3.93.1 → 3.93.2

package/components/tabs/demo/tabs.html

@@ -42,7 +42,7 @@
 				<template>
 					<d2l-tabs>
 						<d2l-tab id="all" text="All" slot="tabs"></d2l-tab>
-						<d2l-tab id="biology" text="Biology" slot="tabs"></d2l-tab>
+						<d2l-tab id="biology" text="Biology" slot="tabs" selected></d2l-tab>
 						<d2l-tab id="chemistry" text="Chemistry" slot="tabs"></d2l-tab>
 						<d2l-tab-panel labelled-by="all" slot="panels">Tab content for All</d2l-tab-panel>
 						<d2l-tab-panel labelled-by="biology" slot="panels">Tab content for Biology</d2l-tab-panel>

package/components/tabs/tab-mixin.js

@@ -13,7 +13,8 @@ export const TabMixin = superclass => class extends SkeletonMixin(superclass) {
 		return {
 			selected: { type: Boolean, reflect: true },
 			// eslint-disable-next-line lit/no-native-attributes
-			role: { type: String, reflect: true }
+			role: { type: String, reflect: true },
+			tabIndex: { type: Number, reflect: true, attribute: 'tabindex' }
 		};
 	}
 
@@ -42,18 +43,18 @@ export const TabMixin = superclass => class extends SkeletonMixin(superclass) {
 				margin-inline-start: 0;
 				width: calc(100% - 0.6rem);
 			}
-			:host([aria-selected="true"]:focus) {
+			:host([selected]:focus) {
 				text-decoration: none;
 			}
 			:host(:hover) {
 				color: var(--d2l-color-celestine);
 				cursor: pointer;
 			}
-			:host([aria-selected="true"]:hover) {
+			:host([selected]:hover) {
 				color: inherit;
 				cursor: default;
 			}
-			:host([aria-selected="true"]) .d2l-tab-selected-indicator {
+			:host([selected]) .d2l-tab-selected-indicator {
 				display: block;
 			}
 		`];
@@ -66,6 +67,7 @@ export const TabMixin = superclass => class extends SkeletonMixin(superclass) {
 		super();
 		this.role = 'tab';
 		this.selected = false;
+		this.tabIndex = -1;
 	}
 
 	connectedCallback() {
@@ -101,7 +103,7 @@ export const TabMixin = superclass => class extends SkeletonMixin(superclass) {
 		super.update(changedProperties);
 
 		if (changedProperties.has('selected')) {
-			this.ariaSelected = this.selected;
+			this.ariaSelected = `${this.selected}`;
 			if (this.selected) {
 				this.dispatchEvent(new CustomEvent(
 					'd2l-tab-selected', { bubbles: true, composed: true }

package/components/tabs/tabs.js

@@ -725,32 +725,14 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 
 	}
 
-	async _handleTabSelected(e) {
+	_handleTabSelected(e) {
 		if (this._defaultSlotBehavior) {
 			this._handleTabSelectedDefaultSlotBehavior(e);
 			return;
 		}
 
 		const selectedTab = e.target;
-		const selectedPanel = this._getPanel(e.target.id);
-		selectedTab.tabIndex = 0;
-
-		await this.updateComplete;
-
-		selectedPanel.selected = true;
-		this._tabs.forEach((tab) => {
-			if (tab.id !== selectedTab.id) {
-				if (tab.selected) {
-					tab.selected = false;
-					const panel = this._getPanel(tab.id);
-					// panel may not exist if it's being removed
-					if (panel) panel.selected = false;
-				}
-				if (tab.tabIndex === 0) tab.tabIndex = -1;
-			}
-		});
-
-		this.requestUpdate();
+		this.#updateSelectedTab(selectedTab);
 	}
 
 	// remove after d2l-tab/d2l-tab-panel backport
@@ -791,13 +773,13 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 
 		if (!this._initialized && this._tabs.length === 0) return;
 
-		let selectedTab;
-		if (this._tabs.length > 0) {
+		let selectedTab = this._tabs.find((tab) => tab.selected && tab.state !== 'removing');
+		if (!selectedTab) {
 			selectedTab = this._tabs.find((tab) => tab.state !== 'removing');
-			if (selectedTab) {
-				selectedTab.selected = true;
-				selectedTab.tabIndex = 0;
-			}
+			if (selectedTab) selectedTab.selected = true;
+		}
+		if (selectedTab) {
+			this.#updateSelectedTab(selectedTab);
 		}
 
 		await this.updateComplete;
@@ -1015,6 +997,26 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 		return document.documentElement.getAttribute('dir') === 'rtl';
 	}
 
+	async #updateSelectedTab(selectedTab) {
+		const selectedPanel = this._getPanel(selectedTab.id);
+		selectedTab.tabIndex = 0;
+
+		await this.updateComplete;
+
+		selectedPanel.selected = true;
+		this._tabs.forEach((tab) => {
+			if (tab.id !== selectedTab.id) {
+				if (tab.selected) {
+					tab.selected = false;
+					const panel = this._getPanel(tab.id);
+					// panel may not exist if it's being removed
+					if (panel) panel.selected = false;
+				}
+				if (tab.tabIndex === 0) tab.tabIndex = -1;
+			}
+		});
+	}
+
 }
 
 customElements.define('d2l-tabs', Tabs);

package/custom-elements.json

@@ -12848,6 +12848,11 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "tabindex",
+          "type": "number",
+          "default": "-1"
+        },
         {
           "name": "skeleton",
           "description": "Render the component as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton).",
@@ -12873,6 +12878,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "tabIndex",
+          "attribute": "tabindex",
+          "type": "number",
+          "default": "-1"
+        },
         {
           "name": "skeleton",
           "attribute": "skeleton",

package/package.json

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