Draft: Fix file tree browser accessibility when collapsed (using inert)
What does this MR do and why?
Fixes the accessibility issue where the File Tree Browser remains interactive when collapsed (using inert).
When the file tree browser is collapsed (visually hidden), users can still tab through its elements, use keyboard shortcuts. This creates an accessibility problem where screen reader users and keyboard navigation users can interact with invisible UI elements.
This MR adds the inert attribute to the file tree browser container when it's collapsed, making it completely non-interactive and removing it from the tab order.
Why inert instead of removing from DOM?
Using the inert attribute provides several benefits over conditionally rendering the component:
- Preserves CSS animations - The file tree browser slides in/out with transform transitions. Removing from DOM would eliminate these animations entirely unless we listen to transition events.
- Maintains component state - Keeps user's scroll position, expanded/collapsed directories, active item focus, cached directory contents..
- Avoids expensive re-renders - The file tree browser fetches directory data via GraphQL and builds tree structures. Keeping it mounted avoids refetching data and recreating the entire component tree on every toggle.
-
Better performance -
inertis a simple boolean attribute toggle, while DOM removal/insertion triggers layout recalculation, style recalculation, and paint operations. - Simpler code - No need for conditional rendering logic or managing transition event listeners.
Screenshots or screen recordings
| before | after |
|---|---|
| Users could tab through and interact with the collapsed file tree browser | The collapsed file tree browser is completely non-interactive |
| TODO | TODO |
How to set up and validate locally
- Navigate to any repository file or directory page
- Ensure the file tree browser is visible (expand it if needed)
- Collapse the file tree browser using the toggle button
- Try to tab through the page - verify you cannot focus on file tree browser elements
- Expand the file tree browser again - verify all functionality works and your scroll position/expanded directories are preserved
Issue: #581007 (closed)
Edited by Jacques Erasmus