From 4e169cfa9945357efd19f0791ffe31d81ede0019 Mon Sep 17 00:00:00 2001
From: David Langley <davidl@element.io>
Date: Wed, 30 Jul 2025 14:47:27 +0100
Subject: [PATCH] Make sure there is a roving tab set if the last one has been
 removed from the list.

---
 src/components/utils/ListView.tsx | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/components/utils/ListView.tsx b/src/components/utils/ListView.tsx
index 3727e8f119..377ffb141b 100644
--- a/src/components/utils/ListView.tsx
+++ b/src/components/utils/ListView.tsx
@@ -92,13 +92,6 @@ export function ListView<Item, Context = any>(props: IListViewProps<Item, Contex
     /** Whether the list is currently focused */
     const [isFocused, setIsFocused] = useState<boolean>(false);
 
-    // Update the key-to-index mapping whenever items change
-    useEffect(() => {
-        if (items.length && !tabIndexKey) {
-            setTabIndexKey(getItemKey(items[0]));
-        }
-    }, [items, getItemKey, tabIndexKey]);
-
     // Update the key-to-index mapping whenever items change
     useEffect(() => {
         const newKeyToIndexMap = new Map<string, number>();
@@ -109,6 +102,13 @@ export function ListView<Item, Context = any>(props: IListViewProps<Item, Contex
         setKeyToIndexMap(newKeyToIndexMap);
     }, [items, getItemKey]);
 
+    // Ensure the tabIndexKey is set if there is none already or if the existing key is no longer displayed
+    useEffect(() => {
+        if (items.length && (!tabIndexKey || keyToIndexMap.get(tabIndexKey) === undefined)) {
+            setTabIndexKey(getItemKey(items[0]));
+        }
+    }, [items, getItemKey, tabIndexKey, keyToIndexMap]);
+
     /**
      * Scrolls to a specific item index and sets it as focused.
      * Uses Virtuoso's scrollIntoView method for smooth scrolling.
@@ -254,8 +254,6 @@ export function ListView<Item, Context = any>(props: IListViewProps<Item, Contex
 
     return (
         <Virtuoso
-            aria-rowcount={props.items.length}
-            aria-colcount={1}
             tabIndex={props.tabIndex || undefined} // We don't need to focus the container, so leave it undefined by default
             scrollerRef={scrollerRef}
             ref={virtuosoHandleRef}