Add alt text validation option to user preferences (supersedes #913) (#914)

* Add alt text validation option to user preferences

* Fix typos/linting issues

* Update accessibility setting to match styles

* Update the required alt text reminder to go away once it's added

---------

Co-authored-by: Emma Fuller <emma@emmafuller.dev>

1 files changed, 34 insertions, 2 deletions

diff --git a/src/view/com/composer/Composer.tsx b/src/view/com/composer/Composer.tsx
index caece3476..c6a9ecd4a 100644
--- a/src/view/com/composer/Composer.tsx
+++ b/src/view/com/composer/Composer.tsx
@@ -156,6 +156,9 @@ export const ComposePost = observer(function ComposePost({
       if (isProcessing || rt.graphemeLength > MAX_GRAPHEME_LENGTH) {
         return
       }
+      if (store.preferences.requireAltTextEnabled && gallery.needsAltText) {
+        return
+      }
 
       setError('')
 
@@ -220,8 +223,14 @@ export const ComposePost = observer(function ComposePost({
   )
 
   const canPost = useMemo(
-    () => graphemeLength <= MAX_GRAPHEME_LENGTH,
-    [graphemeLength],
+    () =>
+      graphemeLength <= MAX_GRAPHEME_LENGTH &&
+      (!store.preferences.requireAltTextEnabled || !gallery.needsAltText),
+    [
+      graphemeLength,
+      store.preferences.requireAltTextEnabled,
+      gallery.needsAltText,
+    ],
   )
   const selectTextInputPlaceholder = replyTo ? 'Write your reply' : `What's up?`
 
@@ -282,6 +291,20 @@ export const ComposePost = observer(function ComposePost({
             <Text style={pal.text}>{processingState}</Text>
           </View>
         ) : undefined}
+        {store.preferences.requireAltTextEnabled && gallery.needsAltText && (
+          <View style={[styles.reminderLine, pal.viewLight]}>
+            <View style={styles.errorIcon}>
+              <FontAwesomeIcon
+                icon="exclamation"
+                style={{color: colors.red4}}
+                size={10}
+              />
+            </View>
+            <Text style={[pal.text, s.flex1]}>
+              One or more images is missing alt text.
+            </Text>
+          </View>
+        )}
         {error !== '' && (
           <View style={styles.errorLine}>
             <View style={styles.errorIcon}>
@@ -415,6 +438,15 @@ const styles = StyleSheet.create({
     paddingVertical: 6,
     marginVertical: 6,
   },
+  reminderLine: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderRadius: 6,
+    marginHorizontal: 15,
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    marginBottom: 6,
+  },
   errorIcon: {
     borderWidth: 1,
     borderColor: colors.red4,