From 98d1bb2802643656e2b1bfb1d0c1f39d5e5224a7 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 24 Mar 2026 21:03:21 +0000
Subject: [PATCH 1/3] Initial plan


From c68fc8df65f43d04103cf74162b89bb5f14a18c5 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 24 Mar 2026 21:25:49 +0000
Subject: [PATCH 2/3] fix review feedback for slider tabs and radio docs

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>
Agent-Logs-Url: https://github.com/bQuery/ui/sessions/e4630707-5db7-4123-9766-51140bcfcaad
---
 docs/components/radio.md          |  2 +-
 src/components/slider/BqSlider.ts |  6 ++++
 src/components/tabs/BqTabs.ts     | 59 ++++++++++++++++++++++---------
 tests/slider-pagination.test.ts   | 18 ++++++++++
 tests/tabs-tooltip.test.ts        | 38 ++++++++++++++++++++
 5 files changed, 105 insertions(+), 18 deletions(-)

diff --git a/docs/components/radio.md b/docs/components/radio.md
index f7048d7..edb36a0 100644
--- a/docs/components/radio.md
+++ b/docs/components/radio.md
@@ -75,4 +75,4 @@ The component creates a hidden input proxy for native `<form>` submission. The p
 
 - Each radio renders a native `<input type="radio">` inside the shadow DOM for full keyboard support.
 - The label is associated with the input via a wrapping `<label>` element.
