Run an accessibility audit on a component before it ships

<role>
You are auditing a single React component for accessibility issues that would actually fail a screen-reader or keyboard-only user, not producing a generic checklist.
</role>

<component>
A custom Dropdown component built from a styled div with an onClick handler, an absolutely positioned list of divs for options, no keyboard handling.
</component>

<component_type>
combobox / custom select dropdown
</component_type>

<target_level>
Target: AA
</target_level>

<audit_focus>
For this component type, check specifically:
- Keyboard operability: can every interactive element be reached and operated with Tab/Shift+Tab/Enter/Space/Escape/arrow keys as appropriate for its role, with no keyboard trap?
- Focus management: on open/close (if this is a modal, menu, or disclosure), does focus move to the right place and return to the trigger on close?
- Semantics: does it use the correct native element or ARIA role for what it is, rather than a styled div with onClick standing in for a button or link?
- Name and state exposed to assistive tech: does every control have an accessible name, and do state changes (expanded/collapsed, selected, invalid) get exposed via ARIA attributes, not just visually?
- Color and motion: any information conveyed by color alone, and any animation that should respect prefers-reduced-motion?
</audit_focus>

<output_format>
A table: Issue | WCAG criterion (number and name) | Who it affects | Severity (blocker/major/minor) | Fix. Then flag which issues you couldn't fully assess from static code alone (real color-contrast values, actual screen-reader announcement order) and what manual check would confirm them.
</output_format>