null/Queue-North-Website
null
/
Queue-North-Website
1
0
Fork 0
Code Issues 18 Pull Requests Packages Projects Releases Wiki Activity

P2: DialogContent missing DialogTitle — accessibility warning #22

New Issue
Closed
opened 2026-05-13 21:37:21 -05:00 by null · 0 comments
null commented 2026-05-13 21:37:21 -05:00
Owner
Copy Link

Severity: P2 — Medium

Problem: Radix UI DialogContent requires a DialogTitle for screen reader accessibility. The browser console shows:

DialogContent requires a DialogTitle for the component to be accessible for screen reader users.
If you want to hide the DialogTitle, you can wrap it with our VisuallyHidden component.

Impact: Accessibility violation. Screen readers cannot identify the dialog purpose.

Where: The Sheet component (used for the mobile nav menu) is built on Radix Dialog primitives. SheetContent renders inside a DialogPortal but does not include a DialogTitle.

Fix:

  1. Add a SheetTitle (visually hidden via VisuallyHidden from @radix-ui/react-visually-hidden) inside the SheetContent in Header.jsx mobile menu
  2. Example: <SheetTitle><VisuallyHidden>Navigation Menu</VisuallyHidden></SheetTitle>
  3. Verify console warning is gone

Reference: https://radix-ui.com/primitives/docs/components/dialog

## Severity: P2 — Medium **Problem:** Radix UI `DialogContent` requires a `DialogTitle` for screen reader accessibility. The browser console shows: ``` DialogContent requires a DialogTitle for the component to be accessible for screen reader users. If you want to hide the DialogTitle, you can wrap it with our VisuallyHidden component. ``` **Impact:** Accessibility violation. Screen readers cannot identify the dialog purpose. **Where:** The `Sheet` component (used for the mobile nav menu) is built on Radix `Dialog` primitives. `SheetContent` renders inside a `DialogPortal` but does not include a `DialogTitle`. **Fix:** 1. Add a `SheetTitle` (visually hidden via `VisuallyHidden` from `@radix-ui/react-visually-hidden`) inside the `SheetContent` in `Header.jsx` mobile menu 2. Example: `<SheetTitle><VisuallyHidden>Navigation Menu</VisuallyHidden></SheetTitle>` 3. Verify console warning is gone **Reference:** https://radix-ui.com/primitives/docs/components/dialog
null closed this issue 2026-05-13 21:44:12 -05:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
dev
main
v0.2.0
v0.1.1
v0.1.0
Labels
Clear labels
No items
No Label
Milestone
Clear milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
No Assignees
1 Participants
Notifications
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: null/Queue-North-Website#22
No description provided.
Delete Branch "%!s(<nil>)"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?