@brightspace-ui/core 3.93.2 → 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" 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/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
@@ -781,18 +794,13 @@ class Tabs extends LocalizeCoreElement(ArrowKeysMixin(SkeletonMixin(LitElement))
 		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) {
@@ -997,6 +1005,21 @@ 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;

package/custom-elements.json

@@ -12905,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",
@@ -12918,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.2",
+  "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",