livewire / livewire/flux

Collapsed mobile sidebar remains focusable and exposed off-screen

Open
#2,777 0 comments 0 reactions 0 assignees View on GitHub
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

Dashboard
Reports

```

```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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.