Collapsed mobile sidebar remains focusable and exposed off-screen
- Dominant language
- Blade
- Stars
- 977
- Forks
- 112
- Avg merge
- 1d 4h
- Merged PRs (30d)
- 21
Description
### Flux version
v2.17.1
### Livewire version
v4.4.2
### Tailwind version
v4.3.3
### Browser and Operating System
Google Chrome 147.0.0.0 on macOS 27.0
### What is the problem?
At a mobile viewport, a sidebar with `collapsible="mobile"` receives
`data-flux-sidebar-collapsed-mobile` and is positioned outside the viewport,
but it does not receive `inert` or `aria-hidden`. Its links remain in the
accessibility tree and sequential keyboard navigation.
In a 390 × 844 reproduction, the closed sidebar was at `x: -256` with a width
of `256px`. The first and second Tab presses focused its off-screen
`Dashboard` and `Reports` links; only the third reached the visible sidebar
toggle. axe does not report this state, but the browser accessibility snapshot
and real keyboard order both expose it.
This is distinct from #2643 and #2649, which addressed collapsed desktop group
navigation and focus behavior rather than hiding a closed mobile sidebar.
### Code snippets to replicate the problem
```blade
Dashboard
```
1. Open the page at a mobile viewport.
2. Close the sidebar.
3. Confirm the sidebar has `data-flux-sidebar-collapsed-mobile` and is outside
the viewport.
4. Inspect the accessibility tree and press Tab from the start of the page.
5. Observe the sidebar links before the visible toggle and page content.
Relevant closed-state output:
```html
```
```text
aria-hidden: null
inert: false
sidebar rect: x -256, width 256
Tab 1: Dashboard at x -240
Tab 2: Reports at x -240
Tab 3: Toggle sidebar at x 24
```
### Screenshots/ screen recordings of the problem
Not applicable. The defect occurs while the sidebar is off-screen; the exact
DOM state, geometry, accessibility snapshot and keyboard order are included
above as searchable text.
### How do you expect it to work?
The collapsed mobile sidebar should be absent from sequential focus and the
accessibility tree. Opening it should restore access to its controls, and
closing it should preserve Flux's focus-return behavior.
### Please confirm (incomplete submissions will not be addressed)
- [x] I have provided easy and step-by-step instructions to reproduce the bug.
- [x] I have provided code samples as text and NOT images.
- [x] I understand my bug report will be closed if I haven't met the criteria above.
Contributor guide
No contributing guide indexed for this repository
Research direction
Start with the Flux sidebar component and reproduce the closed mobile state using the provided Blade snippet at a 390 × 844 viewport. Trace the data-flux-sidebar-collapsed-mobile state and its focus behavior; done means closed-sidebar links are absent from sequential focus and the accessibility tree, while opening restores access and closing preserves focus return.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- tailwindcss
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 68/100