Make ALF prompt scrollable for accessibility (#3150)
* make alf prompt scrollable * paddingzio/stable
parent
0f9f08b1ef
commit
8ee325e73d
|
@ -3,7 +3,7 @@ import {View, PressableProps} from 'react-native'
|
||||||
import {msg} from '@lingui/macro'
|
import {msg} from '@lingui/macro'
|
||||||
import {useLingui} from '@lingui/react'
|
import {useLingui} from '@lingui/react'
|
||||||
|
|
||||||
import {useTheme, atoms as a} from '#/alf'
|
import {useTheme, atoms as a, useBreakpoints} from '#/alf'
|
||||||
import {Text} from '#/components/Typography'
|
import {Text} from '#/components/Typography'
|
||||||
import {Button} from '#/components/Button'
|
import {Button} from '#/components/Button'
|
||||||
|
|
||||||
|
@ -25,6 +25,7 @@ export function Outer({
|
||||||
}: React.PropsWithChildren<{
|
}: React.PropsWithChildren<{
|
||||||
control: Dialog.DialogOuterProps['control']
|
control: Dialog.DialogOuterProps['control']
|
||||||
}>) {
|
}>) {
|
||||||
|
const {gtMobile} = useBreakpoints()
|
||||||
const titleId = React.useId()
|
const titleId = React.useId()
|
||||||
const descriptionId = React.useId()
|
const descriptionId = React.useId()
|
||||||
|
|
||||||
|
@ -38,12 +39,12 @@ export function Outer({
|
||||||
<Context.Provider value={context}>
|
<Context.Provider value={context}>
|
||||||
<Dialog.Handle />
|
<Dialog.Handle />
|
||||||
|
|
||||||
<Dialog.Inner
|
<Dialog.ScrollableInner
|
||||||
accessibilityLabelledBy={titleId}
|
accessibilityLabelledBy={titleId}
|
||||||
accessibilityDescribedBy={descriptionId}
|
accessibilityDescribedBy={descriptionId}
|
||||||
style={[{width: 'auto', maxWidth: 400}]}>
|
style={[gtMobile ? {width: 'auto', maxWidth: 400} : a.w_full]}>
|
||||||
{children}
|
{children}
|
||||||
</Dialog.Inner>
|
</Dialog.ScrollableInner>
|
||||||
</Context.Provider>
|
</Context.Provider>
|
||||||
</Dialog.Outer>
|
</Dialog.Outer>
|
||||||
)
|
)
|
||||||
|
@ -71,8 +72,17 @@ export function Description({children}: React.PropsWithChildren<{}>) {
|
||||||
}
|
}
|
||||||
|
|
||||||
export function Actions({children}: React.PropsWithChildren<{}>) {
|
export function Actions({children}: React.PropsWithChildren<{}>) {
|
||||||
|
const {gtMobile} = useBreakpoints()
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View style={[a.w_full, a.flex_row, a.gap_sm, a.justify_end]}>
|
<View
|
||||||
|
style={[
|
||||||
|
a.w_full,
|
||||||
|
a.flex_row,
|
||||||
|
a.gap_sm,
|
||||||
|
a.justify_end,
|
||||||
|
gtMobile && [a.pb_4xl],
|
||||||
|
]}>
|
||||||
{children}
|
{children}
|
||||||
</View>
|
</View>
|
||||||
)
|
)
|
||||||
|
|
Loading…
Reference in New Issue