From aebb27e8e979fed43f0f72142332cd3a81f454ff Mon Sep 17 00:00:00 2001 From: JDMathew Date: Thu, 23 Jan 2025 00:35:41 -0800 Subject: [PATCH 1/6] Add AutofocusContainer doc --- .../docs/components/AutofocusContainer.md | 50 +++++++++++++++++++ 1 file changed, 50 insertions(+) create mode 100644 packages/core/docs/components/AutofocusContainer.md diff --git a/packages/core/docs/components/AutofocusContainer.md b/packages/core/docs/components/AutofocusContainer.md new file mode 100644 index 00000000..da812b31 --- /dev/null +++ b/packages/core/docs/components/AutofocusContainer.md @@ -0,0 +1,50 @@ +# AutofocusContainer + +It is a utility component that automatically calls the [useFocus](../hooks/useFocus) hook when it is mounted. + +## Usage + +```jsx +import {AutofocusContainer} from "react-native-ama"; + +{children} +``` + +## Example + +This component can be used to move the focus on dynamically shown components, for example: + +```jsx title="UseTimedAction.screen.tsx" + + + {showContent ? ( + + Great! You did it :) + + + + ) : null} + +``` + +In this example, we want to move the focus to the view rendered once the user taps on "Show timed content". + +:::warning + +The autofocus works only if the container contains accessible elements, like Text, Buttons, etc. +Alternatively, bypassing the [accessibilityLabel](#accessibilitylabel) property, the child will be wrapped in an accessible View. +::: + +## Accessibility + +- Once the focus is moved makes, the screen reader announces all the text present in that container + +## Props + +### `accessibilityLabel` + +The label to assign to the wrapping View container. + +## Related guidelines + +- [Focus](/guidelines/focus) From 71d9377a63fd7d7857c85ed6ef4ca2d2173fa778 Mon Sep 17 00:00:00 2001 From: JDMathew Date: Thu, 23 Jan 2025 00:35:56 -0800 Subject: [PATCH 2/6] add components category --- packages/core/docs/components/_category_.json | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 packages/core/docs/components/_category_.json diff --git a/packages/core/docs/components/_category_.json b/packages/core/docs/components/_category_.json new file mode 100644 index 00000000..92f583da --- /dev/null +++ b/packages/core/docs/components/_category_.json @@ -0,0 +1,5 @@ +{ + "label": "Components", + "collapsible": true, + "collapsed": false +} From 74da046457edc54a987decdd6b4aa7d5274179ba Mon Sep 17 00:00:00 2001 From: JDMathew Date: Thu, 23 Jan 2025 00:36:20 -0800 Subject: [PATCH 3/6] update hooks category --- packages/core/docs/hooks/_category_.json | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/core/docs/hooks/_category_.json b/packages/core/docs/hooks/_category_.json index 2a88a556..15dc8a9e 100644 --- a/packages/core/docs/hooks/_category_.json +++ b/packages/core/docs/hooks/_category_.json @@ -1,3 +1,5 @@ { - "label": "Hooks" + "label": "Hooks", + "collapsible": true, + "collapsed": false } From 4e1fc21fea02abb6e3267d0104db57718145200b Mon Sep 17 00:00:00 2001 From: JDMathew Date: Thu, 23 Jan 2025 13:13:36 -0800 Subject: [PATCH 4/6] move AMAProvider into components --- packages/core/docs/{ => components}/AMAProvider.md | 0 packages/core/docs/core.md | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename packages/core/docs/{ => components}/AMAProvider.md (100%) diff --git a/packages/core/docs/AMAProvider.md b/packages/core/docs/components/AMAProvider.md similarity index 100% rename from packages/core/docs/AMAProvider.md rename to packages/core/docs/components/AMAProvider.md diff --git a/packages/core/docs/core.md b/packages/core/docs/core.md index df2e0135..f5d0cb80 100644 --- a/packages/core/docs/core.md +++ b/packages/core/docs/core.md @@ -39,7 +39,7 @@ For more detailed information about the config file, please refer to [this docum ## Usage -You must include the [AMAProvider](./AMAProvider.md) in your app, as some components and hooks require it. +You must include the [AMAProvider](./components/AMAProvider.md) in your app, as some components and hooks require it. ```jsx {2-4,6,8-9} import { AMAProvider } from '@react-native-ama/core'; From 5352cf5131ce25747737c3fad74f1dd62c28a9c7 Mon Sep 17 00:00:00 2001 From: JDMathew Date: Thu, 23 Jan 2025 13:15:53 -0800 Subject: [PATCH 5/6] removed props from usage --- packages/core/docs/components/AutofocusContainer.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/core/docs/components/AutofocusContainer.md b/packages/core/docs/components/AutofocusContainer.md index da812b31..11ae4b73 100644 --- a/packages/core/docs/components/AutofocusContainer.md +++ b/packages/core/docs/components/AutofocusContainer.md @@ -5,9 +5,9 @@ It is a utility component that automatically calls the [useFocus](../hooks/useFo ## Usage ```jsx -import {AutofocusContainer} from "react-native-ama"; +import { AutofocusContainer } from 'react-native-ama' -{children} +{children} ``` ## Example From b373c3562128312fb314a49bb6f01ba9bc80b139 Mon Sep 17 00:00:00 2001 From: JDMathew Date: Thu, 23 Jan 2025 13:25:23 -0800 Subject: [PATCH 6/6] updated warning --- .../docs/components/AutofocusContainer.md | 25 +++++++++++++------ 1 file changed, 17 insertions(+), 8 deletions(-) diff --git a/packages/core/docs/components/AutofocusContainer.md b/packages/core/docs/components/AutofocusContainer.md index 11ae4b73..35e8306e 100644 --- a/packages/core/docs/components/AutofocusContainer.md +++ b/packages/core/docs/components/AutofocusContainer.md @@ -5,9 +5,9 @@ It is a utility component that automatically calls the [useFocus](../hooks/useFo ## Usage ```jsx -import { AutofocusContainer } from 'react-native-ama' +import { AutofocusContainer } from 'react-native-ama'; -{children} +{children}; ``` ## Example @@ -29,12 +29,6 @@ This component can be used to move the focus on dynamically shown components, fo In this example, we want to move the focus to the view rendered once the user taps on "Show timed content". -:::warning - -The autofocus works only if the container contains accessible elements, like Text, Buttons, etc. -Alternatively, bypassing the [accessibilityLabel](#accessibilitylabel) property, the child will be wrapped in an accessible View. -::: - ## Accessibility - Once the focus is moved makes, the screen reader announces all the text present in that container @@ -45,6 +39,21 @@ Alternatively, bypassing the [accessibilityLabel](#accessibilitylabel) property, The label to assign to the wrapping View container. +### `wrapChildrenInAccessibleView` + +Weather or not the child should be wrapped in an accessible View. By default, this is the case. + +:::warning +**Autofocus may not work as expected when this prop is false!** + +If `wrapChildrenInAccessibleView` is set to `false` the children of the AutofocusContainer will not be wrapped in an accessible view and **autofocus** will only works if the container contains accessible elements, like Text, Buttons, etc. + +::: + +| Type | Default | +| ------- | ------- | +| boolean | true | + ## Related guidelines - [Focus](/guidelines/focus)