Skip to content

Commit

Permalink
Add alt text limit to image dialog (#5611)
Browse files Browse the repository at this point in the history
* Add alt text limit to image dialog

* GIF alt text too

* Fix

* tweaks, save alt on dialog dismiss

* simplify close behavior

* use state in gif alt

* state

---------

Co-authored-by: Hailey <[email protected]>
  • Loading branch information
estrattonbailey and haileyok authored Oct 5, 2024
1 parent 6dfd57e commit 76d63f9
Show file tree
Hide file tree
Showing 5 changed files with 231 additions and 118 deletions.
2 changes: 1 addition & 1 deletion src/lib/constants.ts
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ export const MAX_DM_GRAPHEME_LENGTH = 1000

// 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
export const MAX_ALT_TEXT = 2000

export function IS_TEST_USER(handle?: string) {
return handle && handle?.endsWith('.test')
Expand Down
33 changes: 33 additions & 0 deletions src/view/com/composer/AltTextCounterWrapper.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import React from 'react'
import {View} from 'react-native'

import {MAX_ALT_TEXT} from '#/lib/constants'
import {CharProgress} from '#/view/com/composer/char-progress/CharProgress'
import {atoms as a, useTheme} from '#/alf'

export function AltTextCounterWrapper({
altText,
children,
}: {
altText?: string
children: React.ReactNode
}) {
const t = useTheme()
return (
<View style={[a.flex_row]}>
<CharProgress
style={[
a.flex_col_reverse,
a.align_center,
a.mr_xs,
{minWidth: 50, gap: 1},
]}
textStyle={[{marginRight: 0}, a.text_sm, t.atoms.text_contrast_medium]}
size={26}
count={altText?.length || 0}
max={MAX_ALT_TEXT}
/>
{children}
</View>
)
}
137 changes: 80 additions & 57 deletions src/view/com/composer/GifAltText.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, {useCallback, useState} from 'react'
import React, {useState} from 'react'
import {TouchableOpacity, View} from 'react-native'
import {AppBskyEmbedExternal} from '@atproto/api'
import {msg, Trans} from '@lingui/macro'
Expand All @@ -11,14 +11,16 @@ import {
EmbedPlayerParams,
parseEmbedPlayerFromUrl,
} from '#/lib/strings/embed-player'
import {enforceLen} from '#/lib/strings/helpers'
import {isAndroid} from '#/platform/detection'
import {Gif} from '#/state/queries/tenor'
import {AltTextCounterWrapper} from '#/view/com/composer/AltTextCounterWrapper'
import {atoms as a, native, useTheme} from '#/alf'
import {Button, ButtonText} from '#/components/Button'
import * as Dialog from '#/components/Dialog'
import {DialogControlProps} from '#/components/Dialog'
import * as TextField from '#/components/forms/TextField'
import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
import {PlusSmall_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
import {PortalComponent} from '#/components/Portal'
import {Text} from '#/components/Typography'
Expand Down Expand Up @@ -52,18 +54,11 @@ export function GifAltText({
}
}, [linkProp])

const onPressSubmit = useCallback(
(alt: string) => {
control.close(() => {
onSubmit(alt)
})
},
[onSubmit, control],
)
const parsedAlt = parseAltFromGIFDescription(link.description)
const [altText, setAltText] = useState(parsedAlt.alt)

if (!gif || !params) return null

const parsedAlt = parseAltFromGIFDescription(link.description)
return (
<>
<TouchableOpacity
Expand Down Expand Up @@ -99,13 +94,19 @@ export function GifAltText({

<AltTextReminder />

<Dialog.Outer control={control} Portal={Portal}>
<Dialog.Outer
control={control}
onClose={() => {
onSubmit(altText)
}}
Portal={Portal}>
<Dialog.Handle />
<AltTextInner
onSubmit={onPressSubmit}
altText={altText}
setAltText={setAltText}
control={control}
link={link}
params={params}
initialValue={parsedAlt.isPreferred ? parsedAlt.alt : ''}
key={link.uri}
/>
</Dialog.Outer>
Expand All @@ -114,61 +115,83 @@ export function GifAltText({
}

function AltTextInner({
onSubmit,
altText,
setAltText,
control,
link,
params,
initialValue: initalValue,
}: {
onSubmit: (text: string) => void
altText: string
setAltText: (text: string) => void
control: DialogControlProps
link: AppBskyEmbedExternal.ViewExternal
params: EmbedPlayerParams
initialValue: string
}) {
const {_} = useLingui()
const [altText, setAltText] = useState(initalValue)
const control = Dialog.useDialogContext()

const onPressSubmit = useCallback(() => {
onSubmit(altText)
}, [onSubmit, altText])
const t = useTheme()
const {_, i18n} = useLingui()

return (
<Dialog.ScrollableInner label={_(msg`Add alt text`)}>
<View style={a.flex_col_reverse}>
<View style={[a.mt_md, a.gap_md]}>
<View>
<TextField.LabelText>
<Trans>Descriptive alt text</Trans>
</TextField.LabelText>
<TextField.Root>
<Dialog.Input
label={_(msg`Alt text`)}
placeholder={link.title}
onChangeText={text =>
setAltText(enforceLen(text, MAX_ALT_TEXT))
}
value={altText}
multiline
numberOfLines={3}
autoFocus
onKeyPress={({nativeEvent}) => {
if (nativeEvent.key === 'Escape') {
control.close()
}
}}
/>
</TextField.Root>
<View style={[a.gap_sm]}>
<View style={[a.relative]}>
<TextField.LabelText>
<Trans>Descriptive alt text</Trans>
</TextField.LabelText>
<TextField.Root>
<Dialog.Input
label={_(msg`Alt text`)}
placeholder={link.title}
onChangeText={text => {
setAltText(text)
}}
defaultValue={altText}
multiline
numberOfLines={3}
autoFocus
onKeyPress={({nativeEvent}) => {
if (nativeEvent.key === 'Escape') {
control.close()
}
}}
/>
</TextField.Root>
</View>

{altText.length > MAX_ALT_TEXT && (
<View style={[a.pb_sm, a.flex_row, a.gap_xs]}>
<CircleInfo fill={t.palette.negative_500} />
<Text
style={[
a.italic,
a.leading_snug,
t.atoms.text_contrast_medium,
]}>
<Trans>
Alt text will be truncated. Limit:{' '}
{i18n.number(MAX_ALT_TEXT)} characters.
</Trans>
</Text>
</View>
)}
</View>
<Button
label={_(msg`Save`)}
size="large"
color="primary"
variant="solid"
onPress={onPressSubmit}>
<ButtonText>
<Trans>Save</Trans>
</ButtonText>
</Button>

<AltTextCounterWrapper altText={altText}>
<Button
label={_(msg`Save`)}
size="large"
color="primary"
variant="solid"
onPress={() => {
control.close()
}}
style={[a.flex_grow]}>
<ButtonText>
<Trans>Save</Trans>
</ButtonText>
</Button>
</AltTextCounterWrapper>
</View>
{/* below the text input to force tab order */}
<View>
Expand Down
50 changes: 29 additions & 21 deletions src/view/com/composer/char-progress/CharProgress.tsx
Original file line number Diff line number Diff line change
@@ -1,48 +1,56 @@
import React from 'react'
import {View} from 'react-native'
import {StyleProp, TextStyle, View, ViewStyle} from 'react-native'
// @ts-ignore no type definition -prf
import ProgressCircle from 'react-native-progress/Circle'
// @ts-ignore no type definition -prf
import ProgressPie from 'react-native-progress/Pie'

import {MAX_GRAPHEME_LENGTH} from 'lib/constants'
import {usePalette} from 'lib/hooks/usePalette'
import {s} from 'lib/styles'
import {MAX_GRAPHEME_LENGTH} from '#/lib/constants'
import {usePalette} from '#/lib/hooks/usePalette'
import {s} from '#/lib/styles'
import {Text} from '../../util/text/Text'

const DANGER_LENGTH = MAX_GRAPHEME_LENGTH

export function CharProgress({count}: {count: number}) {
export function CharProgress({
count,
max,
style,
textStyle,
size,
}: {
count: number
max?: number
style?: StyleProp<ViewStyle>
textStyle?: StyleProp<TextStyle>
size?: number
}) {
const maxLength = max || MAX_GRAPHEME_LENGTH
const pal = usePalette('default')
const textColor = count > DANGER_LENGTH ? '#e60000' : pal.colors.text
const circleColor = count > DANGER_LENGTH ? '#e60000' : pal.colors.link
const textColor = count > maxLength ? '#e60000' : pal.colors.text
const circleColor = count > maxLength ? '#e60000' : pal.colors.link
return (
<>
<Text style={[s.mr10, s.tabularNum, {color: textColor}]}>
{MAX_GRAPHEME_LENGTH - count}
<View style={style}>
<Text style={[s.mr10, s.tabularNum, {color: textColor}, textStyle]}>
{maxLength - count}
</Text>
<View>
{count > DANGER_LENGTH ? (
{count > maxLength ? (
<ProgressPie
size={30}
size={size ?? 30}
borderWidth={4}
borderColor={circleColor}
color={circleColor}
progress={Math.min(
(count - MAX_GRAPHEME_LENGTH) / MAX_GRAPHEME_LENGTH,
1,
)}
progress={Math.min((count - maxLength) / maxLength, 1)}
/>
) : (
<ProgressCircle
size={30}
size={size ?? 30}
borderWidth={1}
borderColor={pal.colors.border}
color={circleColor}
progress={count / MAX_GRAPHEME_LENGTH}
progress={count / maxLength}
/>
)}
</View>
</>
</View>
)
}
Loading

0 comments on commit 76d63f9

Please sign in to comment.