[scheduler] add aria-expanded and aria-controls to side panel toggle button

[mustafajw07]

Closes #21982

• I have followed (at least) the PR section of the contributing guide.

[code-infra-dashboard]

Deploy preview

https://deploy-preview-23402--material-ui-x.netlify.app/

Bundle size

Bundle	Parsed size	Gzip size
@mui/x-data-grid	0B(0.00%)	0B(0.00%)
@mui/x-data-grid-pro	0B(0.00%)	0B(0.00%)
@mui/x-data-grid-premium	0B(0.00%)	0B(0.00%)
@mui/x-charts	0B(0.00%)	0B(0.00%)
@mui/x-charts-pro	0B(0.00%)	0B(0.00%)
@mui/x-charts-premium	0B(0.00%)	0B(0.00%)
@mui/x-date-pickers	0B(0.00%)	0B(0.00%)
@mui/x-date-pickers-pro	0B(0.00%)	0B(0.00%)
@mui/x-tree-view	0B(0.00%)	0B(0.00%)
@mui/x-tree-view-pro	0B(0.00%)	0B(0.00%)
@mui/x-scheduler	🔺+101B(+0.03%)	🔺+40B(+0.04%)
@mui/x-scheduler-premium	🔺+101B(+0.02%)	🔺+28B(+0.02%)
@mui/x-chat	0B(0.00%)	0B(0.00%)
@mui/x-license	0B(0.00%)	0B(0.00%)

Details of bundle changes

---

Check out the code infra dashboard for more information about this PR.

[mustafajw07]

Hey @rita-codes, can you review this pr?

[rita-codes]

Thanks for working on this! The wiring is on the right track — schedulerId and the panel id follow the existing conventions, and since the Collapse keeps the panel mounted, aria-controls always points to a real element. There's one blocking issue with the aria-expanded value, and a couple of smaller notes.

Bugs

🔴 aria-expanded is absent when the side panel is collapsed

Location: packages/x-scheduler/src/event-calendar/header-toolbar/HeaderToolbar.tsx

aria-expanded={isSidePanelOpen ? 'true' : undefined}

This button is a disclosure (the side panel stays mounted inside the Collapse), and the APG Disclosure pattern requires the attribute in both states:

"When the content is visible, the element with role button has aria-expanded set to true. When the content area is hidden, it is set to false."

When the attribute is absent, assistive tech treats it as a regular button with no indication that it expands anything — which is exactly the state this PR is meant to fix. So it should render aria-expanded="false" when the panel is collapsed instead of omitting the attribute. SidePanelDrawer already handles its own disclosure button this way, if you want a reference in the codebase.

Tests

🟡 No test pins the new ARIA contract

Could you add a small test in HeaderToolbar.test.tsx covering the new attributes? Asserting that aria-controls matches the side panel's id and that aria-expanded reflects the open state would keep this contract from silently breaking in a refactor.

Notes

ℹ️ PreferencesMenu / ViewSwitcher — follow-up, out of scope

I know the 'true' : undefined pattern comes from PreferencesMenu/ViewSwitcher (the issue itself points there) — those don't follow the current APG Menu Button pattern either ("When the menu is hidden, aria-expanded is set to false"), but that's pre-existing code and out of scope here — tracked as a follow-up in #23416.

[mustafajw07]

Thanks for the review. I’ve addressed the issue by updating the side panel toggle to always provide aria-expanded, using true when the panel is open and false when it is collapsed.

This keeps the button aligned with the ARIA Disclosure pattern and consistent with the existing SidePanelDrawer implementation.

The change is done and ready for review.

[rita-codes]

Good job! thanks for taking care of this 🙇‍♀️