From 8ee325e73d927a34ef23a776c5404e9556f0d94a Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Fri, 8 Mar 2024 14:31:50 -0800
Subject: Make ALF prompt scrollable for accessibility (#3150)

* make alf prompt scrollable

* padding
---
 src/components/Prompt.tsx | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

(limited to 'src/components/Prompt.tsx')

diff --git a/src/components/Prompt.tsx b/src/components/Prompt.tsx
index 8e55bd834..28ec2d036 100644
--- a/src/components/Prompt.tsx
+++ b/src/components/Prompt.tsx
@@ -3,7 +3,7 @@ import {View, PressableProps} from 'react-native'
 import {msg} from '@lingui/macro'
 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 {Button} from '#/components/Button'
 
@@ -25,6 +25,7 @@ export function Outer({
 }: React.PropsWithChildren<{
   control: Dialog.DialogOuterProps['control']
 }>) {
+  const {gtMobile} = useBreakpoints()
   const titleId = React.useId()
   const descriptionId = React.useId()
 
@@ -38,12 +39,12 @@ export function Outer({
       <Context.Provider value={context}>
         <Dialog.Handle />
 
-        <Dialog.Inner
+        <Dialog.ScrollableInner
           accessibilityLabelledBy={titleId}
           accessibilityDescribedBy={descriptionId}
-          style={[{width: 'auto', maxWidth: 400}]}>
+          style={[gtMobile ? {width: 'auto', maxWidth: 400} : a.w_full]}>
           {children}
-        </Dialog.Inner>
+        </Dialog.ScrollableInner>
       </Context.Provider>
     </Dialog.Outer>
   )
@@ -71,8 +72,17 @@ export function Description({children}: React.PropsWithChildren<{}>) {
 }
 
 export function Actions({children}: React.PropsWithChildren<{}>) {
+  const {gtMobile} = useBreakpoints()
+
   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}
     </View>
   )
-- 
cgit 1.4.1


From 62e57c3b08020e17b3266876de342996c8bd12db Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Fri, 8 Mar 2024 14:43:28 -0800
Subject: Adjustments to ALF prompt buttons (Dialogs Pt. 2) (#3144)

* Improve a11y on ios

* Format

* Remove android

* Fix android

* small adjustment to buttons in prompt

* full width below gtmobile

* Revert some changes

* use sharedvalue for `importantForAccessibility`

* add back `isOpen`

* fix some more types

* small adjustment to buttons in prompt

* full width below gtmobile

---------

Co-authored-by: Eric Bailey <git@esb.lol>
---
 src/components/Button.tsx | 4 +++-
 src/components/Prompt.tsx | 9 +++++----
 2 files changed, 8 insertions(+), 5 deletions(-)

(limited to 'src/components/Prompt.tsx')

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 5361be963..d3bf73cc3 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -27,7 +27,7 @@ export type ButtonColor =
   | 'gradient_sunset'
   | 'gradient_nordic'
   | 'gradient_bonfire'
-export type ButtonSize = 'tiny' | 'small' | 'large'
+export type ButtonSize = 'tiny' | 'small' | 'medium' | 'large'
 export type ButtonShape = 'round' | 'square' | 'default'
 export type VariantProps = {
   /**
@@ -274,6 +274,8 @@ export function Button({
     if (shape === 'default') {
       if (size === 'large') {
         baseStyles.push({paddingVertical: 15}, a.px_2xl, a.rounded_sm, a.gap_md)
+      } else if (size === 'medium') {
+        baseStyles.push({paddingVertical: 12}, a.px_2xl, a.rounded_sm, a.gap_md)
       } else if (size === 'small') {
         baseStyles.push({paddingVertical: 9}, a.px_lg, a.rounded_sm, a.gap_sm)
       } else if (size === 'tiny') {
diff --git a/src/components/Prompt.tsx b/src/components/Prompt.tsx
index 28ec2d036..3b245c440 100644
--- a/src/components/Prompt.tsx
+++ b/src/components/Prompt.tsx
@@ -78,10 +78,9 @@ export function Actions({children}: React.PropsWithChildren<{}>) {
     <View
       style={[
         a.w_full,
-        a.flex_row,
         a.gap_sm,
         a.justify_end,
-        gtMobile && [a.pb_4xl],
+        gtMobile ? [a.flex_row] : [a.flex_col, a.pt_md, a.pb_4xl],
       ]}>
       {children}
     </View>
@@ -92,12 +91,13 @@ export function Cancel({
   children,
 }: React.PropsWithChildren<{onPress?: PressableProps['onPress']}>) {
   const {_} = useLingui()
+  const {gtMobile} = useBreakpoints()
   const {close} = Dialog.useDialogContext()
   return (
     <Button
       variant="solid"
       color="secondary"
-      size="small"
+      size={gtMobile ? 'small' : 'medium'}
       label={_(msg`Cancel`)}
       onPress={() => close()}>
       {children}
@@ -110,6 +110,7 @@ export function Action({
   onPress,
 }: React.PropsWithChildren<{onPress?: () => void}>) {
   const {_} = useLingui()
+  const {gtMobile} = useBreakpoints()
   const {close} = Dialog.useDialogContext()
   const handleOnPress = React.useCallback(() => {
     close()
@@ -119,7 +120,7 @@ export function Action({
     <Button
       variant="solid"
       color="primary"
-      size="small"
+      size={gtMobile ? 'small' : 'medium'}
       label={_(msg`Confirm`)}
       onPress={handleOnPress}>
       {children}
-- 
cgit 1.4.1

