[APP-724] Collection of accessibility fixes (#949)

* Fix: include alt text on the web lightbox image

* a11y: Dont read the 'ALT' label

* a11y: remove a wrapper behavior from posts

This appears to have been introduced with the goal of creating meta
actions on posts, but the behavior seems counter-productive. The
accessibility inspector was unable to access individual items within
the post and therefore most content was simply skipped.

There may be a way to support the post actions without losing the
ability to access the inner elements but I couldnt find it. -prf

* a11y: apply alt tags to image wrappers so they get read

* a11y: set Link accessibilityLabel to the title if none set

* a11y: skip the SANDBOX watermark

* a11y: improve post meta to not read UI and give a useful date

* ally: improve post controls

* a11y: add labels to lightbox images on mobile

* fix types

src/view/com/lightbox/ImageViewing/@types/index.ts

@@ -6,8 +6,6 @@
  *
  */
 
-import {ImageURISource, ImageRequireSource} from 'react-native'
-
 export type Dimensions = {
   width: number
   height: number
@@ -18,4 +16,4 @@ export type Position = {
   y: number
 }
 
-export type ImageSource = ImageURISource | ImageRequireSource
+export type ImageSource = {uri: string; alt?: string}

src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx

@@ -133,6 +133,8 @@ const ImageItem = ({
         source={imageSrc}
         style={imageStylesWithOpacity}
         onLoad={onLoaded}
+        accessibilityLabel={imageSrc.alt}
+        accessibilityHint=""
       />
       {(!isLoaded || !imageDimensions) && <ImageLoading />}
     </ScrollView>

src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx

@@ -128,7 +128,9 @@ const ImageItem = ({
           onPress={doubleTapToZoomEnabled ? handleDoubleTap : undefined}
           onLongPress={onLongPressHandler}
           delayLongPress={delayLongPress}
-          accessibilityRole="image">
+          accessibilityRole="image"
+          accessibilityLabel={imageSrc.alt}
+          accessibilityHint="">
           <Animated.Image
             source={imageSrc}
             style={imageStylesWithOpacity}

src/view/com/lightbox/Lightbox.tsx

@@ -109,7 +109,7 @@ export const Lightbox = observer(function Lightbox() {
     const opts = store.shell.activeLightbox as models.ProfileImageLightbox
     return (
       <ImageView
-        images={[{uri: opts.profileView.avatar}]}
+        images={[{uri: opts.profileView.avatar || ''}]}
         imageIndex={0}
         visible
         onRequestClose={onClose}
@@ -120,7 +120,7 @@ export const Lightbox = observer(function Lightbox() {
     const opts = store.shell.activeLightbox as models.ImagesLightbox
     return (
       <ImageView
-        images={opts.images.map(({uri}) => ({uri}))}
+        images={opts.images.map(img => ({...img}))}
         imageIndex={opts.index}
         visible
         onRequestClose={onClose}

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

@@ -109,6 +109,8 @@ function LightboxInner({
             accessibilityIgnoresInvertColors
             source={imgs[index]}
             style={styles.image}
+            accessibilityLabel={imgs[index].alt}
+            accessibilityHint=""
           />
           {canGoLeft && (
             <TouchableOpacity