Skip to content

[P1] Overlays: Apply Dialog fixes to Drawer, Dropdown, Tooltip #386

@sujaypawar

Description

@sujaypawar

Summary

Apply Dialog accessibility fixes to Drawer, Dropdown Menu, and Tooltip components.

Severity: P1 (High)
WCAG: Multiple (2.1.2, 2.4.3, 4.1.2)
Components: Drawer, Dropdown Menu, Tooltip

Issue

These overlay components likely have same accessibility issues as Dialog:

  • No focus trap
  • No initial focus management
  • No focus return
  • Missing ARIA attributes
  • No prefers-reduced-motion

Affected Components

Drawer - src/components/drawer/

  • Add focus trap
  • Manage initial focus
  • Return focus on close
  • Add aria-modal, aria-labelledby
  • Respect motion preferences

Dropdown Menu - src/components/dropdown-menu/

  • Trap focus in menu
  • Arrow key navigation
  • Return focus to trigger
  • Add proper ARIA menu roles

Tooltip - src/components/tooltip/

  • Keyboard accessible (focus trigger)
  • ESC key dismisses
  • Proper ARIA attributes
  • Respect motion preferences

Fix Pattern

Apply solutions from:

Effort: 4-6 hours (1-2 hours per component)

Testing

  • Each component: Focus trap works
  • Each component: Focus managed
  • Each component: Keyboard accessible
  • Each component: Screen reader tested
  • No regressions

Related: #369, #370-#385
Priority: P1 - 3 critical components

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions