Fix ARIA violation: search input outside role="menu" in searchable Dropdown

[Copilot]

Per ARIA spec, role="menu" must only contain menuitem* descendants. The searchable Dropdown was placing <input type="search"> directly inside the menu container, breaking screen reader/keyboard semantics.

Changes

• Dropdown.tsx: Restructured the open panel into two layers — an outer presentational <div> (visual styles: border, shadow, bg, animation) and an inner <div role="menu"> containing only menu items. The search input now lives between them: visually part of the panel, structurally outside role="menu".

  • Added aria-controls={menuId} on the search input (links it to the menu it filters)
  • Added aria-autocomplete="list" on the search input
  • trigger's aria-controls now correctly resolves to the role="menu" element

• Dropdown.test.tsx: Added regression test asserting role="searchbox" is not a descendant of role="menu".

// Before — search input inside role="menu" (ARIA violation)
<div id={menuId} role="menu">
  <input type="search" />       {/* ❌ invalid menuitem* descendant */}
  <button role="menuitem">…</button>
</div>

// After — search input outside role="menu"
<div>                           {/* presentational panel wrapper */}
  <input type="search" aria-controls={menuId} aria-autocomplete="list" />
  <div id={menuId} role="menu">
    <button role="menuitem">…</button>
  </div>
</div>

---

📱 Kick off Copilot coding agent tasks wherever you are with GitHub Mobile, available on iOS and Android.

[cloudflare-workers-and-pages]

Deploying ui with    Cloudflare Pages

Latest commit:	6c04e26
Status:	✅  Deploy successful!
Preview URL:	https://eb1318e5.ui-6d0.pages.dev
Branch Preview URL:	https://copilot-sub-pr-144.ui-6d0.pages.dev

View logs