From 2322d781aa356ecc72d6bdbd6a177b29bddb3c7b Mon Sep 17 00:00:00 2001
From: Lin Latt <lattln.tech@gmail.com>
Date: Wed, 11 Nov 2026 22:24:28 -0500
Subject: [PATCH 1/4] fix(Select): guard empty results and retain modal popup
 scope

---
 src/components/Select/Select.stories.tsx |  2 +-
 src/components/Select/Select.test.tsx    | 34 ++++++++++++++++++++++++
 src/components/Select/Select.tsx         | 16 +++++++----
 3 files changed, 46 insertions(+), 6 deletions(-)

diff --git a/src/components/Select/Select.stories.tsx b/src/components/Select/Select.stories.tsx
index 14c28203b..26fb42f5d 100644
--- a/src/components/Select/Select.stories.tsx
+++ b/src/components/Select/Select.stories.tsx
@@ -194,7 +194,7 @@ const [specialty, setSpecialty] = useState('');
 - Accessibility: trigger is \`<button role="combobox" aria-haspopup="listbox" aria-expanded aria-controls>\` with \`aria-invalid\`, \`aria-required\` and \`aria-describedby\` → error or helper text; the \`<label htmlFor>\` targets the trigger's \`id\`. Options are \`<li role="option" aria-selected>\`, groups \`<li role="presentation">\` + \`<ul role="group" aria-label>\`, \`aria-multiselectable\` in \`multiple\` mode. Keyboard: ArrowUp/Down, Home/End, Enter/Space, Escape (returns focus to the trigger), typeahead when not \`searchable\`. **No \`aria-activedescendant\`** — the highlighted option is marked with \`data-highlighted\`, so screen readers are not told which option the arrow keys reached until it is selected.
 - Not a form control: there is no \`name\` and nothing is submitted. Keep the value in state and post it yourself.
 - Filtering is a case-insensitive \`includes\` on \`label\` only; \`multiple\` shows selected labels joined with \`", "\` and truncates.
-- The listbox is portaled to \`<body>\` with fixed positioning (\`useAnchoredPosition\`, width matches trigger, max height 300px) so it escapes \`overflow: hidden\` ancestors.
+- The listbox uses a fixed-position portal (\`useAnchoredPosition\`, width matches trigger, max height 300px). Inside a dialog it stays within that dialog's focus and accessibility scope; otherwise it portals to \`<body>\`.
 - Strings default to English but are props: \`placeholder\` ("Select an option"), \`searchPlaceholder\` ("Search..."), \`noResultsText\` ("No results found"). The search box's \`aria-label="Search options"\` and the listbox fallback \`aria-label="Options"\` are hard-coded.
 - RTL: floating label uses logical \`start-3\`; the chevron sits at the flex end. Theming: \`border-input\`, \`bg-background\`, popover \`bg-card border-border\`, selected option \`bg-primary-50 dark:bg-primary-950\`. Depends on \`class-variance-authority\` and \`Input\`'s \`RequiredMark\`.`,
       },
