fixes links for new docs (#229)

* fix links for new docs

* fix mdx Form not a component error

* update links

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
 

packages/core/docs/hooks/useFocus.md

@@ -69,4 +69,4 @@ const MyFancyScreen = () => {
 
 ## Related guidelines
 
-- [Focus](../../../../website/guidelines/focus.md)
+- [Focus](/guidelines/focus)

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)

packages/forms/docs/Form.md

@@ -2,7 +2,7 @@ import { Required } from '@site/src/components';
 
 # Form
 
-The `<Form />` component provides a "local" context for the [`TextInput`](./TextInput.mdx), [`FormField`](./FormField.md) and [`SwitchListItem`](./SwitchListItem.md) components.
+The `<Form />` 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.
 

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
 

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

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';
+
+<TextInput
+  style={styles.input}
+  placeholder=""
+  onChangeText={newText => setText(newText)}
+  defaultValue={text}
+  label={<Text style={styles.label}>First name:</Text>}
+  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 <DevOnly />
+
+### 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 `<TextInput />` 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 `<TextInput />` 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
+
+### <Required /> `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
+<TextInput
+  style={styles.input}
+  placeholder=""
+  onChangeText={newText => setText(newText)}
+  defaultValue={text}
+  label={<Text style={styles.label}>First name:*</Text>}
+  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
+<TextInput
+  style={styles.input}
+  placeholder=""
+  onChangeText={newText => setText(newText)}
+  defaultValue={text}
+  label={<Text style={styles.label}>Last name:</Text>}
+  returnKeyType="next"
+  nextFormField={emailRef}
+  ref={lastNameRef}
+/>
+```
+
+### `id`
+
+The field ID. This info is stored, with the field `ref`, inside the [`<Form />`](./Form.md) 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 |
+
+### <Required /> `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)

packages/forms/docs/useFormField.md

@@ -1,6 +1,6 @@
 # useFormField
 
-This hook can be used to create a focusable custom field for the [`<Form />`](../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 />`](./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.
 
 :::
 

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

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)

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)

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)

packages/react-native/docs/ExpandablePressable.mdx

@@ -49,32 +49,32 @@ The hook automatically:
 Compared to the default React Native component, this custom component:
 
 - Forces the use of `accessibilityLabel` <DevOnly />
-- Performs a [Minimum Size](../../../website/guidelines/minimum-size.md) check <DevOnly />
-- Performs a [contrast checker](../../../website/guidelines/contrast.md) between its background color and its children color <DevOnly />
+- Performs a [Minimum Size](/guidelines/minimum-size) check <DevOnly />
+- Performs a [contrast checker](/guidelines/contrast) between its background color and its children color <DevOnly />
 
 ### 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).
 :::
 
 ### 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
 

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
 
 <DevOnlyChecks />
 
@@ -75,7 +75,7 @@ Indicates whether a selectable element is currently selected or not.
 
 ### Contrast checker <DevOnly />
 
-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).