[docs] aria-hidden element contains focusable content on templates page

[Suchitau25]

Steps to reproduce

Steps-

1. Open this link to live example: https://mui.com/templates/
2. Open DevTools or run an automated accessibility audit using Accessibility Insights / axe-core.
3. Inspect the swipeable container element matching selector div[data-swipeable="true"][aria-hidden="true"]:nth-child(2).
4. Observe that the container has aria-hidden="true" applied while its child interactive elements remain focusable via keyboard navigation (Tab key).

Current behavior

The swipeable container div[data-swipeable="true"][aria-hidden="true"]:nth-child(2) is hidden from screen readers using aria-hidden="true", but its internal child elements can still receive keyboard focus.

This causes screen reader users navigating by keyboard to land on elements that are invisible or silent, violating WCAG 4.1.2 Name, Role, Value (aria-hidden-focus).

Expected behavior

Elements marked with aria-hidden="true" (or their descendants) must not be focusable or receive keyboard focus.

To fix this:

• Ensure all focusable child elements inside an aria-hidden="true" parent receive tabindex="-1" (or inert), or
• Remove the hidden slide/container entirely from the sequential focus order/DOM when inactive.

Context

WCAG Success Criteria Violated:

• 4.1.2 Name, Role, Value (Level A): aria-hidden elements or their sub-trees contain focusable elements.

Impact: Screen reader users using keyboard navigation will focus on hidden components without receiving proper audio context, creating confusion and breaking sequential focus expectations.

Testing Methodology: Accessibility Insights for Web v2.47.0 (axe-core 4.11.3) / Automated Audit.

Your environment

npx @mui/envinfo

N/A - Auditing live documentation site ([https://mui.com/templates/](https://mui.com/templates/))

Target Application: Fully built Material UI templates ([https://mui.com/templates/](https://mui.com/templates/))
Target Selector: div[data-swipeable="true"][aria-hidden="true"]:nth-child(2)
Snippet: <div aria-hidden="true" data-swipeable="true" style="width: 100%; flex-shrink: 0; overflow: auto;">
Browser: Chrome Version 151.0.0.0
Audit Tool: Accessibility Insights for Web 2.47.0 (axe-core 4.11.3)

**Search keywords**: accessibility, a11y, aria-hidden, focusable, WCAG 4.1.2, aria-hidden-focus, swipeable, axe-core

[silviuaavram]

The "Go to store" links are always visible and actionable, even though the carousel panels all have aria-hidden="true" apart from the active one. The aria-hidden attribute on the panels gets changed on navigation. Links should not be actionable, but the whole UX of this element should probably get a refactor. Maybe the whole panel should be wrapped in an anchor, and the "go to store" text could appear on hover, while the panel could have an aria-label suggesting the link navigation.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

---

@Suchitau25 Thanks again for creating this issue! If you have a moment, we would love to hear your thoughts on how we handled it with this short feedback form.