Skip to content

Fix aria-labelledby typo on dialog widget containers - #669

Open
sean-cstk wants to merge 1 commit into
developfrom
fix/aria-labelledby-typo
Open

Fix aria-labelledby typo on dialog widget containers#669
sean-cstk wants to merge 1 commit into
developfrom
fix/aria-labelledby-typo

Conversation

@sean-cstk

Copy link
Copy Markdown

What

The dialog container for modal and gate widgets used aria-labeledby (one L) instead of aria-labelledby (two L). aria-labeledby is not a valid ARIA attribute, so assistive technology silently ignores it. The result: these dialogs carry role="dialog" + aria-modal="true" but have no accessible name, so screen readers announce an unnamed dialog.

Change

Spelling-only correction to aria-labelledby so the attribute points at the existing id="pf-widget-headline" element. Applied across the 7 templates that render a dialog container:

  • src/templates/message/{modal,gate}.html
  • src/templates/form/{modal,gate}.html
  • src/templates/subscription/{modal,gate}.html
  • src/templates/sitegate/gate.html

Plus the built bundles dist/pathfora.js and dist/pathfora.min.js (regenerated string only).

No behavior, markup structure, or layout changes. Verified: aria-labeledby count 7 → 0; aria-labelledby 1 → 8 per file (the one pre-existing correct use in build-form-element.js is untouched).

Scope

This PR fixes only the misspelled attribute. It does not add dialog semantics to non-modal layouts (slideout / bar / inline), which is a separate, larger accessibility gap tracked separately.

Context

Surfaced via a customer accessibility report (screen readers not exposed to Experiences).

The dialog container for modal/gate widgets used aria-labeledby (one L),
which is not a valid ARIA attribute and is silently ignored by assistive
technology. As a result these dialogs had role="dialog" + aria-modal but
no accessible name, so screen readers announced an unnamed dialog.

Correct the spelling to aria-labelledby (two L) so it points at the
existing id="pf-widget-headline" element. Spelling-only change across the
7 templates that render a dialog container (message/form/subscription
modal+gate and sitegate/gate) plus the built dist bundles. No behavior,
markup structure, or layout changes.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

@cthorn-cs cthorn-cs left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM — aria-labeledby -> aria-labelledby is a valid-attribute correction; grepped the repo, nothing referenced the misspelling, and CI's green. Gives the modal/gate dialogs their accessible name, no behavior change.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants