feat: fix tab content IDs and enhance accessibility with aria attributes

Author: caperaven

app/tab-sheet/tab-sheet.html

@@ -6,6 +6,6 @@ <h2>Tab Sheet</h2>
     <div slot="tab" for="tab3">Tab 3</div>
 
     <div id="tab1">Tab 1 content</div>
-    <div id="tab1">Tab 2 content</div>
-    <div id="tab1">Tab 3 content</div>
+    <div id="tab2">Tab 2 content</div>
+    <div id="tab3">Tab 3 content</div>
 </tab-sheet>

components/tab-sheet/tab-sheet.css

@@ -1,4 +1,6 @@
 :host {
+    --cl-focused-fg: var(--cl-focused);
+    --cl-focused-bg: white;
     display: flex;
 }
 
@@ -13,10 +15,12 @@
     flex-direction: row;
     align-items: center;
     justify-content: start;
+    border-bottom: 1px solid var(--cl-border);
 }
 
 .content {
     flex: 1;
+    padding: var(--padding);
 }
 
 :host(.bottom) .tab-sheet {
@@ -34,3 +38,21 @@
 :host(.right) .header, :host(.left) .header {
     flex-direction: column;
 }
+
+::slotted([aria-hidden]) {
+    display: none;
+}
+
+.header ::slotted(*) {
+    margin: 0;
+    padding: var(--padding, 0.5rem);
+    cursor: pointer;
+    background: #f0f0f0;
+}
+
+/* Add styles for the selected slotted items */
+.header ::slotted([aria-selected="true"]) {
+    color: var(--cl-focused-fg);
+    background: var(--cl-focused-bg);
+    border: 1px solid var(--cl-border);
+}

components/tab-sheet/tab-sheet.js

@@ -2,10 +2,68 @@ import { HTML } from "./tab-sheet.html.js";
 export class TabSheet extends HTMLElement {
     static name = Object.freeze("tab-sheet");
 
+    #clickHandler = this.#click.bind(this);
+
     constructor() {
         super();
         this.attachShadow({ mode: "open" });
         this.shadowRoot.innerHTML = HTML;
+        this.style.display = "none";
+    }
+
+    connectedCallback() {
+        // 1. get all elements in the <slot> element.
+        const slot = this.shadowRoot.querySelector(".content slot");
+        const elements = slot.assignedElements();
+
+        // 2. for each element, set aria-hidden to true
+        for (const element of elements) {
+            element.setAttribute("aria-hidden", "true");
+        }
+
+        requestAnimationFrame(() => {
+            this.#selectFirstTab();
+            this.style.display = "flex";
+
+            this.shadowRoot.querySelector(".header").addEventListener("click", this.#clickHandler);
+        })
+    }
+
+    disconnectedCallback() {
+        this.shadowRoot.querySelector(".header").removeEventListener("click", this.#clickHandler);
+    }
+
+    #click(event) {
+        const target = event.composedPath()[0];
+        const id = target.getAttribute("for");
+        if (id == null) return;
+
+        this.selectTab(id);
+    }
+
+    #selectFirstTab() {
+        const slot = this.shadowRoot.querySelector(".header slot");
+        const elements = slot.assignedElements();
+        if (elements.length === 0) return;
+
+        const firstTab = elements[0];
+        const id = firstTab.getAttribute("for");
+        this.selectTab(id);
+    }
+
+    selectTab(id) {
+        const currentTab = this.querySelector("[aria-selected]");
+        if (currentTab != null) {
+            currentTab.removeAttribute("aria-selected");
+            const currentId = currentTab.getAttribute("for");
+            const currentContent = this.querySelector(`#${currentId}`);
+            currentContent.setAttribute("aria-hidden", "true");
+        }
+
+        const newTab = this .querySelector(`[for="${id}"]`);
+        newTab.setAttribute("aria-selected", "true");
+        const newContent = this.querySelector(`#${id}`);
+        newContent.removeAttribute("aria-hidden");
     }
 }