Skip to main content

Pressable

Pressable is an extension of the React Native Pressable component, focused on accessibility.

import { Pressable } from 'react-native-ama';

<Pressable accessibilityRole="button" accessibilityLabel="I'm pressable!">
    <Text>I'm pressable</Text>
</Pressable>;

Accessibility improvements​

Compared to the default React Native component, this custom component:

  • Forces the use of accessibilityRole and accessibilityLabel DEV only check
  • accessibilityState has been removed as its states busy, checked, selected, expanded are exposed as a property
  • Performs a Minimum Size check DEV only check
  • Performs a contrast checker between its background color and its children color DEV only check

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

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

Accessibility states​

The default accessibilityState property does accept an object like:

accessibilityState={{
    busy: boolean;
    checked: boolean | 'mixed';
    selected: boolean;
    expanded: boolean;
}}

To simply the syntax, the custom component allows passing those states as property for the component, handling the generation of the object under the hood.

Contrast checker​

The component performs a contrast check 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.

Minimum size​

The component uses the onLayout prop to perform the minium size check.

Additional Props​

busy​

Indicates whether an element is currently busy or not.

TypeDefault
booleanundefined

Example​

import { ActivityIndicator } from 'react-native';
import { Pressable, Text } from 'react-native-ama';

const Test = () => {
    const [isLoading, setIsLoading] = React.useState(false);

    const doSometing = async () => {
        setIsLoading(true);

        await slowCall();

        setIsLoading(true);
    };

    return (
        <Pressable
            accessiblityRole="button"
            accessibilityLabel="Do it"
            busy={isLoading}
            onPress={doSometing}>
            {isLoading ? <ActivityIndicator /> : <Text>Do it</Text>}
        </Pressable>
    );
};

checked​

Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.

TypeDefaultRequired
boolean or 'mixed'undefinedNo

selected​

Indicates whether a selectable element is currently selected or not.

TypeDefaultRequired
booleanundefinedNo

expanded​

Indicates whether an expandable element is currently expanded or collapsed.

TypeDefaultRequired
booleanundefinedNo

Example​

import { ActivityIndicator } from 'react-native';
import { Pressable, Text } from 'react-native-ama';

const Test = () => {
    const [isExpanded, setIsExpanded] = React.useState(false);

    return (
        <>
            <Pressable
                accessiblityRole="button"
                accessibilityLabel={isExpanded ? 'Less' : 'More'}
                expanded={isExpanded}
                onPress={() => setIsExpanded(expanded => !expanded)}>
                {isExpanded ? <MinumIcon /> : <PlusIcon />}
            </Pressable>
            {isExpanded ? <>{/* content goes here */}</> : null}
        </>
    );
};

External resources​