Restore focus to ftb toggle button after click
What does this MR do and why?
This MR implements focus restoration for the file tree browser toggle button to improve keyboard navigation accessibility.
Problem
When users interact with the file tree browser toggle button using keyboard navigation:
- User presses Enter/Space on the toggle button (button has focus)
- File tree collapses/expands, causing Vue to destroy and recreate the toggle component
- The toggle button moves between locations (sidebar
↔️ header) - Focus is lost - keyboard users must Tab through many elements to find the toggle again
- Poor accessibility experience for keyboard and screen reader users
Solution
Implements the solution proposed in #561563 (comment 2688926604):
- Add
initializedproperty to parent components (tree_list.vueandheader_area.vue) to track whether the component has mounted - Pass this as a
focusprop toFileTreeBrowserToggle - On initial page load:
initialized = false→ no auto-focus - After first mount:
initialized = true→ subsequent mounts receive focus - When toggle is recreated (after collapse/expand), the new button automatically receives focus
This approach keeps the focus management explicit and within Vue's component system, avoiding fragile DOM manipulation with querySelector.
Screenshots or screen recordings
Before:
- User clicks toggle → focus is lost
- Must Tab multiple times to return to toggle
Screen_Recording_2025-11-19_at_4.26.28_PM
After:
- User clicks toggle → focus automatically restored to new toggle button
- Seamless keyboard navigation experience ![Screen_Recording_2025-11-19_at_4.24.13_PM]
How to set up and validate locally
- Enable the
repository_file_tree_browserfeature flag - Navigate to a repository file or tree view
-
Using keyboard only:
- Tab to the file tree browser toggle button
- Press Enter/Space to collapse the file tree
- Verify focus is on the toggle button in the header
- Press Enter/Space again to expand
- Verify focus is on the toggle button in the sidebar
-
Using mouse:
- Click the toggle to collapse
- Click again to expand
- Verify no JavaScript errors
MR acceptance checklist
This MR addresses the following acceptance criteria from #561563 (closed):
-
Focus restoration: When the toggle button is recreated (due to component re-rendering), focus is restored to the toggle button
Related to #561563 (closed)
Edited by Joseph Fletcher