@brightspace-ui/core 3.93.1 → 3.94.0

package/components/tabs/demo/tabs.html

@@ -40,12 +40,12 @@
 
 			<d2l-demo-snippet>
 				<template>
-					<d2l-tabs>
+					<d2l-tabs text="Courses">
 						<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>
+						<d2l-tab-panel labelled-by="all" slot="panels" id="all-panel">Tab content for All</d2l-tab-panel>
+						<d2l-tab-panel labelled-by="biology" slot="panels" id="biology-panel">Tab content for Biology</d2l-tab-panel>
 						<d2l-tab-panel labelled-by="chemistry" slot="panels">Tab content for Chemistry</d2l-tab-panel>
 					</d2l-tabs>
 				</template>

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

@@ -8,6 +8,7 @@ import { ArrowKeysMixin } from '../../mixins/arrow-keys/arrow-keys-mixin.js';
 import { bodyCompactStyles } from '../typography/styles.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { getFocusPseudoClass } from '../../helpers/focus.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { repeat } from 'lit/directives/repeat.js';
 import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
@@ -32,6 +33,11 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 			 * @type {number}
 			 */
 			maxToShow: { type: Number, attribute: 'max-to-show' },
+			/**
+			 * REQUIRED: ACCESSIBILITY: Accessible text for the tablist
+			 * @type {string}
+			 */
+			text: { type: String },
 			_allowScrollNext: { type: Boolean },
 			_allowScrollPrevious: { type: Boolean },
 			_defaultSlotBehavior: { state: true },
@@ -305,6 +311,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 						<div class="d2l-tabs-container-list"
 							@d2l-tab-selected="${this._handleTabSelected}"
 							@focusout="${this._handleFocusOut}"
+							aria-label="${ifDefined(this.text)}"
 							role="tablist"
 							style="${styleMap(tabsContainerListStyles)}">
 							${repeat(this._tabInfos, (tabInfo) => tabInfo.id, (tabInfo) => html`
@@ -333,7 +340,7 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 				@d2l-tab-panel-selected="${this._handlePanelSelected}"
 				@d2l-tab-panel-text-changed="${this._handlePanelTextChange}">
 				<slot @slotchange="${this._handleDefaultSlotChange}"></slot>
-				<slot name="panels"></slot>
+				<slot name="panels" @slotchange="${this._handlePanelsSlotChange}"></slot>
 			</div>
 		`;
 	}
@@ -630,6 +637,12 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 		this.requestUpdate();
 	}
 
+	_handlePanelsSlotChange() {
+		if (this._defaultSlotBehavior) return;
+
+		this.#setAriaControls();
+	}
+
 	async _handlePanelTextChange(e) {
 		const tabInfo = this._getTabInfo(e.target.id);
 		// event could be from nested tabs
@@ -725,32 +738,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,26 +786,21 @@ 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);
 		}
+		this.#setAriaControls();
 
 		await this.updateComplete;
 
 		if (!this._initialized && this._tabs.length > 0) {
 			this._initialized = true;
 		}
-
-		if (selectedTab) {
-			// set corresponding panel to selected
-			const selectedPanel = this._getPanel(selectedTab.id);
-			if (selectedPanel) selectedPanel.selected = true;
-		}
 	}
 
 	_isPositionInLeftScrollArea(position) {
@@ -1015,6 +1005,41 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 		return document.documentElement.getAttribute('dir') === 'rtl';
 	}
 
+	#setAriaControls() {
+		// debounce so only runs once when tabs/panels slots changing
+		if (this._updateAriaControlsRequested) return;
+
+		this._updateAriaControlsRequested = true;
+		setTimeout(() => {
+			this._tabs?.forEach((tab) => {
+				const panel = this._getPanel(tab.id);
+				if (!panel) return;
+				tab.setAttribute('aria-controls', `${panel.id}`);
+			});
+			this._updateAriaControlsRequested = false;
+		}, 0);
+	}
+
+	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",
@@ -12894,6 +12905,11 @@
       "path": "./components/tabs/tabs.js",
       "description": "A component for tabbed content. It supports the \"d2l-tab-panel\" component for the content, renders tabs responsively, and provides virtual scrolling for large tab lists.",
       "attributes": [
+        {
+          "name": "text",
+          "description": "REQUIRED: ACCESSIBILITY: Accessible text for the tablist",
+          "type": "string"
+        },
         {
           "name": "max-to-show",
           "description": "Limit the number of tabs to initially display",
@@ -12907,6 +12923,12 @@
         }
       ],
       "properties": [
+        {
+          "name": "text",
+          "attribute": "text",
+          "description": "REQUIRED: ACCESSIBILITY: Accessible text for the tablist",
+          "type": "string"
+        },
         {
           "name": "maxToShow",
           "attribute": "max-to-show",

package/package.json

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