have back button dismiss lightbox on web (#9874)

src/view/com/lightbox/Lightbox.web.tsx

@@ -1,4 +1,4 @@
-import {useCallback, useEffect, useState} from 'react'
+import {useCallback, useEffect, useRef, useState} from 'react'
 import {Pressable, StyleSheet, View} from 'react-native'
 import {Image} from 'expo-image'
 import {msg} from '@lingui/macro'
@@ -69,7 +69,13 @@ function LightboxContainer({
       <Backdrop />
       <RemoveScrollBar />
       <FocusScope.FocusScope loop trapped asChild>
-        <div style={{position: 'absolute', inset: 0}}>{children}</div>
+        <div
+          role="dialog"
+          aria-modal="true"
+          aria-label={_(msg`Image viewer`)}
+          style={{position: 'absolute', inset: 0}}>
+          {children}
+        </div>
       </FocusScope.FocusScope>
     </Pressable>
   )
@@ -125,6 +131,32 @@ function LightboxGallery({
     return () => window.removeEventListener('keydown', onKeyDown)
   }, [onKeyDown])
 
+  // Push a history entry so the browser back button closes the lightbox
+  // instead of navigating away from the page.
+  const closedByPopStateRef = useRef(false)
+  useEffect(() => {
+    history.pushState({lightbox: true}, '')
+
+    const handlePopState = () => {
+      closedByPopStateRef.current = true
+      onClose()
+    }
+    window.addEventListener('popstate', handlePopState)
+
+    return () => {
+      window.removeEventListener('popstate', handlePopState)
+      // Only pop our entry if it's still the current one. If navigation
+      // already pushed a new entry on top, leave the orphaned entry —
+      // it shares the same URL so traversing through it is harmless.
+      if (
+        !closedByPopStateRef.current &&
+        (history.state as {lightbox?: boolean})?.lightbox
+      ) {
+        history.back()
+      }
+    }
+  }, [onClose])
+
   const delayedFadeInAnim = !reduceMotionEnabled && [
     a.fade_in,
     {animationDelay: '0.2s', animationFillMode: 'both'},
@@ -205,6 +237,11 @@ function LightboxGallery({
           </Pressable>
         </View>
       ) : null}
+      {imgs.length > 1 && (
+        <div aria-live="polite" aria-atomic="true" style={a.sr_only}>
+          <Text>{_(msg`Image ${index + 1} of ${imgs.length}`)}</Text>
+        </div>
+      )}
       <Button
         onPress={onClose}
         style={[