Skip to content

[scheduler] aria-labelledby on events references non-existent header IDs (missing schedulerId prefix) #22756

@rita-codes

Description

@rita-codes

Summary

Event items in the "+N more" popover and the Agenda view reference a header id in their aria-labelledby that doesn't exist in the DOM — the real header IDs carry a ${schedulerId}- prefix that the passed value omits. As a result the date/day header part of each event's accessible name is a dangling reference, so screen readers don't announce which day an event belongs to.

Details

EventItem builds its label from two IDs — the passed ariaLabelledBy (the date header) plus its own id:

// internals/components/event/event-item/EventItem.tsx:303
aria-labelledby={`${ariaLabelledBy} ${id}`}

But the real header IDs are prefixed with ${schedulerId}-, while the value passed to EventItem is not:

MoreEventsPopover

id={`${schedulerId}-PopoverHeader-${day.key}`}   // real header id (line 82)
ariaLabelledBy={`PopoverHeader-${day.key}`}       // ❌ missing prefix (line 96)

AgendaView

id={`${schedulerId}-DayHeaderCell-${date.key}`}   // real header id (line 238)
ariaLabelledBy={`DayHeaderCell-${date.key}`}       // ❌ missing prefix (line 278)

(The AgendaViewRow itself uses the prefixed id correctly at line 234 — only the EventItem call is wrong.)

So aria-labelledby points at PopoverHeader-… / DayHeaderCell-…, which don't exist (the real ones have the ${schedulerId}- prefix). The event's own id (the second token) still resolves, so the title is announced — but the day/date context is lost.

Suggested fix

Add the ${schedulerId}- prefix in both calls (both components already have schedulerId in scope):

ariaLabelledBy={`${schedulerId}-PopoverHeader-${day.key}`}   // popover
ariaLabelledBy={`${schedulerId}-DayHeaderCell-${date.key}`}  // agenda

Context

@mui/x-scheduler (master, pre-stable). Accessibility bug in shipped features (month "+N more" popover, agenda view).

Metadata

Metadata

Assignees

Labels

No fields configured for issues without a type.

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions