Skip to content

Add accessible dialog pattern to MenuItemModal #10

@mighty840

Description

@mighty840

Description

The storefront MenuItemModal is missing standard accessible dialog attributes. It currently has no role="dialog", no aria-modal="true", and no aria-labelledby pointing to the item's heading.

Files to Change

  • packages/storefront/src/components/MenuItemModal.tsx — lines 152–158

Requirements

  1. Add role="dialog" to the modal container
  2. Add aria-modal="true"
  3. Add aria-labelledby pointing to the item name heading's id
  4. Ensure focus is trapped within the modal when open
  5. Ensure pressing Escape closes the modal

Reference

See WAI-ARIA Dialog Pattern

Effort

S — focused accessibility improvement

Metadata

Metadata

Assignees

No one assigned

    Labels

    accessibilityAccessibility improvementshelp wantedExtra attention is needed

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions