Do proper tab handling

src/components/images/Gallery/index.tsx

@@ -178,6 +178,11 @@ export function Gallery({
   const onSettle = (index: number) => {
     setCurrentIndex(index)
     if (!IS_WEB) return
+    // Update tabIndex: only the active image is tab-focusable
+    itemRefsRef.current.forEach((node, i) => {
+      const el = node as unknown as HTMLElement
+      el.tabIndex = i === index ? 0 : -1
+    })
     const el = itemRefsRef.current.get(index) as unknown as HTMLElement | null
     el?.focus({preventScroll: true})
   }
@@ -409,6 +414,7 @@ function GalleryImage({
       aria-label={image.alt || l`Image ${index + 1} of ${imageCount}`}>
       <Pressable
         ref={itemRef}
+        tabIndex={index === 0 ? 0 : -1}
         onPress={onPress}
         onPressIn={onPressIn}
         onFocus={() => setFocused(true)}

src/components/images/Gallery/useKeyboardHandlers.web.ts

@@ -35,11 +35,11 @@ export function useKeyboardHandlers({
       const current = pendingIndex ?? currentIndexRef.current
       let targetIndex: number | undefined
 
-      if (e.key === 'ArrowRight' || (e.key === 'Tab' && !e.shiftKey)) {
+      if (e.key === 'ArrowRight') {
         if (current < imageCount - 1) {
           targetIndex = current + 1
         }
-      } else if (e.key === 'ArrowLeft' || (e.key === 'Tab' && e.shiftKey)) {
+      } else if (e.key === 'ArrowLeft') {
         if (current > 0) {
           targetIndex = current - 1
         }