Added accessibility props

src/components/main/Checkbox/index.tsx

@@ -9,13 +9,19 @@ const Checkbox = ( {
 	isIndeterminated = false,
 	onChange = undefined,
 	...props
-}: ICheckboxProps ) => {
+}: Omit<ICheckboxProps, 'onPress' | 'onPressIn' | 'onPressOut'> ) => {
 	const { iconProps, containerProps } = useCheckboxPropsResolver( {
 		isIndeterminated, isSelected, onChange, ...props
 	} );
-
 	return (
-		<Pressable {...containerProps}>
+		<Pressable {...containerProps}
+			accessible
+			accessibilityRole='checkbox'
+			accessibilityState={{
+				checked: isIndeterminated ? 'mixed' : isSelected,
+				disabled: props.disabled || false
+			}}
+		>
 			<Icon {...iconProps}></Icon>
 		</Pressable>
 	);

src/components/main/Checkbox/types.ts

@@ -1,10 +1,12 @@
 import type { GestureResponderEvent } from 'react-native';
 import type { ComponentStyledProps } from '../../../core/components/types';
-import type { IPressableProps } from '../Pressable/types';
 
-export interface ICheckboxProps extends Omit<IPressableProps, 'children' | 'size'>,
-ComponentStyledProps<'Checkbox'>
+export interface ICheckboxProps extends ComponentStyledProps<'Checkbox'>
 {
+	onPress?: ( ( event: GestureResponderEvent ) => void ),
+	onPressIn?: ( ( event: GestureResponderEvent ) => void ),
+	onPressOut?: ( ( event: GestureResponderEvent ) => void ),
+    disabled?: boolean,
     isSelected?: boolean,
     isIndeterminated?: boolean,
     onChange?: ( ( event: GestureResponderEvent ) => void )

tests/components/main/Checkbox.test.js

@@ -22,36 +22,57 @@ const customTheme = extendThemeConfig( {
 	}
 } );
 
+const accessibilityTest = ( {
+	getByTestId,
+	testID = 'test-checkbox',
+	checked = false,
+	disabled = false
+} ) => {
+	expect( getByTestId( testID ) ).toHaveProp( 'accessible', true );
+	expect( getByTestId( testID ) ).toHaveProp( 'accessibilityRole', 'checkbox' );
+	expect( getByTestId( testID ) ).toHaveProp( 'accessibilityState', { checked, disabled } );
+};
+
 describe( 'Checkbox', () => {
 	const renderComponent = ( { isIndeterminated, isSelected, props } = {} ) => render(
 		<ThemeProvider theme={customTheme}>
-			<Checkbox isIndeterminated={isIndeterminated} isSelected={isSelected} {...props} testID="test-checkbox" />
+			<Checkbox
+				testID="test-checkbox"
+				isIndeterminated={isIndeterminated}
+				isSelected={isSelected}
+				{...props}
+			/>
 		</ThemeProvider>
 	);
 
 	it( 'applies the __unselected styles when it is unselected', () => {
 		const { getByTestId } = renderComponent();
 		expect( getByTestId( 'test-checkbox' ) ).toHaveStyle( { borderColor: '#676A79' } );
+		accessibilityTest( { getByTestId } );
 	} );
 
 	it( 'applies the __selected styles when it is selected', () => {
 		const { getByTestId } = renderComponent( { isSelected: true } );
 		expect( getByTestId( 'test-checkbox' ) ).toHaveStyle( { borderColor: '#4F80FF' } );
+		accessibilityTest( { getByTestId, checked: true } );
 	} );
 
 	it( 'applies the __indeterminate styles when it is indeterminated', () => {
 		const { getByTestId } = renderComponent( { isIndeterminated: true } );
 		expect( getByTestId( 'test-checkbox' ) ).toHaveStyle( { borderColor: '#4F80FF' } );
+		accessibilityTest( { getByTestId, checked: 'mixed' } );
 	} );
 
 	it( 'applies the __disabled styles when it is disabled', () => {
 		const { getByTestId } = renderComponent( { props: { disabled: true } } );
 		expect( getByTestId( 'test-checkbox' ) ).toHaveStyle( { opacity: 0.7 } );
+		accessibilityTest( { getByTestId, disabled: true } );
 	} );
 
 	it( 'applies the __pressed styles when it is pressed', () => {
-		const { getByTestId } = renderComponent( { isIndeterminated: true } );
+		const { getByTestId } = renderComponent();
 		fireEvent( getByTestId( 'test-checkbox' ), 'pressIn' );
 		expect( getByTestId( 'test-checkbox' ) ).toHaveStyle( { backgroundColor: '#EDF2FF' } );
+		accessibilityTest( { getByTestId } );
 	} );
 } );