Skip to content

♿(Modal) h2 titles, dialog aria-labelledby, i18n close button#390

Open
Ovgodd wants to merge 1 commit into
mainfrom
fix/a11y-modal
Open

♿(Modal) h2 titles, dialog aria-labelledby, i18n close button#390
Ovgodd wants to merge 1 commit into
mainfrom
fix/a11y-modal

Conversation

@Ovgodd
Copy link
Copy Markdown
Collaborator

@Ovgodd Ovgodd commented May 4, 2026

Purpose

Improve Modal accessibility :

  • expose a semantic title and correct dialog naming/description
  • hide decorative title icons from assistive tech
  • internationalize modal frame controls (close, back to tabs)
  • add an accessible name for the DatePicker calendar popover

Proposal

  • Render modal titles as h2 and name the dialog with aria-labelledby when a title exists.
  • Link subtitles with aria-describedby in the default variant when present.
  • Hide decorative title icons from assistive tech (aria-hidden on the icon wrapper).
  • Use i18n strings for close and “back to tabs” controls.
  • Add an i18n aria-label on the DatePicker calendar popover.
  • Verify modal opens from trigger with role="dialog" and aria-modal="true".
  • Verify pre-built modals (e.g. confirmation) still behave correctly; tests aligned with translated labels.

@Ovgodd Ovgodd requested a review from PanchoutNathan May 4, 2026 08:25
@Ovgodd Ovgodd self-assigned this May 4, 2026
@Ovgodd Ovgodd added the a11y Accessibility related tasks label May 4, 2026
@Ovgodd Ovgodd force-pushed the fix/a11y-modal branch 2 times, most recently from 03d9772 to 96c34ba Compare May 4, 2026 08:30
aria-labelledby on h2, describedby on subtitle, i18n close/back, popover label.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

a11y Accessibility related tasks

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant