From ad15144c0c39c55f4737bec2463fc831e90df21c Mon Sep 17 00:00:00 2001 From: JDMathew Date: Wed, 7 Aug 2024 17:23:07 -0700 Subject: [PATCH 1/3] fix links for new docs --- packages/core/docs/core.md | 2 +- packages/core/docs/hooks/useFocus.md | 2 +- packages/core/docs/hooks/useTimedAction.md | 2 +- packages/forms/docs/Form.md | 2 +- packages/forms/docs/FormField.md | 2 +- packages/forms/docs/FormSwitch.md | 4 +- packages/forms/docs/TextInput.mdx | 199 ++++++++++++++++++ packages/forms/docs/useFormField.md | 6 +- packages/lists/docs/DynamicFlatList.mdx | 4 +- packages/lists/docs/FlatList.mdx | 4 +- packages/lists/docs/ListWrapper.mdx | 2 +- packages/lists/docs/StaticFlatList.mdx | 2 +- .../react-native/docs/ExpandablePressable.mdx | 20 +- packages/react-native/docs/Pressable.md | 6 +- packages/react-native/docs/SwitchListItem.mdx | 2 +- packages/react-native/docs/SwitchWrapper.mdx | 8 +- packages/react-native/docs/Text.md | 12 +- .../react-native/docs/TouchableOpacity.mdx | 10 +- .../react-native/docs/hooks/useExpandable.md | 12 +- .../react-native/docs/hooks/usePressable.mdx | 22 +- packages/react-native/docs/hooks/useSwitch.md | 6 +- 21 files changed, 264 insertions(+), 65 deletions(-) create mode 100644 packages/forms/docs/TextInput.mdx diff --git a/packages/core/docs/core.md b/packages/core/docs/core.md index 13c64af5..8f8e1c0a 100644 --- a/packages/core/docs/core.md +++ b/packages/core/docs/core.md @@ -35,7 +35,7 @@ ln -s ../../../ama.rules.json dist/ama.rules.json cd - ``` -For more detailed information about the config file, please refer to [this documentation](../../../website/docs/ama/config-file.md). +For more detailed information about the config file, please refer to [this documentation](/docs/config-file). ## Usage diff --git a/packages/core/docs/hooks/useFocus.md b/packages/core/docs/hooks/useFocus.md index b8319e4c..53dd7811 100644 --- a/packages/core/docs/hooks/useFocus.md +++ b/packages/core/docs/hooks/useFocus.md @@ -69,4 +69,4 @@ const MyFancyScreen = () => { ## Related guidelines -- [Focus](../../../../website/guidelines/focus.md) +- [Focus](/guidelines/focus) diff --git a/packages/core/docs/hooks/useTimedAction.md b/packages/core/docs/hooks/useTimedAction.md index 90c13e0d..418b9011 100644 --- a/packages/core/docs/hooks/useTimedAction.md +++ b/packages/core/docs/hooks/useTimedAction.md @@ -34,4 +34,4 @@ await onTimeout(() => { ## Related guidelines -- [Timed actions](../../../../website/guidelines/timed-actions.md) +- [Timed actions](/guidelines/timed-actions) diff --git a/packages/forms/docs/Form.md b/packages/forms/docs/Form.md index 683b5c2d..3a6f2d67 100644 --- a/packages/forms/docs/Form.md +++ b/packages/forms/docs/Form.md @@ -2,7 +2,7 @@ import { Required } from '@site/src/components'; # Form -The `
` component provides a "local" context for the [`TextInput`](./TextInput.mdx), [`FormField`](./FormField.md) and [`SwitchListItem`](./SwitchListItem.md) components. +The `` component provides a "local" context for the [`TextInput`](./TextInput.mdx), [`FormField`](./FormField.md) and [`SwitchListItem`](/react-native/SwitchListItem) components. The provider hosts the `ref` values used by the [TextInput](./TextInput.mdx) to know which [`returnKey`](./TextInput.mdx#returnkeytype) and what would be the next field to focus. diff --git a/packages/forms/docs/FormField.md b/packages/forms/docs/FormField.md index 65186782..3f6e6afd 100644 --- a/packages/forms/docs/FormField.md +++ b/packages/forms/docs/FormField.md @@ -2,7 +2,7 @@ import { Required } from '@site/src/components'; # Form.Field -This is a generic form field element capable of receiving focus from a [TextInput](./TextInput.mdx) components or by using the [useFocus](../hooks/useFocus.md) hook. +This is a generic form field element capable of receiving focus from a [TextInput](./TextInput.mdx) components or by using the [useFocus](/core/hooks/useFocus) hook. ## Example diff --git a/packages/forms/docs/FormSwitch.md b/packages/forms/docs/FormSwitch.md index c87beeff..1e0e3b5a 100644 --- a/packages/forms/docs/FormSwitch.md +++ b/packages/forms/docs/FormSwitch.md @@ -1,6 +1,6 @@ # Form.Switch (FormSwitch) -Provides Switch functionality to be used in Forms, it is simply a compound component of the wrapper [FormField](./FormField.md) and controller [SwitchListItem](../../react-native/docs/SwitchListItem.md) combined for easy of use so you don't need to roll your own. +Provides Switch functionality to be used in Forms, it is simply a compound component of the wrapper [FormField](./FormField.md) and controller [SwitchListItem](/react-native/SwitchListItem) combined for easy of use so you don't need to roll your own. ## Usage @@ -19,4 +19,4 @@ import { Form, FormSwitch } from '@react-native-ama/forms'; ## Props -FormSwitch accepts all [SwitchListItem](../../react-native/docs/SwitchListItem.mdx#Props) Props +FormSwitch accepts all [SwitchListItem](/react-native/SwitchListItem#Props) Props diff --git a/packages/forms/docs/TextInput.mdx b/packages/forms/docs/TextInput.mdx new file mode 100644 index 00000000..77cced18 --- /dev/null +++ b/packages/forms/docs/TextInput.mdx @@ -0,0 +1,199 @@ +import { DevOnly, Required } from '@site/src/components'; + +# TextInput + +TextInput is an extension of the [React Native TextInput](https://reactnative.dev/docs/textinput) component, [focused on accessibility](#accessibility-improvements). + +```tsx +import { TextInput } from 'react-native-ama'; + + setText(newText)} + defaultValue={text} + label={First name:} + labelPosition="afterText" + returnKeyType="next" + nextFormField={nextFormField} +/>; +``` + +## Accessibility improvements + +Compared to the default React Native component, this custom component: + +- Uses the given label text as `accessibilityLabel`; if none is provided +- Hides the label from the screen reader (as it would provide redundant information) +- Handles the value `returnKeyType` +- Handles focusing the next form field when `returnKeyType` is **next** +- Checks for keyboard trap + +### accessibilityLabel + +The input field must have an `accessibilityLabel`, and also its corresponding must be hidden from the screen reader to avoid redundant announcement of the same label. + +### returnKeyType + +When the user lands on a `` the [`returnKeyType`](https://reactnative.dev/docs/textinput#returnkeytype) needs to be handled allowing them to either focus the next control, when `returnKeyType="next"`, or submit the form, when `returnKeyType="done"`. The React Native default `` allows customing the `returnKeyType` prop but leaves the developer to handle the action when the button is pressed. + +Instead, the AMA customised `TextInput` automatically handles the property `returnKeyType` and its action: + +- If the `TextInput` is the last one of the [Form](./Form.md) then sets `returnKeyType="done"`, otherwise `returnKeyType="next"` +- The next key focuses the next `TextInput` or [FormField](./FormField.md) +- The done button submits the [Form](./Form.md) + +:::note + +AMA does not alter the "returnKeyType" when manually passed as a prop. +::: + +### Keyboard trap + +Once the user presses the **next** key, AMA checks that the: + +- The current `TextInput` does no longer have the focus +- If the next field is a `TextInput`, then check if it gained the focus + +## Additional Props + +### `labelComponent` + +The custom labelComponent. + +| Type | Default | +|-------------|-----------| +| JSX.Element | undefined | + +If no accessibilityLabel is provided, the component children are used to generate the one. +Also, the label is modified, and the following prop added: + +- `importantForAccessibility: no` +- `accessibilityElementsHidden: true` + +So, the label itself is made hidden from the screen reader. + +:::info + +If the label content ends with a \*, this is stripped from the `accessibilityLabel`, example: + +```jsx + setText(newText)} + defaultValue={text} + label={First name:*} + labelPosition="afterText" + returnKeyType="next" + nextTextInput={lastNameRef} +/> +``` + +The `accessibilityLabel` generate is: **"First name:"** +::: + +### `labelPosition` + +Specify where to render the label. + +| Type | Default | +|-----------------|--------------| +| 'beforeInput' \| 'afterInput' | 'beforeInput' | + +### `nextFormField` _(optional)_ + + +This parameter specifies the next form field to focus on when the next button is pressed. + +| Type | Default | +|-----------|-----------| +| RefObject | undefined | + +#### Example + +```jsx + setText(newText)} + defaultValue={text} + label={Last name:} + returnKeyType="next" + nextFormField={emailRef} + ref={lastNameRef} +/> +``` + +### `id` + +The field ID. This info is stored, with the field `ref`, inside the [](./Form) component. + +| Type | Default | +|--------|-----------| +| string | undefined | + +### `nextFieldId` + +The ID of the next field to focus when the user taps on the `next` button of the keyboard + +| Type | Default | +|--------|-----------| +| string | undefined | + +### `hasValidation` + +This property is used to know if the input can display an error, in case of failed validation; and if so is used to: + pf +1. Set the error, in case of failure, as part of the accessibilityHint +2. Hides the [errorComponent](#errorcomponent) from the accessibility tree to prevent redundant information for the user + + +Here can be find more information about [error handling in Forms](../guidelines/forms#errors) + +| Type | Default | +|---------|-----------| +| boolean | undefined | + +### `hasError` + +If true the component sets the given error as part of the `accessibilityHint` + +| Type | Default | +|---------|-----------| +| boolean | undefined | + +:::info + +The component will try to extract any text within the [errorComponent](#errorcomponent) if no [errorText](#errorText) is provided +::: + +### `errorComponent` + +The error component to render in case of `hasError = true`. The position of the component can be changed using the [errorPosition](#errorposition) property. + +| Type | Default | +|-------------|-----------| +| JSX.Element | undefined | + +:::info + +The component is automatically modified with the following properties added: + +- `importantForAccessibility: no` +- `accessibilityElementsHidden: true` + +to hide it from the accessibility tree. +::: + +### `errorPosition` + +The position where to render the [errorComponent](#errorcomponent) + +| Type | Default | +|-----------------|--------------| +| 'belowLabel' \| 'afterInput' | 'afterInput' | + +## Related guidelines + +- [Forms](../guidelines/forms) diff --git a/packages/forms/docs/useFormField.md b/packages/forms/docs/useFormField.md index 86e64f63..410659b0 100644 --- a/packages/forms/docs/useFormField.md +++ b/packages/forms/docs/useFormField.md @@ -1,6 +1,6 @@ # useFormField -This hook can be used to create a focusable custom field for the [``](../components/Form.md) provider and is used to track the ref of the focusable component. +This hook can be used to create a focusable custom field for the [``](./Form.md) provider and is used to track the ref of the focusable component. ## Usage @@ -10,7 +10,7 @@ import { useFormField } from 'react-native-ama'; const { focusNextFormField, isLastField } = useFormField(refComponent); ``` -- **focusNextFormField**: focuses the next focusable element in the form, if any, otherwise triggers the `onSubmit` +- **focusNextFormField**: focuses the next focusable element in the form, if any, otherwise triggers the `onSubmit` - **isLastField**: checks if the component is the last focusable form element ## Example @@ -29,7 +29,7 @@ const MyCustomComponent = () => { :::note -The [`FormField`](../components/FormField.md) already uses this hook under the hook. +The [`FormField`](./FormField.md) already uses this hook under the hook. ::: diff --git a/packages/lists/docs/DynamicFlatList.mdx b/packages/lists/docs/DynamicFlatList.mdx index 1d223e4e..5168d070 100644 --- a/packages/lists/docs/DynamicFlatList.mdx +++ b/packages/lists/docs/DynamicFlatList.mdx @@ -35,7 +35,7 @@ component: [ListWrapper](./ListWrapper.mdx). ### Dynamic list A dynamic list must announce the number of items displayed if they change due to filtering. -Check [here](../../../website/guidelines/lists-grids.md#number-of-results) for more info. +Check [here](/guidelines/lists-grids#number-of-results) for more info. ## Additional props @@ -110,7 +110,7 @@ The number of columns of the list. ## Related guidelines -- [Lists & Grids](../../../website/guidelines/lists-grids.md) +- [Lists & Grids](/guidelines/lists-grids) [^1]: The announcement is made only when the list is filtered, and the number of items displayed is different from the original one [^2]: This is with the default behaviour that can be customised via the [isPlural](#isplural) prop diff --git a/packages/lists/docs/FlatList.mdx b/packages/lists/docs/FlatList.mdx index 33f6e358..ce8ad985 100644 --- a/packages/lists/docs/FlatList.mdx +++ b/packages/lists/docs/FlatList.mdx @@ -32,7 +32,7 @@ To provide this accessibility feature AMA wraps the list in the custom native co ### Dynamic list -A dynamic list must announce the number of items displayed if they change due to filtering. Check [here](../../../website/guidelines/lists-grids.md#number-of-results) for more info. +A dynamic list must announce the number of items displayed if they change due to filtering. Check [here](/guidelines/lists-grids#number-of-results) for more info. ## Props @@ -45,4 +45,4 @@ A dynamic list must announce the number of items displayed if they change due to ## Related guidelines -- [Lists & Grids](../../../website/guidelines/lists-grids.md) +- [Lists & Grids](/guidelines/lists-grids) diff --git a/packages/lists/docs/ListWrapper.mdx b/packages/lists/docs/ListWrapper.mdx index 23dc4e63..2cfefe86 100644 --- a/packages/lists/docs/ListWrapper.mdx +++ b/packages/lists/docs/ListWrapper.mdx @@ -37,6 +37,6 @@ The default value of **1** makes TalkBack read: **in list** / **out of list**, w ## Related guidelines -- [Lists & Grids](../../../website/guidelines/lists-grids.md) +- [Lists & Grids](/guidelines/lists-grids) [^1]: The component is internally used by [FlatList](./FlatList.mdx), [DynamicFlatList](./DynamicFlatList.mdx) and [StaticFlatList](./StaticFlatList.mdx) diff --git a/packages/lists/docs/StaticFlatList.mdx b/packages/lists/docs/StaticFlatList.mdx index 59824a3d..58dc5efc 100644 --- a/packages/lists/docs/StaticFlatList.mdx +++ b/packages/lists/docs/StaticFlatList.mdx @@ -46,4 +46,4 @@ The number of columns of the list/grid. ## Related guidelines -- [Lists & Grids](../../../website/guidelines/lists-grids.md) +- [Lists & Grids](/guidelines/lists-grids) diff --git a/packages/react-native/docs/ExpandablePressable.mdx b/packages/react-native/docs/ExpandablePressable.mdx index 805a33b4..99183363 100644 --- a/packages/react-native/docs/ExpandablePressable.mdx +++ b/packages/react-native/docs/ExpandablePressable.mdx @@ -49,24 +49,24 @@ The hook automatically: Compared to the default React Native component, this custom component: - Forces the use of `accessibilityLabel` -- Performs a [Minimum Size](../../../website/guidelines/minimum-size.md) check -- Performs a [contrast checker](../../../website/guidelines/contrast.md) between its background color and its children color +- Performs a [Minimum Size](/guidelines/minimum-size) check +- Performs a [contrast checker](/guidelines/contrast) between its background color and its children color ### accessibilityRole The `accessibilityRole` property is used by the screen reader to announce the kind of element focused on. If the property is omitted, the user might have little to no clue what could happen if the element is triggered. -[Check here for more info](../../../website/guidelines/accessibility-role.md) +[Check here for more info](/guidelines/accessibility-role) ### accessibilityLabel The `accessibilityLabel` property is the first thing announced by the screen reader when the elements gain the focus; then, it announces its role. If the property is omitted, the user might have little to no clue what could happen if the element is triggered. -[Check here for more info](../../../website/guidelines/accessibility-label.md) +[Check here for more info](/guidelines/accessibility-label) ### Contrast checker -The component performs a [contrast check](../../../website/guidelines/contrast.md) between its background colour and the children's foreground when in dev mode. +The component performs a [contrast check](/guidelines/contrast) between its background colour and the children's foreground when in dev mode. :::info AMA does also perform a contrast check on disabled button, as a [poor contrast can make them hard to read](https://axesslab.com/disabled-buttons-suck/#they-are-hard-to-see). @@ -74,7 +74,7 @@ AMA does also perform a contrast check on disabled button, as a [poor contrast c ### Minimum size -The component uses the [onLayout](https://reactnative.dev/docs/layoutevent) prop to perform the [minium size check](../../../website/guidelines/minimum-size.md). +The component uses the [onLayout](https://reactnative.dev/docs/layoutevent) prop to perform the [minium size check](/guidelines/minimum-size). ## Props @@ -96,10 +96,10 @@ Indicates whether an expandable element is currently expanded or collapsed. ## Related guidelines -- [Accessibility Label](../../../website/guidelines/accessibility-label.md) -- [Accessibility Role](../../../website/guidelines/accessibility-role.md) -- [Contrast](../../../website/guidelines/contrast.md) -- [Minimum Size](../../../website/guidelines/minimum-size.md) +- [Accessibility Label](/guidelines/accessibility-label) +- [Accessibility Role](/guidelines/accessibility-role) +- [Contrast](/guidelines/contrast) +- [Minimum Size](/guidelines/minimum-size) ## External resources diff --git a/packages/react-native/docs/Pressable.md b/packages/react-native/docs/Pressable.md index 69725685..8b44d03d 100644 --- a/packages/react-native/docs/Pressable.md +++ b/packages/react-native/docs/Pressable.md @@ -16,8 +16,8 @@ In comparison to the default React Native component, this customized component: - Forces the use of `accessibilityRole` and `accessibilityLabel` - `accessibilityState` has been removed as its states `busy`, `checked`, `selected`, `expanded` are exposed as a property -- Performs a [Minimum Size](/guidelines/minimum-size.md) check -- Performs a [contrast checker](/guidelines/contrast.md) between its background color and its children color +- Performs a [Minimum Size](/guidelines/minimum-size) check +- Performs a [contrast checker](/guidelines/contrast) between its background color and its children color @@ -75,7 +75,7 @@ Indicates whether a selectable element is currently selected or not. ### Contrast checker -The component performs a [contrast check](/guidelines/contrast.md) between its background colour and the children's foreground when in dev mode. +The component performs a [contrast check](/guidelines/contrast) between its background colour and the children's foreground when in dev mode. :::info AMA does also perform a contrast check on disabled button, as a [poor contrast can make them hard to read](https://axesslab.com/disabled-buttons-suck/#they-are-hard-to-see). diff --git a/packages/react-native/docs/SwitchListItem.mdx b/packages/react-native/docs/SwitchListItem.mdx index aae30b34..905486ce 100644 --- a/packages/react-native/docs/SwitchListItem.mdx +++ b/packages/react-native/docs/SwitchListItem.mdx @@ -90,4 +90,4 @@ The `SwitchListItem` component, to avoid the switch being individually focusable ## Related guidelines -- [Forms](../../../website/guidelines/forms.md) +- [Forms](/guidelines/forms) diff --git a/packages/react-native/docs/SwitchWrapper.mdx b/packages/react-native/docs/SwitchWrapper.mdx index bdd63e79..fc0aaf23 100644 --- a/packages/react-native/docs/SwitchWrapper.mdx +++ b/packages/react-native/docs/SwitchWrapper.mdx @@ -22,11 +22,11 @@ import {SwitchWrapper} from 'react-native-ama'; The component uses the [useSwitch](./hooks/useSwitch.md) hook under the hood and: -- Sets the [accessibilityRole](../../../website/guidelines/accessibility-role.md) property to **switch** +- Sets the [accessibilityRole](/guidelines/accessibility-role) property to **switch** - Handled the [accessibilityState](https://reactnative.dev/docs/accessibility#accessibilitystate) needed by the Screen Reader -- Performs a [Minimum Size](../../../website/guidelines/minimum-size.md) check -- Performs a check on the [accessibilityLabel](../../../website/guidelines/accessibility-label.md) +- Performs a [Minimum Size](/guidelines/minimum-size) check +- Performs a check on the [accessibilityLabel](/guidelines/accessibility-label) ## Related guidelines -- [Forms](../../../website/guidelines/forms.md) +- [Forms](/guidelines/forms) diff --git a/packages/react-native/docs/Text.md b/packages/react-native/docs/Text.md index 0eb77c5f..00643baa 100644 --- a/packages/react-native/docs/Text.md +++ b/packages/react-native/docs/Text.md @@ -7,18 +7,18 @@ import { Text } from 'react-native-ama'; I'm pressable; ``` - + ## Accessibility improvements Compared to the default React Native component, this one performs the following checks at runtime: -- [Missing accessibilityLabel](../guidelines/text) when using `textTransform: uppercase` style -- [accessibilityLabel in all caps](../guidelines/text) -- Performs a [Minimum Size](../guidelines/minimum-size) check when the component has the property `onPress` set +- [Missing accessibilityLabel](/guidelines/text) when using `textTransform: uppercase` style +- [accessibilityLabel in all caps](/guidelines/text) +- Performs a [Minimum Size](/guidelines/minimum-size) check when the component has the property `onPress` set ### Minimum size -The component uses the [onLayout](https://reactnative.dev/docs/layoutevent) prop to perform the [minium size check](../guidelines/minimum-size.md). +The component uses the [onLayout](https://reactnative.dev/docs/layoutevent) prop to perform the [minium size check](/guidelines/minimum-size). ## Additional Props @@ -27,7 +27,7 @@ The component uses the [onLayout](https://reactnative.dev/docs/layoutevent) prop Allows the screen reader to autofocus the Text element when it is rendered. | Type | Default | -|---------|-----------| +| ------- | --------- | | boolean | undefined | :::note diff --git a/packages/react-native/docs/TouchableOpacity.mdx b/packages/react-native/docs/TouchableOpacity.mdx index ec15dcba..b86ac08a 100644 --- a/packages/react-native/docs/TouchableOpacity.mdx +++ b/packages/react-native/docs/TouchableOpacity.mdx @@ -20,19 +20,19 @@ Compared to the default React Native component, this custom component: - Forces the use of `accessibilityRole` and `accessibilityLabel` - `accessibilityState` has been removed as its states `busy`, `checked`, `selected`, `expanded` are exposed as a property -- Performs a [contrast checker](../guidelines/contrast.md) between its background color and its children color +- Performs a [contrast checker](/guidelines/contrast) between its background color and its children color ### accessibilityRole The `accessibilityRole` property is used by the screen reader to announce the kind of element focused on. If the property is omitted, the user might have little to no clue what could happen if the element is triggered. -[Check here for more info](../guidelines/accessibility-role.md) +[Check here for more info](/guidelines/accessibility-role) ### accessibilityLabel The `accessibilityLabel` property is the first thing announced by the screen reader when the elements gain the focus; then, it announces its role. If the property is omitted, the user might have little to no clue what could happen if the element is triggered. -[Check here for more info](../guidelines/accessibility-label.md) +[Check here for more info](/guidelines/accessibility-label) ### Accessibility states @@ -51,7 +51,7 @@ To simply the syntax, the custom component allows passing those states as proper ### Contrast checker -The component performs a [contrast check](../guidelines/contrast.md) between its background colour and the children's foreground when in dev mode. +The component performs a [contrast check](/guidelines/contrast) between its background colour and the children's foreground when in dev mode. :::note AMA performs the check on both pressed and non-pressed states when passing a function as style. @@ -59,7 +59,7 @@ AMA performs the check on both pressed and non-pressed states when passing a fun ### Minimum size -The component uses the [onLayout](https://reactnative.dev/docs/layoutevent) prop to perform the [minium size check](../guidelines/minimum-size.md). +The component uses the [onLayout](https://reactnative.dev/docs/layoutevent) prop to perform the [minium size check](/guidelines/minimum-size). ## Additional Props diff --git a/packages/react-native/docs/hooks/useExpandable.md b/packages/react-native/docs/hooks/useExpandable.md index 765488ce..9a0bfc7d 100644 --- a/packages/react-native/docs/hooks/useExpandable.md +++ b/packages/react-native/docs/hooks/useExpandable.md @@ -47,8 +47,8 @@ The hook automatically: At runtime, the hook: - Forces the use of `accessibilityLabel` -- Performs a [Minimum Size](../../../../website/guidelines/minimum-size.md) check -- Performs a [contrast checker](../../../../website/guidelines/contrast.md) between its background color and its children color +- Performs a [Minimum Size](/guidelines/minimum-size) check +- Performs a [contrast checker](/guidelines/contrast) between its background color and its children color ## Props @@ -64,7 +64,7 @@ Indicates whether an expandable element is currently expanded or collapsed. ## Related guidelines -- [Accessibility Label](../../../../website/guidelines/accessibility-label.md) -- [Accessibility Role](../../../../website/guidelines/accessibility-role.md) -- [Contrast](../../../../website/guidelines/contrast.md) -- [Minimum Size](../../../../website/guidelines/minimum-size.md) +- [Accessibility Label](/guidelines/accessibility-label) +- [Accessibility Role](/guidelines/accessibility-role) +- [Contrast](/guidelines/contrast) +- [Minimum Size](/guidelines/minimum-size) diff --git a/packages/react-native/docs/hooks/usePressable.mdx b/packages/react-native/docs/hooks/usePressable.mdx index 74bfa809..f6dace46 100644 --- a/packages/react-native/docs/hooks/usePressable.mdx +++ b/packages/react-native/docs/hooks/usePressable.mdx @@ -20,25 +20,25 @@ const pressableProps = usePressable(props, children); At runtime the hook: - Forces the use of `accessibilityRole` and `accessibilityLabel` -- Handles the `accessibilityState` [passed as property](../components/Pressable.mdx#accessibility-states) -- Performs a [Minimum Size](../../../../website/guidelines/minimum-size.md) check -- Performs a [contrast checker](../../../../website/guidelines/contrast.md) between background color and its children color +- Handles the `accessibilityState` [passed as property](../Pressable.md#accessibility-states) +- Performs a [Minimum Size](/guidelines/minimum-size) check +- Performs a [contrast checker](/guidelines/contrast) between background color and its children color ### accessibilityRole The `accessibilityRole` property is used by the screen reader to announce the kind of element focused on. If the property is omitted, the user might have little to no clue what could happen if the element is triggered. -[Check here for more info](../../../../website/guidelines/accessibility-role.md) +[Check here for more info](/guidelines/accessibility-role) ### accessibilityLabel The `accessibilityLabel` property is the first thing announced by the screen reader when the elements gain the focus; then, it announces its role. If the property is omitted, the user might have little to no clue what could happen if the element is triggered. -[Check here for more info](../../../../website/guidelines/accessibility-label.md) +[Check here for more info](/guidelines/accessibility-label) ### Contrast checker -The component performs a [contrast check](../../../../website/guidelines/contrast.md) between its background colour and the children's foreground when in dev mode. +The component performs a [contrast check](/guidelines/contrast) between its background colour and the children's foreground when in dev mode. :::info AMA does also perform a contrast check on disabled button, as a [poor contrast can make them hard to read](https://axesslab.com/disabled-buttons-suck/#they-are-hard-to-see). @@ -46,7 +46,7 @@ AMA does also perform a contrast check on disabled button, as a [poor contrast c ### Minimum size -The component uses the [onLayout](https://reactnative.dev/docs/layoutevent) prop to perform the [minium size check](../../../../website/guidelines/minimum-size.md). +The component uses the [onLayout](https://reactnative.dev/docs/layoutevent) prop to perform the [minium size check](/guidelines/minimum-size). ## Example @@ -72,7 +72,7 @@ const MyCustomPressable: React.FC = ({ ## Related guidelines -- [Accessibility Label](../../../../website/guidelines/accessibility-label.md) -- [Accessibility Role](../../../../website/guidelines/accessibility-role.md) -- [Contrast](../../../../website/guidelines/contrast.md) -- [Minimum Size](../../../../website/guidelines/minimum-size.md) +- [Accessibility Label](/guidelines/accessibility-label) +- [Accessibility Role](/guidelines/accessibility-role) +- [Contrast](/guidelines/contrast) +- [Minimum Size](/guidelines/minimum-size) diff --git a/packages/react-native/docs/hooks/useSwitch.md b/packages/react-native/docs/hooks/useSwitch.md index e3edb703..e97bcee2 100644 --- a/packages/react-native/docs/hooks/useSwitch.md +++ b/packages/react-native/docs/hooks/useSwitch.md @@ -29,11 +29,11 @@ The hook automatically: The `accessibilityLabel` property is the first thing announced by the screen reader when the elements gain the focus; then, it announces its role. If the property is omitted, the user might have little to no clue what could happen if the element is triggered. -[Check here for more info](../../../../website/guidelines/accessibility-label.md) +[Check here for more info](/guidelines/accessibility-label) ### Minimum size -The component uses the [onLayout](https://reactnative.dev/docs/layoutevent) prop to perform the [minium size check](../../../../website/guidelines/minimum-size.md). +The component uses the [onLayout](https://reactnative.dev/docs/layoutevent) prop to perform the [minium size check](/guidelines/minimum-size). ## Example @@ -55,4 +55,4 @@ export const SwitchListItem = () => { ## Related guidelines -- [Forms](../../../../website/guidelines/forms.md) +- [Forms](/guidelines/forms) From c88c2770d631b465b750f797aa2f0d12e8e61d22 Mon Sep 17 00:00:00 2001 From: JDMathew Date: Thu, 8 Aug 2024 13:06:10 -0700 Subject: [PATCH 2/3] fix mdx Form not a component error --- packages/forms/docs/TextInput.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/forms/docs/TextInput.mdx b/packages/forms/docs/TextInput.mdx index 77cced18..140974cf 100644 --- a/packages/forms/docs/TextInput.mdx +++ b/packages/forms/docs/TextInput.mdx @@ -127,7 +127,7 @@ This parameter specifies the next form field to focus on when the next button is ### `id` -The field ID. This info is stored, with the field `ref`, inside the [](./Form) component. +The field ID. This info is stored, with the field `ref`, inside the [``](./Form.md) component. | Type | Default | |--------|-----------| From 78bb47533d9574f802b686fbba64d07b27aefb19 Mon Sep 17 00:00:00 2001 From: JDMathew Date: Thu, 8 Aug 2024 13:06:18 -0700 Subject: [PATCH 3/3] update links --- packages/forms/docs/TextInput.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/forms/docs/TextInput.mdx b/packages/forms/docs/TextInput.mdx index 140974cf..0d313a0f 100644 --- a/packages/forms/docs/TextInput.mdx +++ b/packages/forms/docs/TextInput.mdx @@ -149,7 +149,7 @@ This property is used to know if the input can display an error, in case of fail 2. Hides the [errorComponent](#errorcomponent) from the accessibility tree to prevent redundant information for the user -Here can be find more information about [error handling in Forms](../guidelines/forms#errors) +Here can be find more information about [error handling in Forms](/guidelines/forms#errors) | Type | Default | |---------|-----------| @@ -196,4 +196,4 @@ The position where to render the [errorComponent](#errorcomponent) ## Related guidelines -- [Forms](../guidelines/forms) +- [Forms](/guidelines/forms)