From 0cec7f219375f3d0a42b25645abcc27f9d2767b5 Mon Sep 17 00:00:00 2001
From: Jacques Erasmus <jerasmus@gitlab.com>
Date: Tue, 7 Oct 2025 13:03:55 +0200
Subject: [PATCH 1/2] Replace RecycleScroller with standard scroller

- Remove RecycleScroller dependency from tree_list.vue
- Replace with standard div container with overflow-y: auto
- Update template to use v-for instead of RecycleScroller slot
- Remove ROW_HEIGHT constant as it's no longer needed
- Maintain all existing functionality and styling
---
 .../components/tree_list.vue                  | 63 +++++++++----------
 .../components/tree_list_spec.js              | 48 +-------------
 2 files changed, 32 insertions(+), 79 deletions(-)

diff --git a/app/assets/javascripts/repository/file_tree_browser/components/tree_list.vue b/app/assets/javascripts/repository/file_tree_browser/components/tree_list.vue
index 0bf536f0e33251..b8ce1ff96dcbf7 100644
--- a/app/assets/javascripts/repository/file_tree_browser/components/tree_list.vue
+++ b/app/assets/javascripts/repository/file_tree_browser/components/tree_list.vue
@@ -2,7 +2,6 @@
 import { GlTooltipDirective, GlLoadingIcon, GlFormInput, GlIcon, GlTooltip } from '@gitlab/ui';
 import micromatch from 'micromatch';
 import { createAlert } from '~/alert';
-import { RecycleScroller } from 'vendor/vue-virtual-scroller';
 import FileRow from '~/vue_shared/components/file_row.vue';
 import FileTreeBrowserToggle from '~/repository/file_tree_browser/components/file_tree_browser_toggle.vue';
 import { s__, __ } from '~/locale';
