Skip to content

[Modal] Dynamically wire unique aria-labelledby and remove hardcoded IDs #1868

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
PARTH-TUSSLE wants to merge 3 commits into
base: master
Choose a base branch
from
Open

[Modal] Dynamically wire unique aria-labelledby and remove hardcoded IDs #1868

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0d3dd3e
fix(Modal): dynamically wire unique aria-labelledby and enforce acces…
PARTH-TUSSLE Oct 18, 2026
743c1ca
test(Modal): add accessible name type checks and runtime regression t…
PARTH-TUSSLE Oct 18, 2026
6ec8e49
docs(Modal): document dynamic title IDs and accessible name precedenc…
PARTH-TUSSLE Oct 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion DESIGN.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -531,7 +531,7 @@ Component-specific behaviors are never promoted to Canonical Design Rules withou
- **Enforcement Status**: Contrast is guided by theme tokens and helper utilities (`readableTextColor`), but is not enforced by a global automated linting/test suite across every component.
- **Label Capitalization**: Action labels use `textTransform: 'capitalize'` built into `textB2SemiBold`.
- **Semantic ARIA**: Icon-only buttons must supply descriptive `aria-label` and `Tooltip`.
- **Modal Dialog Accessibility (`aria-labelledby`)**: Sistent's `Modal` component (`src/custom/Modal/index.tsx`) hardcodes `aria-labelledby="alert-dialog-slide-title"` and `aria-describedby="alert-dialog-slide-description"` on the underlying dialog, while its internal title element does not currently forward an `id`. This library-level accessibility gap is tracked in [#1864](https://github.com/layer5io/sistent/issues/1864). As a temporary consumer workaround until resolved in the library, consumers should conditionally mount dialog instances (`{isOpen && <Modal ... />}`) rather than keeping multiple hidden instances mounted simultaneously to avoid duplicate-ID collisions in the DOM accessibility tree.
- **Modal Dialog Accessibility (`aria-labelledby` / `aria-describedby`)**: Sistent's `Modal` component (`src/custom/Modal/index.tsx`) generates a dynamic, stable per-instance title ID via MUI's `unstable_useId` (`${id}-title` when caller provides `id`, otherwise an auto-generated token) wired to `aria-labelledby` on the dialog paper, eliminating DOM ID collisions across concurrent modals (#1864). `ModalProps` enforces an accessible name at compile time via a union requiring `title`, `aria-label`, or `aria-labelledby`. When a visible title is non-empty, `aria-labelledby` defaults to the generated title element ID; empty or whitespace-only titles are treated as absent for accessibility decisions, omitting the title header (including its action controls) and dangling `aria-labelledby`. Caller-provided accessibility attributes are forwarded directly to the dialog paper (kept off the dialog presentation root), and caller `slotProps.paper` attributes are preserved in both object and callback forms. `aria-labelledby` resolves as Modal-level `aria-labelledby` > `slotProps.paper['aria-labelledby']` > the generated title ID (for a non-blank `title`). `aria-label` applies only when no `aria-labelledby` resolves, with Modal-level `aria-label` > `slotProps.paper['aria-label']`. `aria-describedby` follows Modal-level > `slotProps.paper`. Callers requiring uniqueness across concurrent instances should either supply distinct `id` props or rely on the automatic collision-free `useId` tokens.

---

Expand Down
Loading
Loading