-- Use the `required` prop to mark mandatory radio fields; the required indicator is rendered visually and via `aria-required`.
+- Use the `required` prop to mark mandatory radio fields; the required indicator is rendered visually and conveyed through the native `required` attribute on the internal radio input.
diff --git a/src/components/slider/BqSlider.ts b/src/components/slider/BqSlider.ts
index 62710e5..09d5769 100644
--- a/src/components/slider/BqSlider.ts
+++ b/src/components/slider/BqSlider.ts
@@ -55,6 +55,10 @@ const definition: ComponentDefinition<BqSliderProps> = {
   `,
   connected() {
     const self = this;
+    const syncInputAccessibility = (input: HTMLInputElement, value: number) => {
+      input.setAttribute('aria-valuenow', String(value));
+      input.setAttribute('aria-valuetext', t('slider.valueText', { value }));
+    };
 
     // Form proxy for native <form> participation
     const name = self.getAttribute('name') ?? '';
@@ -69,6 +73,7 @@ const definition: ComponentDefinition<BqSliderProps> = {
       const v = Number(input.value);
       // Update form proxy and value display directly without re-rendering (prevents jank during drag)
       proxy.setValue(String(v));
+      syncInputAccessibility(input, v);
       const valueSpan = self.shadowRoot?.querySelector('.value');
       if (valueSpan) valueSpan.textContent = String(v);
       self.dispatchEvent(
@@ -86,6 +91,7 @@ const definition: ComponentDefinition<BqSliderProps> = {
       // Commit value to attribute on change (drag end) — triggers one clean re-render
       self.setAttribute('value', String(v));
       proxy.setValue(String(v));
+      syncInputAccessibility(input, v);
       self.dispatchEvent(
         new CustomEvent('bq-change', {
           detail: { value: v },
diff --git a/src/components/tabs/BqTabs.ts b/src/components/tabs/BqTabs.ts
index be05075..4f5882b 100644
--- a/src/components/tabs/BqTabs.ts
+++ b/src/components/tabs/BqTabs.ts
@@ -14,8 +14,19 @@ import { getBaseStyles } from '../../utils/styles.js';
 
 type BqTabsProps = { 'active-tab': string; variant: string };
 
-function getPanelId(tabId: string): string {
-  return `panel-${tabId}`;
+function getAriaIdPart(tabId: string): string | null {
+  const trimmed = tabId.trim();
+  return trimmed ? encodeURIComponent(trimmed) : null;
+}
+
+function getTabButtonId(tabId: string): string | null {
+  const ariaIdPart = getAriaIdPart(tabId);
+  return ariaIdPart ? `tab-${ariaIdPart}` : null;
+}
+
+function getPanelId(tabId: string): string | null {
+  const ariaIdPart = getAriaIdPart(tabId);
+  return ariaIdPart ? `panel-${ariaIdPart}` : null;
 }
 
 const definition: ComponentDefinition<BqTabsProps> = {
@@ -155,19 +166,31 @@ const definition: ComponentDefinition<BqTabsProps> = {
       const tabId = panel.getAttribute('data-tab') ?? '';
       const isActive = tabId === active;
       const panelId = panel.id || getPanelId(tabId);
+      const button = Array.from(
+        this.shadowRoot?.querySelectorAll<HTMLElement>('.tab[data-tab-id]') ?? []
+      ).find((candidate) => candidate.getAttribute('data-tab-id') === tabId);
+      const labelledBy =
+        button && button.id ? button.id : button ? getTabButtonId(tabId) : null;
 
-      panel.id = panelId;
+      if (panelId) {
+        panel.id = panelId;
+      }
       panel.hidden = !isActive;
       panel.setAttribute('role', 'tabpanel');
       panel.setAttribute('tabindex', isActive ? '0' : '-1');
-      panel.setAttribute('aria-labelledby', `tab-${tabId}`);
+      if (labelledBy) {
+        panel.setAttribute('aria-labelledby', labelledBy);
+      } else {
+        panel.removeAttribute('aria-labelledby');
+      }
       panel.setAttribute('aria-hidden', isActive ? 'false' : 'true');
-
-      const button = Array.from(
-        this.shadowRoot?.querySelectorAll<HTMLElement>('.tab[data-tab-id]') ??
-          []
-      ).find((candidate) => candidate.getAttribute('data-tab-id') === tabId);
-      button?.setAttribute('aria-controls', panelId);
+      if (button) {
+        if (panelId) {
+          button.setAttribute('aria-controls', panelId);
+        } else {
+          button.removeAttribute('aria-controls');
+        }
+      }
     });
   },
   render({ props, state }) {
@@ -177,17 +200,19 @@ const definition: ComponentDefinition<BqTabsProps> = {
         | undefined) ?? [];
     const active = props['active-tab'] || items[0]?.id || '';
     const tabsHtml = items
-      .map(
-        (tab) => `
-      <button part="tab" class="tab" data-variant="${escapeHtml(props.variant)}"
-        role="tab" id="tab-${escapeHtml(tab.id)}" data-tab-id="${escapeHtml(tab.id)}"
+      .map((tab) => {
+        const buttonId = getTabButtonId(tab.id);
+        const panelId = getPanelId(tab.id);
+        return `
+       <button part="tab" class="tab" data-variant="${escapeHtml(props.variant)}"
+        role="tab" ${buttonId ? `id="${escapeHtml(buttonId)}"` : ''} data-tab-id="${escapeHtml(tab.id)}"
         aria-selected="${tab.id === active ? 'true' : 'false'}"
-        aria-controls="${escapeHtml(getPanelId(tab.id))}"
+        ${panelId ? `aria-controls="${escapeHtml(panelId)}"` : ''}
         tabindex="${tab.id === active ? '0' : '-1'}"
         ${tab.disabled ? 'disabled aria-disabled="true"' : ''}
       >${escapeHtml(tab.label)}</button>
-    `
-      )
+    `;
+      })
       .join('');
     return html`
       <div class="tabs" part="tabs">
diff --git a/tests/slider-pagination.test.ts b/tests/slider-pagination.test.ts
index e0e592b..5e2c354 100644
--- a/tests/slider-pagination.test.ts
+++ b/tests/slider-pagination.test.ts
@@ -72,6 +72,24 @@ describe('BqSlider', () => {
     expect(input?.getAttribute('aria-valuetext')).toBe('Value: 50');
   });
 
+  it('should update live value and ARIA state during input without re-rendering', () => {
+    const el = doc.createElement('bq-slider');
+    el.setAttribute('show-value', '');
+    el.setAttribute('value', '40');
+    doc.body.appendChild(el);
+
+    const input = el.shadowRoot?.querySelector('input') as HTMLInputElement;
+    const valueEl = el.shadowRoot?.querySelector('.value');
+
+    input.value = '65';
+    input.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+
+    expect(el.getAttribute('value')).toBe('40');
+    expect(valueEl?.textContent).toBe('65');
+    expect(input.getAttribute('aria-valuenow')).toBe('65');
+    expect(input.getAttribute('aria-valuetext')).toBe('Value: 65');
+  });
+
   it('should create form proxy hidden input', () => {
     const el = doc.createElement('bq-slider');
     el.setAttribute('name', 'volume');
diff --git a/tests/tabs-tooltip.test.ts b/tests/tabs-tooltip.test.ts
index 2654da0..01b0842 100644
--- a/tests/tabs-tooltip.test.ts
+++ b/tests/tabs-tooltip.test.ts
@@ -118,6 +118,44 @@ describe('BqTabs', () => {
     expect(panelTwo?.getAttribute('tabindex')).toBe('0');
     expect(panelTwo?.getAttribute('aria-hidden')).toBe('false');
   });
+
+  it('should avoid invalid generated aria ids when a tab item has no id', async () => {
+    const el = doc.createElement('bq-tabs');
+    el.innerHTML = `
+      <div data-tab-item label="One"></div>
+      <div data-tab="one">Panel one</div>
+    `;
+    doc.body.appendChild(el);
+
+    await waitForFrame();
+
+    const tab = el.shadowRoot?.querySelector('[role="tab"]');
+    const panel = el.querySelector('[data-tab="one"]');
+
+    expect(tab?.getAttribute('id')).toBeNull();
+    expect(tab?.getAttribute('aria-controls')).toBeNull();
+    expect(panel?.getAttribute('aria-labelledby')).toBeNull();
+  });
+
+  it('should generate encoded aria ids for tab values that include spaces', async () => {
+    const el = doc.createElement('bq-tabs');
+    el.setAttribute('active-tab', 'needs space');
+    el.innerHTML = `
+      <div data-tab-item id="needs space" label="Needs Space"></div>
+      <div data-tab="needs space">Panel</div>
+    `;
+    doc.body.appendChild(el);
+
+    await waitForFrame();
+
+    const tab = el.shadowRoot?.querySelector('[role="tab"]');
+    const panel = el.querySelector('[data-tab="needs space"]');
+
+    expect(tab?.getAttribute('id')).toBe('tab-needs%20space');
+    expect(tab?.getAttribute('aria-controls')).toBe('panel-needs%20space');
+    expect(panel?.id).toBe('panel-needs%20space');
+    expect(panel?.getAttribute('aria-labelledby')).toBe('tab-needs%20space');
+  });
 });
 
 describe('BqTooltip', () => {

From df04bdb21abf1cbf24c42b402a1d8bbf9edeccff Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 24 Mar 2026 21:33:00 +0000
Subject: [PATCH 3/3] refine review follow-up helpers

Co-authored-by: JosunLP <20913954+JosunLP@users.noreply.github.com>
Agent-Logs-Url: https://github.com/bQuery/ui/sessions/e4630707-5db7-4123-9766-51140bcfcaad
---
 src/components/slider/BqSlider.ts | 9 +++++----
 src/components/tabs/BqTabs.ts     | 3 +--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/slider/BqSlider.ts b/src/components/slider/BqSlider.ts
index 09d5769..6f6d72c 100644
--- a/src/components/slider/BqSlider.ts
+++ b/src/components/slider/BqSlider.ts
@@ -28,6 +28,11 @@ type BqSliderProps = {
   'show-value': boolean;
 };
 
+function syncInputAccessibility(input: HTMLInputElement, value: number): void {
+  input.setAttribute('aria-valuenow', String(value));
+  input.setAttribute('aria-valuetext', t('slider.valueText', { value }));
+}
+
 const definition: ComponentDefinition<BqSliderProps> = {
   props: {
     value: { type: Number, default: 50 },
@@ -55,10 +60,6 @@ const definition: ComponentDefinition<BqSliderProps> = {
   `,
   connected() {
     const self = this;
-    const syncInputAccessibility = (input: HTMLInputElement, value: number) => {
-      input.setAttribute('aria-valuenow', String(value));
-      input.setAttribute('aria-valuetext', t('slider.valueText', { value }));
-    };
 
     // Form proxy for native <form> participation
     const name = self.getAttribute('name') ?? '';
diff --git a/src/components/tabs/BqTabs.ts b/src/components/tabs/BqTabs.ts
index 4f5882b..c6cc78e 100644
--- a/src/components/tabs/BqTabs.ts
+++ b/src/components/tabs/BqTabs.ts
@@ -169,8 +169,7 @@ const definition: ComponentDefinition<BqTabsProps> = {
       const button = Array.from(
         this.shadowRoot?.querySelectorAll<HTMLElement>('.tab[data-tab-id]') ?? []
       ).find((candidate) => candidate.getAttribute('data-tab-id') === tabId);
-      const labelledBy =
-        button && button.id ? button.id : button ? getTabButtonId(tabId) : null;
+      const labelledBy = button?.id || (button ? getTabButtonId(tabId) : null);
 
       if (panelId) {
         panel.id = panelId;