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:

  1. User presses Enter/Space on the toggle button (button has focus)
  2. File tree collapses/expands, causing Vue to destroy and recreate the toggle component
  3. The toggle button moves between locations (sidebar ↔️ header)
  4. Focus is lost - keyboard users must Tab through many elements to find the toggle again
  5. Poor accessibility experience for keyboard and screen reader users

Solution

Implements the solution proposed in #561563 (comment 2688926604):

  • Add initialized property to parent components (tree_list.vue and header_area.vue) to track whether the component has mounted
  • Pass this as a focus prop to FileTreeBrowserToggle
  • 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]

video

How to set up and validate locally

  1. Enable the repository_file_tree_browser feature flag
  2. Navigate to a repository file or tree view
  3. 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
  4. 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

Merge request reports

Loading