diff --git a/src/components/Select/Select.test.tsx b/src/components/Select/Select.test.tsx
index ae731f65a..28375c19c 100644
--- a/src/components/Select/Select.test.tsx
+++ b/src/components/Select/Select.test.tsx
@@ -16,6 +16,19 @@ const LOCATION_TYPES: SelectOption[] = [
 ];
 
 describe('Select portals', () => {
+  it('keeps searchable popups inside the containing modal dialog', async () => {
+    const user = userEvent.setup();
+    renderWithTheme(
+      <div role="dialog" aria-modal="true" aria-label="Compose">
+        <Select label="Category" searchable options={LOCATION_TYPES} />
+      </div>
+    );
+    await user.click(screen.getByRole('combobox', { name: 'Category' }));
+    const search = screen.getByRole('textbox', { name: 'Search options' });
+    expect(screen.getByRole('dialog')).toContainElement(search);
+    expect(search).toHaveFocus();
+  });
+
   it('selects an option when nested inside a Dropdown portal', async () => {
     const user = userEvent.setup();
     const onValueChange = vi.fn();
@@ -91,6 +104,27 @@ describe('Select portals', () => {
 });
 
 describe('Select typeahead', () => {
+  it.each(['ArrowDown', 'ArrowUp', 'Home', 'End'])(
+    'does not select a missing option after a no-match search and %s',
+    async (key) => {
+      const user = userEvent.setup();
+      const onValueChange = vi.fn();
+      renderWithTheme(
+        <Select
+          label="Category"
+          searchable
+          options={LOCATION_TYPES}
+          onValueChange={onValueChange}
+        />
+      );
+      await user.click(screen.getByRole('combobox', { name: 'Category' }));
+      await user.type(screen.getByRole('textbox'), 'no such category');
+      await user.keyboard(`{${key}}{Enter}`);
+      expect(onValueChange).not.toHaveBeenCalled();
+      expect(screen.getByText('No results found')).toBeVisible();
+    }
+  );
+
   it.each(['click', 'keyboard'])(
     'focuses search after positioning on %s open so typing needs no extra click',
     async (method) => {
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
index e76a8f4bd..06b348a0c 100644
--- a/src/components/Select/Select.tsx
+++ b/src/components/Select/Select.tsx
@@ -469,7 +469,11 @@ function Select(props: SelectProps) {
             setIsOpen(true);
           } else {
             setHighlightedIndex((prev) =>
-              prev < filteredFlatOptions.length - 1 ? prev + 1 : 0
+              filteredFlatOptions.length === 0
+                ? -1
+                : prev < filteredFlatOptions.length - 1
+                  ? prev + 1
+                  : 0
             );
           }
           break;
@@ -487,14 +491,15 @@ function Select(props: SelectProps) {
         case ' ':
           e.preventDefault();
           if (isOpen && highlightedIndex >= 0) {
-            handleValueChange(filteredFlatOptions[highlightedIndex].value);
+            const option = filteredFlatOptions[highlightedIndex];
+            if (option) handleValueChange(option.value);
           } else if (!isOpen) {
             setIsOpen(true);
           }
           break;
         case 'Home':
           e.preventDefault();
-          setHighlightedIndex(0);
+          setHighlightedIndex(filteredFlatOptions.length > 0 ? 0 : -1);
           break;
         case 'End':
           e.preventDefault();
@@ -662,7 +667,7 @@ function Select(props: SelectProps) {
           </label>
         )}
 
-        {/* Dropdown (portaled to body to avoid overflow clipping) */}
+        {/* Keep modal popups within their focus and accessibility scope. */}
         {isOpen &&
           createPortal(
             <div
@@ -776,7 +781,8 @@ function Select(props: SelectProps) {
                 )}
               </ul>
             </div>,
-            document.body
+            triggerRef.current?.closest('[role="dialog"], dialog') ??
+              document.body
           )}
       </div>
 

From e93dbba272f39b5a655fc64b6b3bf83a626d44f3 Mon Sep 17 00:00:00 2001
From: Lin Latt <lattln.tech@gmail.com>
Date: Wed, 11 Nov 2026 22:37:59 -0500
Subject: [PATCH 2/4] fix(Select): preserve transformed modal geometry and
 dynamic focus scope

---
 src/components/Select/Select.stories.tsx |  2 +-
 src/components/Select/Select.test.tsx    | 35 ++++++++++++++++
 src/components/Select/Select.tsx         | 15 +++++--
 src/hooks/useFocusTrap.ts                | 19 +++++----
 tests/visual/components.spec.ts          | 52 ++++++++++++++++++++----
 5 files changed, 102 insertions(+), 21 deletions(-)

diff --git a/src/components/Select/Select.stories.tsx b/src/components/Select/Select.stories.tsx
index 26fb42f5d..e45ba1f9b 100644
--- a/src/components/Select/Select.stories.tsx
+++ b/src/components/Select/Select.stories.tsx
@@ -194,7 +194,7 @@ const [specialty, setSpecialty] = useState('');
 - Accessibility: trigger is \`<button role="combobox" aria-haspopup="listbox" aria-expanded aria-controls>\` with \`aria-invalid\`, \`aria-required\` and \`aria-describedby\` → error or helper text; the \`<label htmlFor>\` targets the trigger's \`id\`. Options are \`<li role="option" aria-selected>\`, groups \`<li role="presentation">\` + \`<ul role="group" aria-label>\`, \`aria-multiselectable\` in \`multiple\` mode. Keyboard: ArrowUp/Down, Home/End, Enter/Space, Escape (returns focus to the trigger), typeahead when not \`searchable\`. **No \`aria-activedescendant\`** — the highlighted option is marked with \`data-highlighted\`, so screen readers are not told which option the arrow keys reached until it is selected.
 - Not a form control: there is no \`name\` and nothing is submitted. Keep the value in state and post it yourself.
 - Filtering is a case-insensitive \`includes\` on \`label\` only; \`multiple\` shows selected labels joined with \`", "\` and truncates.
-- The listbox uses a fixed-position portal (\`useAnchoredPosition\`, width matches trigger, max height 300px). Inside a dialog it stays within that dialog's focus and accessibility scope; otherwise it portals to \`<body>\`.
+- The listbox uses a fixed-position portal (\`useAnchoredPosition\`, width matches trigger, max height 300px). Inside a dialog (including an alert dialog) it stays within that dialog's focus and accessibility scope; otherwise it portals to \`<body>\`. A manual popover places it in the browser's top layer so transformed dialog containers do not offset its viewport coordinates.
 - Strings default to English but are props: \`placeholder\` ("Select an option"), \`searchPlaceholder\` ("Search..."), \`noResultsText\` ("No results found"). The search box's \`aria-label="Search options"\` and the listbox fallback \`aria-label="Options"\` are hard-coded.
 - RTL: floating label uses logical \`start-3\`; the chevron sits at the flex end. Theming: \`border-input\`, \`bg-background\`, popover \`bg-card border-border\`, selected option \`bg-primary-50 dark:bg-primary-950\`. Depends on \`class-variance-authority\` and \`Input\`'s \`RequiredMark\`.`,
       },
diff --git a/src/components/Select/Select.test.tsx b/src/components/Select/Select.test.tsx
index 28375c19c..15d0ade3a 100644
--- a/src/components/Select/Select.test.tsx
+++ b/src/components/Select/Select.test.tsx
@@ -3,6 +3,7 @@ import { fireEvent, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { renderWithTheme } from '../../test/test-utils';
 import { Dropdown, DropdownContent } from '../Dropdown';
+import { Modal } from '../Modal';
 import { Select, type SelectOption } from './Select';
 
 const LOCATION_TYPES: SelectOption[] = [
@@ -16,6 +17,40 @@ const LOCATION_TYPES: SelectOption[] = [
 ];
 
 describe('Select portals', () => {
+  it('contains Tab navigation after opening search in the real Modal', async () => {
+    const user = userEvent.setup();
+    renderWithTheme(
+      <>
+        <button>Outside</button>
+        <Modal open onOpenChange={vi.fn()} aria-label="Compose">
+          <Select label="Category" searchable options={LOCATION_TYPES} />
+        </Modal>
+      </>
+    );
+    const trigger = screen.getByRole('combobox', { name: 'Category' });
+    await user.click(trigger);
+    const search = screen.getByRole('textbox', { name: 'Search options' });
+    await user.type(search, 'no such category');
+    await user.tab();
+    expect(trigger).toHaveFocus();
+    await user.tab({ shift: true });
+    expect(search).toHaveFocus();
+    expect(screen.getByRole('button', { name: 'Outside' })).not.toHaveFocus();
+  });
+
+  it('keeps searchable popups inside alert dialogs', async () => {
+    const user = userEvent.setup();
+    renderWithTheme(
+      <div role="alertdialog" aria-modal="true" aria-label="Confirm">
+        <Select label="Category" searchable options={LOCATION_TYPES} />
+      </div>
+    );
+    await user.click(screen.getByRole('combobox', { name: 'Category' }));
+    expect(screen.getByRole('alertdialog')).toContainElement(
+      screen.getByRole('textbox', { name: 'Search options' })
+    );
+  });
+
   it('keeps searchable popups inside the containing modal dialog', async () => {
     const user = userEvent.setup();
     renderWithTheme(
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
index 06b348a0c..2c3d5551b 100644
--- a/src/components/Select/Select.tsx
+++ b/src/components/Select/Select.tsx
@@ -675,8 +675,16 @@ function Select(props: SelectProps) {
               ref={(node) => {
                 dropdownRef.current = node;
                 floatingRef.current = node;
+                // The top layer keeps viewport positioning valid inside transformed dialogs.
+                node?.showPopover?.();
               }}
-              style={dropdownStyle}
+              popover={
+                typeof HTMLElement !== 'undefined' &&
+                'showPopover' in HTMLElement.prototype
+                  ? 'manual'
+                  : undefined
+              }
+              style={{ inset: 'auto', margin: 0, padding: 0, ...dropdownStyle }}
               className={cn(
                 'border-border bg-card rounded-lg border shadow-lg',
                 'flex flex-col overflow-hidden',
@@ -781,8 +789,9 @@ function Select(props: SelectProps) {
                 )}
               </ul>
             </div>,
-            triggerRef.current?.closest('[role="dialog"], dialog') ??
-              document.body
+            triggerRef.current?.closest(
+              '[role="dialog"], [role="alertdialog"], dialog'
+            ) ?? document.body
           )}
       </div>
 
diff --git a/src/hooks/useFocusTrap.ts b/src/hooks/useFocusTrap.ts
index ecd08d44f..57449d3ce 100644
--- a/src/hooks/useFocusTrap.ts
+++ b/src/hooks/useFocusTrap.ts
@@ -31,21 +31,22 @@ export function useFocusTrap<T extends HTMLElement>(
     if (!enabled || !containerRef.current || isStorybookDocsMode()) return;
 
     const container = containerRef.current;
-    const focusableElements = container.querySelectorAll<HTMLElement>(
-      'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
-    );
-
-    if (focusableElements.length === 0) return;
-
-    const firstElement = focusableElements[0];
-    const lastElement = focusableElements[focusableElements.length - 1];
+    const getFocusableElements = () =>
+      container.querySelectorAll<HTMLElement>(
+        'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+      );
 
     // Focus the first element when trap is enabled
-    firstElement.focus();
+    getFocusableElements()[0]?.focus();
 
     const handleKeyDown = (event: globalThis.KeyboardEvent) => {
       if (event.key !== 'Tab') return;
 
+      const focusableElements = getFocusableElements();
+      const firstElement = focusableElements[0];
+      const lastElement = focusableElements[focusableElements.length - 1];
+      if (!firstElement || !lastElement) return;
+
       if (event.shiftKey) {
         // Shift + Tab
         if (document.activeElement === firstElement) {
diff --git a/tests/visual/components.spec.ts b/tests/visual/components.spec.ts
index 958e42064..8f725c6ed 100644
--- a/tests/visual/components.spec.ts
+++ b/tests/visual/components.spec.ts
@@ -258,7 +258,10 @@ test.describe('Visual Regression Tests - Core Components', () => {
   test('RichMediaCaptureEditor - Attach file round-trips into markdown via uploadHandler', async ({
     page,
   }) => {
-    await gotoStory(page, 'editors-richmediacaptureeditor--with-upload-handler');
+    await gotoStory(
+      page,
+      'editors-richmediacaptureeditor--with-upload-handler'
+    );
     // Insertion happens at the caret, exactly like paste — put it in the
     // paragraph (markdown headings cannot carry images through serialization).
     await page
@@ -266,13 +269,11 @@ test.describe('Visual Regression Tests - Core Components', () => {
       .click();
     // The unrestricted hidden input backs "Attach file" (the other is
     // accept="image/*" for Capture image).
-    await page
-      .locator('input[type="file"]:not([accept])')
-      .setInputFiles({
-        name: 'note-photo.png',
-        mimeType: 'image/png',
-        buffer: Buffer.from('fake-png-bytes'),
-      });
+    await page.locator('input[type="file"]:not([accept])').setInputFiles({
+      name: 'note-photo.png',
+      mimeType: 'image/png',
+      buffer: Buffer.from('fake-png-bytes'),
+    });
     await expect(page.getByRole('status')).toHaveText('Attached', {
       timeout: 15000,
     });
@@ -1212,6 +1213,41 @@ test.describe('Visual Regression Tests - Core Components', () => {
     await expect(page).toHaveScreenshot('select-default.png');
   });
 
+  test('Select - Search stays anchored inside a transformed dialog', async ({
+    page,
+  }) => {
+    await gotoStory(page, 'choice-inputs-select--searchable');
+    const trigger = page.getByRole('combobox').first();
+    await trigger.evaluate((element) => {
+      const wrapper = element.closest<HTMLElement>(
+        '[data-slot="select-wrapper"]'
+      )!;
+      wrapper.setAttribute('role', 'dialog');
+      wrapper.setAttribute('aria-modal', 'true');
+      wrapper.style.transform = 'translate(80px, 40px) scale(0.9)';
+    });
+    await trigger.click();
+    const popup = page.locator('[data-slot="select-dropdown"]');
+    await expect(
+      page.getByRole('dialog').getByRole('textbox', { name: 'Search options' })
+    ).toBeVisible();
+    await expect(
+      page.getByRole('textbox', { name: 'Search options' })
+    ).toBeFocused();
+    await expect
+      .poll(async () => {
+        const anchor = await trigger.boundingBox();
+        const menu = await popup.boundingBox();
+        if (!anchor || !menu) return Infinity;
+        return Math.max(
+          Math.abs(menu.x - anchor.x),
+          Math.abs(menu.y - anchor.y - anchor.height - 4),
+          Math.abs(menu.width - anchor.width)
+        );
+      })
+      .toBeLessThan(2);
+  });
+
   test('CountryDropdown - Default (empty placeholder)', async ({ page }) => {
     await gotoStory(page, 'choice-inputs-countrydropdown--default');
     await expect(page).toHaveScreenshot('countrydropdown-default.png');

From 47739bff41c5d6d26cccb8edfe632c2cd67d59d4 Mon Sep 17 00:00:00 2001
From: Lin Latt <lattln.tech@gmail.com>
Date: Wed, 11 Nov 2026 22:53:49 -0500
Subject: [PATCH 3/4] fix(Select): preserve dark contrast and announce active
 options

---
 src/components/Select/Select.test.tsx | 55 +++++++++++++++++++++++++++
 src/components/Select/Select.tsx      | 15 +++++++-
 tests/visual/components.spec.ts       | 15 ++++++++
 3 files changed, 84 insertions(+), 1 deletion(-)

diff --git a/src/components/Select/Select.test.tsx b/src/components/Select/Select.test.tsx
index 15d0ade3a..8d5893ae3 100644
--- a/src/components/Select/Select.test.tsx
+++ b/src/components/Select/Select.test.tsx
@@ -139,6 +139,61 @@ describe('Select portals', () => {
 });
 
 describe('Select typeahead', () => {
+  it.each([false, true])(
+    'announces the active option from the focused control (searchable: %s)',
+    async (searchable) => {
+      const user = userEvent.setup();
+      renderWithTheme(
+        <Select
+          label="Category"
+          searchable={searchable}
+          options={[
+            {
+              label: 'Locations',
+              options: [
+                { value: 'disabled', label: 'Disabled', disabled: true },
+                ...LOCATION_TYPES.slice(0, 2),
+              ],
+            },
+            ...LOCATION_TYPES.slice(2),
+          ]}
+        />
+      );
+      const trigger = screen.getByRole('combobox', { name: 'Category' });
+      await user.click(trigger);
+      const control = searchable
+        ? screen.getByRole('textbox', { name: 'Search options' })
+        : trigger;
+      const clinicId = screen.getByRole('option', { name: 'Clinic' }).id;
+      expect(control).toHaveFocus();
+      expect(control).toHaveAttribute(
+        'aria-controls',
+        screen.getByRole('listbox').id
+      );
+      expect(control).toHaveAttribute(
+        'aria-activedescendant',
+        screen.getByRole('option', { name: 'Cardiology' }).id
+      );
+      await user.keyboard('{ArrowDown}');
+      expect(control).toHaveAttribute(
+        'aria-activedescendant',
+        screen.getByRole('option', { name: 'Chiropractic' }).id
+      );
+      if (searchable) {
+        await user.type(control, 'clinic');
+        expect(control).toHaveAttribute('aria-activedescendant', clinicId);
+        await user.clear(control);
+        await user.type(control, 'no such category');
+        expect(control).not.toHaveAttribute('aria-activedescendant');
+      } else {
+        await user.keyboard('cli');
+        expect(control).toHaveAttribute('aria-activedescendant', clinicId);
+      }
+      await user.keyboard('{Escape}');
+      expect(trigger).not.toHaveAttribute('aria-activedescendant');
+    }
+  );
+
   it.each(['ArrowDown', 'ArrowUp', 'Home', 'End'])(
     'does not select a missing option after a no-match search and %s',
     async (key) => {
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
index 2c3d5551b..8fcb8121e 100644
--- a/src/components/Select/Select.tsx
+++ b/src/components/Select/Select.tsx
@@ -338,6 +338,10 @@ function Select(props: SelectProps) {
     }
     return result;
   }, [filteredOptions]);
+  const optionId = (option: SelectOption) =>
+    `${listboxId}-option-${flatOptions.indexOf(option)}`;
+  const activeOption = filteredFlatOptions[highlightedIndex];
+  const activeOptionId = activeOption ? optionId(activeOption) : undefined;
 
   // Get selected options (in selection order)
   const selectedOptions = selectedValues
@@ -613,6 +617,7 @@ function Select(props: SelectProps) {
           // Only reference the listbox while it exists in the DOM (it is
           // portaled and unmounted when closed) so the ID is always valid.
           aria-controls={isOpen ? listboxId : undefined}
+          aria-activedescendant={isOpen ? activeOptionId : undefined}
           aria-invalid={hasError || !!error}
           aria-required={required || undefined}
           aria-label={!label ? ariaLabel : undefined}
@@ -686,7 +691,7 @@ function Select(props: SelectProps) {
               }
               style={{ inset: 'auto', margin: 0, padding: 0, ...dropdownStyle }}
               className={cn(
-                'border-border bg-card rounded-lg border shadow-lg',
+                'border-border bg-card text-card-foreground rounded-lg border shadow-lg',
                 'flex flex-col overflow-hidden',
                 'animate-in fade-in zoom-in-95 duration-100'
               )}
@@ -710,6 +715,9 @@ function Select(props: SelectProps) {
                       'focus:ring-ring focus:ring-2 focus:outline-none'
                     )}
                     aria-label="Search options"
+                    aria-controls={listboxId}
+                    aria-autocomplete="list"
+                    aria-activedescendant={activeOptionId}
                   />
                 </div>
               )}
@@ -744,6 +752,7 @@ function Select(props: SelectProps) {
                             {item.options.map((option) => (
                               <SelectOptionItem
                                 key={option.value}
+                                id={optionId(option)}
                                 option={option}
                                 isSelected={selectedValues.includes(
                                   option.value
@@ -770,6 +779,7 @@ function Select(props: SelectProps) {
                     return (
                       <SelectOptionItem
                         key={item.value}
+                        id={optionId(item)}
                         option={item}
                         isSelected={selectedValues.includes(item.value)}
                         isHighlighted={
@@ -834,6 +844,7 @@ function toValueArray(value: string | string[] | undefined): string[] {
 // ============================================================================
 
 interface SelectOptionItemProps {
+  id: string;
   option: SelectOption;
   isSelected: boolean;
   isHighlighted: boolean;
@@ -842,6 +853,7 @@ interface SelectOptionItemProps {
 }
 
 function SelectOptionItem({
+  id,
   option,
   isSelected,
   isHighlighted,
@@ -863,6 +875,7 @@ function SelectOptionItem({
 
   return (
     <li
+      id={id}
       data-slot="select-option"
       role="option"
       aria-selected={isSelected}
diff --git a/tests/visual/components.spec.ts b/tests/visual/components.spec.ts
index 8f725c6ed..c23f50840 100644
--- a/tests/visual/components.spec.ts
+++ b/tests/visual/components.spec.ts
@@ -1228,6 +1228,21 @@ test.describe('Visual Regression Tests - Core Components', () => {
     });
     await trigger.click();
     const popup = page.locator('[data-slot="select-dropdown"]');
+    await page.evaluate(() => {
+      const root = document.documentElement;
+      root.setAttribute('data-theme', 'dark');
+      root.classList.add('dark');
+      root.style.colorScheme = 'light';
+      root.style.setProperty('--mieweb-card', '#111827');
+      root.style.setProperty('--mieweb-card-foreground', '#f9fafb');
+    });
+    await popup.evaluate((element) => {
+      element.style.colorScheme = 'light';
+    });
+    await expect(popup).toHaveCSS('background-color', 'rgb(17, 24, 39)');
+    await expect(
+      popup.locator('[role="option"][aria-selected="false"]').first()
+    ).toHaveCSS('color', 'rgb(249, 250, 251)');
     await expect(
       page.getByRole('dialog').getByRole('textbox', { name: 'Search options' })
     ).toBeVisible();

From 680cdaaa97ab9066e336af81f2792cfe148e19a5 Mon Sep 17 00:00:00 2001
From: Lin Latt <lattln.tech@gmail.com>
Date: Thu, 12 Nov 2026 14:34:08 -0500
Subject: [PATCH 4/4] fix(select): correct dark-theme regression and
 accessibility docs

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 src/catalog/ChoiceInputs.mdx             | 7 +++++--
 src/components/Select/Select.stories.tsx | 2 +-
 tests/visual/components.spec.ts          | 8 ++++++--
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/catalog/ChoiceInputs.mdx b/src/catalog/ChoiceInputs.mdx
index 0c5a52c21..2d8b30744 100644
--- a/src/catalog/ChoiceInputs.mdx
+++ b/src/catalog/ChoiceInputs.mdx
@@ -58,8 +58,11 @@ dates go to [DateInput](?path=/docs/date-time-dateinput--docs).
 - Keyboard coverage is uneven: `Select` and `Autocomplete` implement arrow keys, Enter and Escape
   (`Select` adds Home/End and typeahead); the country pickers arrow between options once focus is
   inside the panel; **`Dropdown` and `PillSelect` have no arrow-key navigation** (Tab only).
-  `Select` and `Dropdown` mark the highlighted row visually but do not set
-  `aria-activedescendant`; only `Autocomplete` does.
+  `Select` and `Autocomplete` expose the active option through `aria-activedescendant`.
+  In `Select`, both the trigger and searchable input reference the listbox with
+  `aria-controls` and the highlighted option with `aria-activedescendant`; the active-option
+  reference is omitted when no selectable result exists and removed on close.
+  `Dropdown` marks the highlighted row visually but does not set `aria-activedescendant`.
 - Focus return on close: `Select` and `PillSelect` return focus to the trigger on Escape;
   `Dropdown`, `Autocomplete` and the country pickers do not.
 - Built-in English strings: `Select` (`"Select an option"`, `"Search..."`, `"No results found"`
diff --git a/src/components/Select/Select.stories.tsx b/src/components/Select/Select.stories.tsx
index e45ba1f9b..fe5d7cef4 100644
--- a/src/components/Select/Select.stories.tsx
+++ b/src/components/Select/Select.stories.tsx
@@ -191,7 +191,7 @@ const [specialty, setSpecialty] = useState('');
 
 ### Limitations
 
-- Accessibility: trigger is \`<button role="combobox" aria-haspopup="listbox" aria-expanded aria-controls>\` with \`aria-invalid\`, \`aria-required\` and \`aria-describedby\` → error or helper text; the \`<label htmlFor>\` targets the trigger's \`id\`. Options are \`<li role="option" aria-selected>\`, groups \`<li role="presentation">\` + \`<ul role="group" aria-label>\`, \`aria-multiselectable\` in \`multiple\` mode. Keyboard: ArrowUp/Down, Home/End, Enter/Space, Escape (returns focus to the trigger), typeahead when not \`searchable\`. **No \`aria-activedescendant\`** — the highlighted option is marked with \`data-highlighted\`, so screen readers are not told which option the arrow keys reached until it is selected.
+- Accessibility: trigger is \`<button role="combobox" aria-haspopup="listbox" aria-expanded aria-controls>\` with \`aria-invalid\`, \`aria-required\` and \`aria-describedby\` → error or helper text; the \`<label htmlFor>\` targets the trigger's \`id\`. Options are \`<li role="option" aria-selected>\`, groups \`<li role="presentation">\` + \`<ul role="group" aria-label>\`, \`aria-multiselectable\` in \`multiple\` mode. Keyboard: ArrowUp/Down, Home/End, Enter/Space, Escape (returns focus to the trigger), typeahead when not \`searchable\`. The trigger and searchable input expose the listbox through \`aria-controls\` and its highlighted option through \`aria-activedescendant\`, so the focused control identifies the result Enter will select. The active-option reference is omitted when no selectable result exists and removed on close.
 - Not a form control: there is no \`name\` and nothing is submitted. Keep the value in state and post it yourself.
 - Filtering is a case-insensitive \`includes\` on \`label\` only; \`multiple\` shows selected labels joined with \`", "\` and truncates.
 - The listbox uses a fixed-position portal (\`useAnchoredPosition\`, width matches trigger, max height 300px). Inside a dialog (including an alert dialog) it stays within that dialog's focus and accessibility scope; otherwise it portals to \`<body>\`. A manual popover places it in the browser's top layer so transformed dialog containers do not offset its viewport coordinates.
diff --git a/tests/visual/components.spec.ts b/tests/visual/components.spec.ts
index c23f50840..c79f91a60 100644
--- a/tests/visual/components.spec.ts
+++ b/tests/visual/components.spec.ts
@@ -1233,8 +1233,12 @@ test.describe('Visual Regression Tests - Core Components', () => {
       root.setAttribute('data-theme', 'dark');
       root.classList.add('dark');
       root.style.colorScheme = 'light';
-      root.style.setProperty('--mieweb-card', '#111827');
-      root.style.setProperty('--mieweb-card-foreground', '#f9fafb');
+      root.style.setProperty('--mieweb-card', '#111827', 'important');
+      root.style.setProperty(
+        '--mieweb-card-foreground',
+        '#f9fafb',
+        'important'
+      );
     });
     await popup.evaluate((element) => {
       element.style.colorScheme = 'light';