diff --git a/src/lib/constants.ts b/src/lib/constants.ts index 41aab143..ada7b205 100644 --- a/src/lib/constants.ts +++ b/src/lib/constants.ts @@ -4,6 +4,8 @@ export const FEEDBACK_FORM_URL = export const MAX_DISPLAY_NAME = 64 export const MAX_DESCRIPTION = 256 +export const MAX_GRAPHEME_LENGTH = 300 + // Recommended is 100 per: https://www.w3.org/WAI/GL/WCAG20/tests/test3.html // but increasing limit per user feedback export const MAX_ALT_TEXT = 1000 diff --git a/src/view/com/composer/Composer.tsx b/src/view/com/composer/Composer.tsx index 3891fa26..d7a4a42d 100644 --- a/src/view/com/composer/Composer.tsx +++ b/src/view/com/composer/Composer.tsx @@ -37,8 +37,7 @@ import {useExternalLinkFetch} from './useExternalLinkFetch' import {isDesktopWeb, isAndroid} from 'platform/detection' import {GalleryModel} from 'state/models/media/gallery' import {Gallery} from './photos/Gallery' - -const MAX_GRAPHEME_LENGTH = 300 +import {MAX_GRAPHEME_LENGTH} from 'lib/constants' type Props = ComposerOpts & { onClose: () => void @@ -310,7 +309,7 @@ export const ComposePost = observer(function ComposePost({ onError={setError} accessible={true} accessibilityLabel="Write post" - accessibilityHint="Compose posts up to 300 characters in length" + accessibilityHint={`Compose posts up to ${MAX_GRAPHEME_LENGTH} characters in length`} /> diff --git a/src/view/com/composer/char-progress/CharProgress.tsx b/src/view/com/composer/char-progress/CharProgress.tsx index eaaaea5e..6b3b98e4 100644 --- a/src/view/com/composer/char-progress/CharProgress.tsx +++ b/src/view/com/composer/char-progress/CharProgress.tsx @@ -7,9 +7,9 @@ import ProgressCircle from 'react-native-progress/Circle' import ProgressPie from 'react-native-progress/Pie' import {s} from 'lib/styles' import {usePalette} from 'lib/hooks/usePalette' +import {MAX_GRAPHEME_LENGTH} from 'lib/constants' -const MAX_LENGTH = 300 -const DANGER_LENGTH = MAX_LENGTH +const DANGER_LENGTH = MAX_GRAPHEME_LENGTH export function CharProgress({count}: {count: number}) { const pal = usePalette('default') @@ -17,7 +17,9 @@ export function CharProgress({count}: {count: number}) { const circleColor = count > DANGER_LENGTH ? '#e60000' : pal.colors.link return ( <> - {MAX_LENGTH - count} + + {MAX_GRAPHEME_LENGTH - count} + {count > DANGER_LENGTH ? ( ) : ( )}