Handle screen reader specifically

This commit is contained in:
Eric Bailey
2025-08-04 16:31:23 -05:00
parent f3c4441a3a
commit 7e75f40379
@@ -3,6 +3,7 @@ import {View} from 'react-native'
import {msg, Trans} from '@lingui/macro' import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react' import {useLingui} from '@lingui/react'
import {isAndroid} from '#/platform/detection'
import {Nux} from '#/state/queries/nuxs' import {Nux} from '#/state/queries/nuxs'
import {atoms as a, useTheme} from '#/alf' import {atoms as a, useTheme} from '#/alf'
import {Button, ButtonText} from '#/components/Button' import {Button, ButtonText} from '#/components/Button'
@@ -10,12 +11,13 @@ import {
AnnouncementBadge, AnnouncementBadge,
useAnnouncementState, useAnnouncementState,
} from '#/components/dialogs/BlockingAnnouncements/common' } from '#/components/dialogs/BlockingAnnouncements/common'
import {InlineLinkText} from '#/components/Link' import {InlineLinkText, Link} from '#/components/Link'
import {Span, Text} from '#/components/Typography' import {Text} from '#/components/Typography'
import { import {
AnnouncementDialog, AnnouncementDialog,
useAnnouncementDialogContext, useAnnouncementDialogContext,
} from '#/components/dialogs/BlockingAnnouncements/AnnouncementDialog' } from '#/components/dialogs/BlockingAnnouncements/AnnouncementDialog'
import {useA11y} from '#/state/a11y'
export function useLocalState() { export function useLocalState() {
return useAnnouncementState({ return useAnnouncementState({
@@ -28,6 +30,7 @@ export function Announcement() {
const {_} = useLingui() const {_} = useLingui()
const {complete} = useLocalState() const {complete} = useLocalState()
const {close} = useAnnouncementDialogContext() const {close} = useAnnouncementDialogContext()
const {screenReaderEnabled} = useA11y()
const handleClose = useCallback(() => { const handleClose = useCallback(() => {
close() close()
@@ -39,77 +42,134 @@ export function Announcement() {
overridePresentation: true, overridePresentation: true,
to: `https://bsky.social/about/support`, to: `https://bsky.social/about/support`,
label: _(msg`Terms of Service`), label: _(msg`Terms of Service`),
style: linkStyle,
}, },
privacy: { privacy: {
overridePresentation: true, overridePresentation: true,
to: `https://bsky.social/about/support`, to: `https://bsky.social/about/support`,
label: _(msg`Privacy Policy`), label: _(msg`Privacy Policy`),
style: linkStyle,
}, },
copyright: { copyright: {
overridePresentation: true, overridePresentation: true,
to: `https://bsky.social/about/support`, to: `https://bsky.social/about/support`,
label: _(msg`Copyright Policy`), label: _(msg`Copyright Policy`),
style: linkStyle,
}, },
guidelines: { guidelines: {
overridePresentation: true, overridePresentation: true,
to: `https://bsky.social/about/support`, to: `https://bsky.social/about/support`,
label: _(msg`Community Guidelines`), label: _(msg`Community Guidelines`),
style: linkStyle,
}, },
blog: { blog: {
overridePresentation: true, overridePresentation: true,
to: `https://bsky.social/about/support`, to: `https://bsky.social/about/support`,
label: _(msg`Our blog post`), label: _(msg`Our blog post`),
style: linkStyle,
}, },
} }
const linkButtonStyles = {
overridePresentation: true,
color: 'secondary',
size: 'small',
} as const
const label = isAndroid
? _(
msg`We’re updating our Terms of Service, Privacy Policy, and Copyright Policy, effective September 1st, 2025. We're also updating our Community Guidelines, and we want your input! These new guidelines will take effect on October 1st, 2025. Learn more about these changes and how to share your thoughts with us by reading our blog post.`,
)
: _(msg`We're updating our policies`)
return ( return (
<AnnouncementDialog label={_(msg`We're updating our policies`)}> <AnnouncementDialog label={label}>
<View style={[a.align_start, a.gap_xl]}> <View style={[a.align_start, a.gap_xl]}>
<AnnouncementBadge /> <AnnouncementBadge />
<View style={[a.gap_sm]}> {screenReaderEnabled ? (
<Text style={[a.text_2xl, a.font_bold, a.leading_snug]}> <View style={[a.gap_sm]}>
<Trans>Hey there 👋</Trans> <Text emoji style={[a.text_2xl, a.font_bold, a.leading_snug]}>
</Text> <Trans>Hey there 👋</Trans>
<Text emoji style={[a.leading_snug, a.text_md]}> </Text>
<Trans> <Text style={[a.leading_snug, a.text_md]}>
We’re updating our{' '} <Trans>
<InlineLinkText {...links.terms}>Terms of Service</InlineLinkText> We’re updating our Terms of Service, Privacy Policy, and
,{' '} Copyright Policy, effective September 1st, 2025.
<InlineLinkText {...links.privacy}>Privacy Policy</InlineLinkText> </Trans>
, and{' '} </Text>
<InlineLinkText {...links.copyright}> <Text style={[a.leading_snug, a.text_md]}>
Copyright Policy <Trans>
</InlineLinkText> We're also updating our Community Guidelines, and we want your
, <Span style={[]}>effective September 1st, 2025.</Span> input! These new guidelines will take effect on October 1st,
</Trans> 2025.
</Text> </Trans>
<Text style={[a.leading_snug, a.text_md]}> </Text>
<Trans> <Text style={[a.leading_snug, a.text_md]}>
We're also updating our{' '} <Trans>
<InlineLinkText {...links.guidelines}> Learn more about these changes and how to share your thoughts
Community Guidelines with us by reading our blog post.
</InlineLinkText> </Trans>
, <Span style={[]}>and we want your input!</Span> These new </Text>
guidelines will take effect on{' '}
<Span style={[]}>October 1st, 2025.</Span> <Link {...links.terms} {...linkButtonStyles}>
</Trans> <ButtonText>
</Text> <Trans>Terms of Service</Trans>
<Text emoji style={[a.leading_snug, a.text_md]}> </ButtonText>
<Trans> </Link>
Learn more about these changes and how to share your thoughts with <Link {...links.privacy} {...linkButtonStyles}>
us by{' '} <ButtonText>
<InlineLinkText {...links.blog}> <Trans>Privacy Policy</Trans>
reading our blog post. </ButtonText>
</InlineLinkText> </Link>
</Trans> <Link {...links.copyright} {...linkButtonStyles}>
</Text> <ButtonText>
</View> <Trans>Copyright Policy</Trans>
</ButtonText>
</Link>
<Link {...links.blog} {...linkButtonStyles}>
<ButtonText>
<Trans>Read our blog post</Trans>
</ButtonText>
</Link>
</View>
) : (
<View style={[a.gap_sm]}>
<Text emoji style={[a.text_2xl, a.font_bold, a.leading_snug]}>
<Trans>Hey there 👋</Trans>
</Text>
<Text style={[a.leading_snug, a.text_md]}>
<Trans>
We’re updating our{' '}
<InlineLinkText {...links.terms} style={linkStyle}>
Terms of Service
</InlineLinkText>
,{' '}
<InlineLinkText {...links.privacy} style={linkStyle}>
Privacy Policy
</InlineLinkText>
, and{' '}
<InlineLinkText {...links.copyright} style={linkStyle}>
Copyright Policy
</InlineLinkText>
, effective September 1st, 2025.
</Trans>
</Text>
<Text style={[a.leading_snug, a.text_md]}>
<Trans>
We're also updating our{' '}
<InlineLinkText {...links.guidelines} style={linkStyle}>
Community Guidelines
</InlineLinkText>
, and we want your input! These new guidelines will take effect
on October 1st, 2025.
</Trans>
</Text>
<Text style={[a.leading_snug, a.text_md]}>
<Trans>
Learn more about these changes and how to share your thoughts
with us by{' '}
<InlineLinkText {...links.blog} style={linkStyle}>
reading our blog post.
</InlineLinkText>
</Trans>
</Text>
</View>
)}
<View style={[a.w_full, a.gap_md]}> <View style={[a.w_full, a.gap_md]}>
<Button <Button