Test session: File Tree Browser

Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.

📅 Test Date: December 2, 2025

💻 Testing Environments:

How to Log Issues

Create one comment thread per issue in #582189

Expand for comment Template

 

      ### [Brief descriptive title]

      **Environment:** [Staging / Production]
      **Browser:** [Chrome 120 / Firefox 121 / Safari 17 / Edge 120]
      **OS:** [macOS / Windows / Linux]
      **Viewport:** [Desktop / Tablet / Mobile]
      **Screen Reader:** [If applicable: VoiceOver, NVDA, JAWS, Orca - include version]

      #### Steps to Reproduce
      1.
      2.
      3.

      #### Expected vs Actual
      - **Expected:**
      - **Actual:**

      #### Evidence
      [Screenshots/videos here]

      #### Additional Info
      - **Console errors:** [If any]
      - **Reproducibility:** [Always / Sometimes / Once]

What to test

1. Basic File Tree Functionality

  • Expand/Collapse Directories: Click on directories to expand and collapse the tree structure
  • File Navigation: Click on files in the tree to view their contents
  • Tree Persistence: Navigate between files and verify the tree state is maintained
  • Selected State: Verify the currently viewed file/directory is highlighted in the tree

2. Filter & Search

  • Press f to open the file browser and focus the search field
  • Press Shift+f to toggle file browser visibility
  • Type in the filter bar to search by filename or extension
  • Use ↓ and ↑ arrow keys to navigate filtered results
  • Verify filtering works correctly and results are relevant

3. Responsive Behavior

  • Desktop: File tree should display side-by-side with file list
  • Smaller Viewports: File tree should appear in a drawer from the left, collapsed by default
  • Mobile: File tree should be hidden
  • Resize browser window and verify the tree adapts correctly
  • Test with super sidebar open/closed

4. First-Time User Experience

  • Clear browser data or use incognito mode
  • Visit a repository and verify the popover appears introducing the feature
  • Dismiss the popover and verify it doesn't reappear

5. Pagination

  • Test with repositories containing >100 items. Example
  • Verify "Show more" button appears after 100 items
  • Click "Show more" and verify next batch loads (100 items at a time)

6. Panel Resizing

  • Drag the resize handle between the file tree and content area
  • Verify the panel width adjusts smoothly
  • Refresh the page and verify the width preference is saved

7. Keyboard Navigation

  • Test all keyboard shortcuts (f, Shift+f, arrow keys)
  • Verify focus management when navigating with keyboard
  • Test tab navigation through the tree

8. Cross-Browser Testing

Test on supported browsers

9. Integration with Repository Views

  • Test on directory view (/-/tree/main)
  • Test on blob/file view (/-/blob/main/README.md)
  • Verify tree doesn't appear on project overview page
  • Navigate between overview, tree, and blob views to ensure tree renders correctly

10. Accessibility & Screen Reader Testing

Screen Reader Testing

Test with common screen readers:

  • macOS: VoiceOver (Safari)
  • Windows: NVDA (Firefox/Chrome) or JAWS (Chrome/Edge)
  • Linux: Orca (Firefox)

What to verify:

  • File tree announces as a tree structure with proper ARIA roles
  • Directory expand/collapse states are announced ("expanded"/"collapsed")
  • Current file/directory selection is announced
  • Navigation through the tree is logical and understandable
  • Filter input field has proper labels and instructions
  • "Show more" button (if visible) is announced correctly
  • Keyboard shortcuts are discoverable or documented

Keyboard-Only Navigation

Test without using a mouse:

  • Tab to navigate between file tree, filter, and main content
  • ↑/↓ arrow keys to navigate tree items
  • ←/→ arrow keys to collapse/expand directories
  • Enter or Space to select files/directories
  • f and Shift+f shortcuts work as expected
  • Focus indicators are visible on all interactive elements
  • No keyboard traps (can navigate in and out of all components)

Known issues that yet to be fixed

See release issues blockers tracker #537970 (comment 2906365059)

Edited by 🤖 GitLab Bot 🤖