diff --git a/website/docs/ama/usage.md b/website/docs/ama/usage.md index 714ff3c9..175eee62 100644 --- a/website/docs/ama/usage.md +++ b/website/docs/ama/usage.md @@ -12,7 +12,7 @@ npm install @react-native-ama/core ## Wrap App with Provider -You need to add the [AMAProvider](../components/AMAProvider) to your app as it is needed by the components, hooks, and to provide information about accessbility violations. +You need to add the [AMAProvider](/core/components/AMAProvider) to your app as it is needed by the components, hooks, and to provide information about accessibility violations. ```jsx {1-4,8-9} import { AMAProvider } from '@react-native-ama/core'; diff --git a/website/guidelines/accessibility-label.md b/website/guidelines/accessibility-label.md index 49a44774..2c5de4ce 100644 --- a/website/guidelines/accessibility-label.md +++ b/website/guidelines/accessibility-label.md @@ -157,15 +157,15 @@ This is used when a component has the `accessibilityLabel` prop in all caps. :::tip -Is it possible to specify a list of allowed all caps accessibility labels, [more info here](/guidelines/guidelines.md) +Is it possible to specify a list of allowed all caps accessibility labels, [more info here](/guidelines) ::: ## Related AMA components -- [ExpandablePressable](/core/components/expandablepressable) -- [Pressable](/core/components/pressable) -- [TouchableOpacity](/core/components/touchableopacity) -- [TouchableWithoutFeedback](/core/components/TouchableWithoutFeedback) +- [ExpandablePressable](/react-native/components/expandablepressable) +- [Pressable](/react-native/components/pressable) +- [TouchableOpacity](/react-native/components/touchableopacity) +- [TouchableWithoutFeedback](/react-native/components/TouchableWithoutFeedback) ## External resources diff --git a/website/guidelines/accessibility-role.md b/website/guidelines/accessibility-role.md index 2d371aa1..060c9a52 100644 --- a/website/guidelines/accessibility-role.md +++ b/website/guidelines/accessibility-role.md @@ -82,7 +82,7 @@ This rule is mandatory and cannot be turned off! ## Related AMA components -- [ExpandablePressable](/core/components/expandablepressable) -- [Pressable](/core/components/pressable) -- [TouchableOpacity](/core/components/touchableopacity) -- [TouchableWithoutFeedback](/core/components/TouchableWithoutFeedback) +- [ExpandablePressable](/react-native/components/expandablepressable) +- [Pressable](/react-native/components/pressable) +- [TouchableOpacity](/react-native/components/touchableopacity) +- [TouchableWithoutFeedback](/react-native/components/TouchableWithoutFeedback) diff --git a/website/guidelines/accessibility-states.md b/website/guidelines/accessibility-states.md index eafdae35..6d86056f 100644 --- a/website/guidelines/accessibility-states.md +++ b/website/guidelines/accessibility-states.md @@ -49,8 +49,7 @@ const AddToCart = ({ productID }: { productID: string }) => { accessibilityLabel="Add to cart" accessibilityRole="button" ariaBusy={isAddingToCart} - onPress={isAddingToCart ? undefined : onPress} - > + onPress={isAddingToCart ? undefined : onPress}> {isAddingToCart} ? : Add to cart ); @@ -119,8 +118,7 @@ export const ToggleButton = ({ checked, label }: ToggleButtonProps) => { + ariaRole="button"> {label} ); @@ -173,8 +171,7 @@ const AddToCart = ({ disabled }) => { + disabled={disabled}> Add to cart ); @@ -221,8 +218,7 @@ export const Content = ({ content }) => { accessibilityLabel="Show more" accessibilityRole="button" ariaExpanded={isShowingMore} - onPress={() => setIsShowingMore(showMore => !showMore)} - > + onPress={() => setIsShowingMore(showMore => !showMore)}> {isShowingMore ? 'Show less' : 'Show more'} @@ -262,14 +258,13 @@ Indicates whether a selectable element is currently selected or not. ### Screen Reader behaviour -```jsx {1-5,7-19,21-99} +```jsx {1-5,7-18,20-99} const OptionButton = ({ selected, label }) => { return ( + ariaSelected={selected}> {label} ); @@ -306,10 +301,10 @@ const TestScreen = () => { ## Related AMA components -- [ExpandablePressable](/core/components/expandablepressable) -- [Pressable](/core/components/pressable) -- [TouchableOpacity](/core/components/touchableopacity) -- [TouchableWithoutFeedback](/core/components/TouchableWithoutFeedback) +- [ExpandablePressable](/react-native/components/expandablepressable) +- [Pressable](/react-native/components/pressable) +- [TouchableOpacity](/react-native/components/touchableopacity) +- [TouchableWithoutFeedback](/react-native/components/TouchableWithoutFeedback) ## External references diff --git a/website/guidelines/animations.md b/website/guidelines/animations.md index 3af20531..e00f1661 100644 --- a/website/guidelines/animations.md +++ b/website/guidelines/animations.md @@ -28,11 +28,11 @@ Some people might turn off animation on the device because moving content can di ## Related AMA components & hooks -- [AnimatedContainer](../components/animatedcontainer) -- [BottomSheet](../components/bottomsheet) -- [useAMAContext](../hooks/useAMAContext) -- [useAnimation](../hooks/useAnimation) -- [useAnimationDuration](../hooks/useanimationduration) -- [useReanimatedTiming](../hooks/useReanimatedTiming) +- [AnimatedContainer](/animations/components/animatedcontainer) +- [BottomSheet](/extras/components/bottomsheet) +- [useAMAContext](/core/hooks/useAMAContext) +- [useAnimation](/animations/hooks/useAnimation) +- [useAnimationDuration](/animations/hooks/useanimationduration) +- [useReanimatedTiming](/animations/hooks/useReanimatedTiming) [^1]: If removed, it would fundamentally change the information or functionality of the content, and information and functionality cannot be achieved in another way that would conform. Basic content scrolling is considered an essential function and is excluded from this requirement. diff --git a/website/guidelines/contrast.md b/website/guidelines/contrast.md index 9f6f653c..378777e4 100644 --- a/website/guidelines/contrast.md +++ b/website/guidelines/contrast.md @@ -42,11 +42,11 @@ The visual presentation of text and images of text has a contrast ratio of at le AMA performs a contrast check between the component background and its children for: -- [ExpandablePressable](../components/expandablepressable) -- [Pressable](../components/pressable) -- [TouchableOpacity](../components/touchableopacity) -- [TouchableWithoutFeedback](../components/TouchableWithoutFeedback) -- [usePressable](/hooks/usePressable) +- [ExpandablePressable](/react-native/components/expandablepressable) +- [Pressable](/react-native/components/pressable) +- [TouchableOpacity](/react-native/components/touchableopacity) +- [TouchableWithoutFeedback](/react-native/components/TouchableWithoutFeedback) +- [usePressable](/react-native/hooks/usePressable) The check is performed on the component children and sub children up to a depth level of [5](./custom-log-rules.md#constants). diff --git a/website/guidelines/forms.md b/website/guidelines/forms.md index 30863301..8b50c94c 100644 --- a/website/guidelines/forms.md +++ b/website/guidelines/forms.md @@ -107,7 +107,7 @@ When on TextInput, the user should be able to access the next field or submit th :::tip -The built-in [TextInput](../components/TextInput) automatically handles the `returnKeyLabel` property and its action. +The built-in [TextInput](/forms/components/TextInput) automatically handles the `returnKeyLabel` property and its action. ::: @@ -132,15 +132,15 @@ Alternatively, the first failed field should be autofocused if no message is ava ### NO_FORM_LABEL -This error is used when no label has been provided for the [TextInput](../components/TextInput) component. +This error is used when no label has been provided for the [TextInput](/forms/components/TextInput) component. ### NO_FORM_ERROR -This error is used when no error has been provided for the [TextInput](../components/TextInput) component. +This error is used when no error has been provided for the [TextInput](/forms/components/TextInput) component. ### NO_KEYBOARD_TRAP -This error is triggered by the [TextInput](../components/TextInput) component if the next input field does not have the focus as expected. +This error is triggered by the [TextInput](/forms/components/TextInput) component if the next input field does not have the focus as expected. :::note @@ -149,8 +149,8 @@ This rule cannot be turned off! ## Related AMA components -- [Form](../components/form) -- [FormField](../components/formfield) -- [SwitchListItem](../components/switchlistitem) -- [SwitchWrapper](../components/switchwrapper) -- [TextInput](../components/textinput) +- [Form](/forms/components/form) +- [FormField](/forms/components/formfield) +- [SwitchListItem](/react-native/components/switchlistitem) +- [SwitchWrapper](/react-native/components/switchwrapper) +- [TextInput](/forms/components/textinput)