@@ -26,7 +25,6 @@ import {
 } from '../utils';
 
 export default {
-  ROW_HEIGHT: 32,
   FOCUS_FILE_TREE_BROWSER_FILTER_BAR,
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -34,7 +32,6 @@ export default {
   components: {
     GlFormInput,
     GlIcon,
-    RecycleScroller,
     FileRow,
     GlLoadingIcon,
     FileTreeBrowserToggle,
@@ -116,7 +113,7 @@ export default {
   methods: {
     updateFlatFilesList() {
       if (this.isRootLoading) return;
-      // Replace array contents in-place to maintain same reference for RecycleScroller
+      // Replace array contents in-place to maintain reactivity
       this.flatFilesList.splice(0, this.flatFilesList.length, ...this.buildList('/', 0));
     },
     isCurrentPath(path) {
@@ -382,36 +379,38 @@ export default {
     </div>
     <gl-loading-icon v-if="isRootLoading" class="gl-mt-5" />
     <nav v-else class="gl-mt-2 gl-flex gl-min-h-0 gl-flex-col" :aria-label="__('File tree')">
-      <recycle-scroller
+      <div
         v-if="filteredFlatFilesList.length"
-        ref="scroller"
-        :items="filteredFlatFilesList"
-        :item-size="$options.ROW_HEIGHT"
-        :buffer="100"
-        key-field="id"
-        class="gl-h-full gl-min-h-0 gl-flex-grow"
+        class="gl-h-full gl-min-h-0 gl-flex-grow gl-overflow-y-auto"
+        role="tree"
       >
-        <template #default="{ item }">
-          <file-row
-            :file="item"
-            :file-url="item.routerPath"
-            :level="item.level"
-            :opened="item.opened"
-            :loading="item.loading"
-            :tabindex="item.loading ? -1 : 0"
-            :aria-current="isCurrentPath(item.path)"
-            :style="{ '--level': item.level }"
-            :class="{
-              'tree-list-parent': item.level > 0,
-              '!gl-bg-gray-50': isCurrentPath(item.path),
-            }"
-            class="!gl-mx-0"
-            truncate-middle
-            @clickTree="toggleDirectory(item.path)"
-            @showMore="fetchDirectory(item.parentPath)"
-          />
-        </template>
-      </recycle-scroller>
+        <file-row
+          v-for="(item, index) in filteredFlatFilesList"
+          :key="item.id + index"
+          :file="item"
+          :file-url="item.routerPath"
+          :level="item.level"
+          :opened="item.opened"
+          :loading="item.loading"
+          :tabindex="item.loading ? -1 : 0"
+          :aria-current="isCurrentPath(item.path)"
+          role="treeitem"
+          :aria-expanded="item.opened"
+          :aria-selected="isCurrentPath(item.path)"
+          :aria-level="item.level + 1"
+          :aria-setsize="filteredFlatFilesList.length"
+          :aria-posinset="index + 1"
+          :style="{ '--level': item.level }"
+          :class="{
+            'tree-list-parent': item.level > 0,
+            '!gl-bg-gray-50': isCurrentPath(item.path),
+          }"
+          class="!gl-mx-0"
+          truncate-middle
+          @clickTree="toggleDirectory(item.path)"
+          @showMore="fetchDirectory(item.parentPath)"
+        />
+      </div>
       <p v-else class="gl-my-6 gl-text-center">
         {{ __('No files found') }}
       </p>
diff --git a/spec/frontend/repository/file_tree_browser/components/tree_list_spec.js b/spec/frontend/repository/file_tree_browser/components/tree_list_spec.js
index 60ff772bef2b9d..74ac4035ec3286 100644
--- a/spec/frontend/repository/file_tree_browser/components/tree_list_spec.js
+++ b/spec/frontend/repository/file_tree_browser/components/tree_list_spec.js
@@ -5,12 +5,10 @@ import { cloneDeep } from 'lodash';
 import { PiniaVuePlugin } from 'pinia';
 import waitForPromises from 'helpers/wait_for_promises';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
-import { RecycleScroller } from 'vendor/vue-virtual-scroller';
 import TreeList from '~/repository/file_tree_browser/components/tree_list.vue';
 import FileRow from '~/vue_shared/components/file_row.vue';
 import { FOCUS_FILE_TREE_BROWSER_FILTER_BAR, keysFor } from '~/behaviors/shortcuts/keybindings';
 import { shouldDisableShortcuts } from '~/behaviors/shortcuts/shortcuts_toggle';
-import { stubComponent } from 'helpers/stub_component';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import { useMockInternalEventsTracking } from 'helpers/tracking_internal_events_helper';
 import paginatedTreeQuery from 'shared_queries/repository/paginated_tree.query.graphql';
@@ -36,27 +34,11 @@ describe('Tree List', () => {
 
     apolloProvider = createMockApollo([[paginatedTreeQuery, getQueryHandlerSuccess]]);
 
-    const recycleScrollerStub = stubComponent(
-      {
-        name: 'RecycleScroller',
-        props: {
-          items: { type: Array, required: true },
-          itemSize: { type: Number, required: true },
-          buffer: { type: Number, required: true },
-          keyField: { type: String, required: true },
-        },
-      },
-      {
-        template: `<div><slot v-for="(item, index) in items" :item="item" :index="index"></slot></div>`,
-      },
-    );
-
     wrapper = shallowMountExtended(TreeList, {
       apolloProvider,
       pinia,
       propsData: { projectPath: 'group/project', currentRef: 'main', refType: 'branch' },
       mocks: { $route: { params: {}, $apollo: { query: jest.fn() } } },
-      stubs: { RecycleScroller: recycleScrollerStub },
     });
 
     await waitForPromises();
@@ -67,7 +49,6 @@ describe('Tree List', () => {
   const findFileTreeToggle = () => wrapper.findComponent(FileTreeBrowserToggle);
 
   const findHeader = () => wrapper.find('h3');
-  const findRecycleScroller = () => wrapper.findComponent(RecycleScroller);
   const findFileRows = () => wrapper.findAllComponents(FileRow);
   const findFilterInput = () => wrapper.findComponent(GlFormInput);
   const findFilterIcon = () => wrapper.findComponent(GlIcon);
@@ -95,33 +76,6 @@ describe('Tree List', () => {
     expect(findFileTreeToggle().exists()).toBe(true);
   });
 
-  it('renders recycle-scroller with correct props', () => {
-    const scroller = findRecycleScroller();
-    expect(scroller.props('items')).toEqual([
-      {
-        id: '/dir_1/dir_2-gid://123-0',
-        level: 0,
-        loading: false,
-        name: 'dir_2',
-        opened: false,
-        path: '/dir_1/dir_2',
-        routerPath: '/-/tree/main//dir_1/dir_2',
-        type: 'tree',
-      },
-      {
-        fileHash: 'abc123',
-        id: '/dir_1/file.txt-gid://456-0',
-        level: 0,
-        mode: '100644',
-        name: 'file.txt',
-        path: '/dir_1/file.txt',
-        routerPath: '/-/blob/main//dir_1/file.txt',
-      },
-    ]);
-
-    expect(scroller.props()).toMatchObject({ itemSize: 32, buffer: 100, keyField: 'id' });
-  });
-
   it('renders file rows with correct props', () => {
     const fileRows = findFileRows();
 
@@ -169,7 +123,7 @@ describe('Tree List', () => {
     });
 
     it('renders a show more button when hasNextPage is true', () => {
-      expect(findRecycleScroller().props('items')[2]).toMatchObject({ isShowMore: true });
+      expect(findFileRows().at(2).props('file')).toMatchObject({ isShowMore: true });
     });
 
     it('fetches the next page', () => {
-- 
GitLab


From d9c4da2c7176987e63aa163f8080045d4d095503 Mon Sep 17 00:00:00 2001
From: jerasmus <jerasmus@gitlab.com>
Date: Wed, 8 Oct 2025 10:20:59 +0200
Subject: [PATCH 2/2] Fix setsize and posinset calculations

Fixes the calculations for the aria attributes
---
 .../file_tree_browser/components/tree_list.vue  | 17 +++++++++++++++--
 .../components/tree_list_spec.js                | 11 +++++++++++
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/repository/file_tree_browser/components/tree_list.vue b/app/assets/javascripts/repository/file_tree_browser/components/tree_list.vue
index b8ce1ff96dcbf7..222e37be6a87db 100644
--- a/app/assets/javascripts/repository/file_tree_browser/components/tree_list.vue
+++ b/app/assets/javascripts/repository/file_tree_browser/components/tree_list.vue
@@ -94,6 +94,15 @@ export default {
     currentRouterPath() {
       return this.$route.params?.path && normalizePath(this.$route.params.path);
     },
+    siblingMap() {
+      const map = new Map();
+      this.filteredFlatFilesList.forEach((item) => {
+        const key = `${item.parentPath || ''}-${item.level}`;
+        if (!map.has(key)) map.set(key, []);
+        map.get(key).push(item.id);
+      });
+      return map;
+    },
   },
   watch: {
     directoriesCache: { deep: true, handler: 'updateFlatFilesList' },
@@ -338,6 +347,10 @@ export default {
       // The input might not always be available (i.e. when the FTB is in collapsed state)
       return this.$refs.filterInput?.$el;
     },
+    siblingInfo(item) {
+      const siblings = this.siblingMap.get(`${item.parentPath || ''}-${item.level}`);
+      return [siblings.length, siblings.indexOf(item.id) + 1];
+    },
   },
   filterPlaceholder: s__('Repository|Filter files (*.vue, *.rb...)'),
 };
@@ -398,8 +411,8 @@ export default {
           :aria-expanded="item.opened"
           :aria-selected="isCurrentPath(item.path)"
           :aria-level="item.level + 1"
-          :aria-setsize="filteredFlatFilesList.length"
-          :aria-posinset="index + 1"
+          :aria-setsize="siblingInfo(item)[0]"
+          :aria-posinset="siblingInfo(item)[1]"
           :style="{ '--level': item.level }"
           :class="{
             'tree-list-parent': item.level > 0,
diff --git a/spec/frontend/repository/file_tree_browser/components/tree_list_spec.js b/spec/frontend/repository/file_tree_browser/components/tree_list_spec.js
index 74ac4035ec3286..37c7b9a273cbbb 100644
--- a/spec/frontend/repository/file_tree_browser/components/tree_list_spec.js
+++ b/spec/frontend/repository/file_tree_browser/components/tree_list_spec.js
@@ -115,6 +115,17 @@ describe('Tree List', () => {
     expect(toggleDirectory).toHaveBeenCalledWith(path);
   });
 
+  it('sets aria-setsize and aria-posinset relative to siblings at same level', async () => {
+    await createComponent();
+    const fileRows = findFileRows();
+
+    expect(fileRows.at(0).attributes('aria-setsize')).toBe('2');
+    expect(fileRows.at(0).attributes('aria-posinset')).toBe('1');
+
+    expect(fileRows.at(1).attributes('aria-setsize')).toBe('2');
+    expect(fileRows.at(1).attributes('aria-posinset')).toBe('2');
+  });
+
   describe('pagination', () => {
     beforeEach(() => {
       const paginatedResponse = cloneDeep(mockResponse);
-- 
GitLab