[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

1 files changed, 11 insertions, 3 deletions

diff --git a/src/view/com/util/PostMeta.tsx b/src/view/com/util/PostMeta.tsx
index 45651e4e5..628c88722 100644
--- a/src/view/com/util/PostMeta.tsx
+++ b/src/view/com/util/PostMeta.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import {StyleSheet, View} from 'react-native'
 import {Text} from './text/Text'
 import {DesktopWebTextLink} from './Link'
-import {ago} from 'lib/strings/time'
+import {ago, niceDate} from 'lib/strings/time'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useStores} from 'state/index'
 import {UserAvatar} from './UserAvatar'
@@ -57,7 +57,11 @@ export const PostMeta = observer(function (opts: PostMetaOpts) {
               text={sanitizeDisplayName(displayName)}
               href={`/profile/${opts.authorHandle}`}
             />
-            <Text type="md" style={pal.textLight} lineHeight={1.2}>
+            <Text
+              type="md"
+              style={pal.textLight}
+              lineHeight={1.2}
+              accessible={false}>
               &nbsp;&middot;&nbsp;
             </Text>
             <DesktopWebTextLink
@@ -65,6 +69,8 @@ export const PostMeta = observer(function (opts: PostMetaOpts) {
               style={[styles.metaItem, pal.textLight]}
               lineHeight={1.2}
               text={ago(opts.timestamp)}
+              accessibilityLabel={niceDate(opts.timestamp)}
+              accessibilityHint=""
               href={opts.postHref}
             />
           </View>
@@ -122,7 +128,7 @@ export const PostMeta = observer(function (opts: PostMetaOpts) {
           href={`/profile/${opts.authorHandle}`}
         />
       </View>
-      <Text type="md" style={pal.textLight} lineHeight={1.2}>
+      <Text type="md" style={pal.textLight} lineHeight={1.2} accessible={false}>
         &middot;&nbsp;
       </Text>
       <DesktopWebTextLink
@@ -130,6 +136,8 @@ export const PostMeta = observer(function (opts: PostMetaOpts) {
         style={[styles.metaItem, pal.textLight]}
         lineHeight={1.2}
         text={ago(opts.timestamp)}
+        accessibilityLabel={niceDate(opts.timestamp)}
+        accessibilityHint=""
         href={opts.postHref}
       />
     </View>