1 files changed, 113 insertions, 0 deletions
diff --git a/src/screens/Settings/AccessibilitySettings.tsx b/src/screens/Settings/AccessibilitySettings.tsx
new file mode 100644
index 000000000..dfe2c14a5
--- /dev/null
+++ b/src/screens/Settings/AccessibilitySettings.tsx
@@ -0,0 +1,113 @@
+import React from 'react'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import {NativeStackScreenProps} from '@react-navigation/native-stack'
+
+import {CommonNavigatorParams} from '#/lib/routes/types'
+import {isNative} from '#/platform/detection'
+import {
+  useHapticsDisabled,
+  useRequireAltTextEnabled,
+  useSetHapticsDisabled,
+  useSetRequireAltTextEnabled,
+} from '#/state/preferences'
+import {
+  useLargeAltBadgeEnabled,
+  useSetLargeAltBadgeEnabled,
+} from '#/state/preferences/large-alt-badge'
+import * as SettingsList from '#/screens/Settings/components/SettingsList'
+import {atoms as a} from '#/alf'
+import {Admonition} from '#/components/Admonition'
+import * as Toggle from '#/components/forms/Toggle'
+import {Accessibility_Stroke2_Corner2_Rounded as AccessibilityIcon} from '#/components/icons/Accessibility'
+import {Haptic_Stroke2_Corner2_Rounded as HapticIcon} from '#/components/icons/Haptic'
+import * as Layout from '#/components/Layout'
+import {InlineLinkText} from '#/components/Link'
+
+type Props = NativeStackScreenProps<
+  CommonNavigatorParams,
+  'AccessibilitySettings'
+>
+export function AccessibilitySettingsScreen({}: Props) {
+  const {_} = useLingui()
+
+  const requireAltTextEnabled = useRequireAltTextEnabled()
+  const setRequireAltTextEnabled = useSetRequireAltTextEnabled()
+  const hapticsDisabled = useHapticsDisabled()
+  const setHapticsDisabled = useSetHapticsDisabled()
+  const largeAltBadgeEnabled = useLargeAltBadgeEnabled()
+  const setLargeAltBadgeEnabled = useSetLargeAltBadgeEnabled()
+
+  return (
+    <Layout.Screen>
+      <Layout.Header title={_(msg`Accessibility`)} />
+      <Layout.Content>
+        <SettingsList.Container>
+          <SettingsList.Group contentContainerStyle={[a.gap_sm]}>
+            <SettingsList.ItemIcon icon={AccessibilityIcon} />
+            <SettingsList.ItemText>
+              <Trans>Alt text</Trans>
+            </SettingsList.ItemText>
+            <Toggle.Item
+              name="require_alt_text"
+              label={_(msg`Require alt text before posting`)}
+              value={requireAltTextEnabled ?? false}
+              onChange={value => setRequireAltTextEnabled(value)}
+              style={[a.w_full]}>
+              <Toggle.LabelText style={[a.flex_1]}>
+                <Trans>Require alt text before posting</Trans>
+              </Toggle.LabelText>
+              <Toggle.Platform />
+            </Toggle.Item>
+            <Toggle.Item
+              name="large_alt_badge"
+              label={_(msg`Display larger alt text badges`)}
+              value={!!largeAltBadgeEnabled}
+              onChange={value => setLargeAltBadgeEnabled(value)}
+              style={[a.w_full]}>
+              <Toggle.LabelText style={[a.flex_1]}>
+                <Trans>Display larger alt text badges</Trans>
+              </Toggle.LabelText>
+              <Toggle.Platform />
+            </Toggle.Item>
+          </SettingsList.Group>
+          {isNative && (
+            <>
+              <SettingsList.Divider />
+              <SettingsList.Group contentContainerStyle={[a.gap_sm]}>
+                <SettingsList.ItemIcon icon={HapticIcon} />
+                <SettingsList.ItemText>
+                  <Trans>Haptics</Trans>
+                </SettingsList.ItemText>
+                <Toggle.Item
+                  name="haptics"
+                  label={_(msg`Disable haptic feedback`)}
+                  value={hapticsDisabled ?? false}
+                  onChange={value => setHapticsDisabled(value)}
+                  style={[a.w_full]}>
+                  <Toggle.LabelText style={[a.flex_1]}>
+                    <Trans>Disable haptic feedback</Trans>
+                  </Toggle.LabelText>
+                  <Toggle.Platform />
+                </Toggle.Item>
+              </SettingsList.Group>
+            </>
+          )}
+          <SettingsList.Item>
+            <Admonition type="info" style={[a.flex_1]}>
+              <Trans>
+                Autoplay options have moved to the{' '}
+                <InlineLinkText
+                  to="/settings/content-and-media"
+                  label={_(msg`Content and media`)}>
+                  Content and Media settings
+                </InlineLinkText>
+                .
+              </Trans>
+            </Admonition>
+          </SettingsList.Item>
+        </SettingsList.Container>
+      </Layout.Content>
+    </Layout.Screen>
+  )
+}