fix(dropdown): wrong ARIA role pattern, no position variants, menu visible to AT when closed

[Samyssmile]

Problem

The ct-dropdown component has semantic and accessibility gaps that make it one of the least robust components in the system.

1. Wrong ARIA role pattern

The story uses role="group" on the menu container. A dropdown menu should use role="menu" with role="menuitem" on items — role="group" is for grouping related controls, not for action menus. This misleads consumers of the design system.

2. Menu visible to assistive technology when closed

The closed state uses opacity: 0; pointer-events: none — the menu remains in the accessibility tree. The story works around this with the inert attribute, but the CSS pattern itself doesn't enforce or guide this. Compare: the modal uses visibility: hidden (line 669), which correctly removes it from AT.

3. No position variants

Tooltip supports data-side="top|bottom|left|right" for positioning. Dropdown only positions at inset-inline-start: 0 (left-aligned below trigger). There's no right-aligned, top-opening, or center-aligned variant. This is a common real-world need.

4. No arrow-key navigation styles

The dropdown has no visual indication that roving tabindex or arrow-key navigation is supported. No :focus-within on the menu container, and focus styles on items are identical to hover — there's no way to distinguish keyboard from mouse interaction.

5. Separator has no semantic role

.ct-dropdown__separator is a visual <div> with height: 1px. The pattern doesn't guide consumers to add role="separator", which is required for correct AT navigation.

Expected behavior

• Document correct ARIA pattern: role="menu" + role="menuitem" (or role="listbox" + role="option" for selection)
• Use visibility: hidden instead of opacity: 0; pointer-events: none for the closed state
• Add data-align="start|end" and data-side="top|bottom" position variants
• Add role="separator" guidance for .ct-dropdown__separator

Files

• components/components.css lines 892–958
• stories/Overlays.stories.js (dropdown section)

[Samyssmile]

Fixed in 79b5c4e — all 5 points addressed: correct ARIA roles (menu/menuitem), visibility:hidden for AT hiding, data-side/data-align position variants, arrow-key navigation, and distinct focus-visible styles.