null/Queue-North-Website
null
/
Queue-North-Website
1
0
Fork 0
Code Issues 27 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.8.0
v0.2.0
v0.1.1
v0.1.0
Labels
Clear labels   
P0 Critical

Critical — must fix before production. Data loss, security, or outage risk.

  
P1 High

High — should fix soon. Functional bugs, security hardening, data integrity.

  
P2 Medium

Medium — fix in next cycle. Quality of life, robustness, minor security.

  
P3 Low

Low — nice to have. Polish, optimization, minor UX.

  
accessibility

Accessibility issues

  
backend

Server-side code, API, database.

  
bug

Something is broken or behaves incorrectly.

  
content

   
data-integrity

Data consistency, constraints, validation.

  
enhancement

Feature or improvement request

  
frontend

Client-side code, UI components.

  
infra

Docker, deployment, CI/CD, infrastructure.

  
integration

   
owner

Direct feedback from the site owner. Top priority.

  
owner-input

   
performance

Performance or optimization.

  
performance

   
phase-7

   
phase-8

Phase 8 — Deferred enhancements (testimonials, blog, SEO, performance)

  
security

Security vulnerability or hardening.

  
seo

   
ui

UI/visual issues

  
ux

User experience issue.

No Label
P0 Critical
P1 High
P2 Medium
P3 Low
accessibility
backend
bug
content
data-integrity
enhancement
frontend
infra
integration
owner
owner-input
performance
performance
phase-7
phase-8
security
seo
ui
ux
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?