diff --git a/src/components/Menu/MenuItem.tsx b/src/components/Menu/MenuItem.tsx index 624b106cb4..6a6ff2a831 100644 --- a/src/components/Menu/MenuItem.tsx +++ b/src/components/Menu/MenuItem.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import { + AccessibilityState, GestureResponderEvent, StyleProp, StyleSheet, @@ -69,6 +70,10 @@ export type Props = { * Accessibility label for the Touchable. This is read by the screen reader when the user taps the component. */ accessibilityLabel?: string; + /** + * Accessibility state for the Touchable. This is read by the screen reader when the user taps the component. + */ + accessibilityState?: AccessibilityState; }; /** @@ -111,6 +116,7 @@ const MenuItem = ({ testID, titleStyle, accessibilityLabel, + accessibilityState, theme: themeOverrides, }: Props) => { const theme = useInternalTheme(themeOverrides); @@ -138,6 +144,8 @@ const MenuItem = ({ ...(isV3 ? theme.fonts.bodyLarge : {}), }; + const newAccessibilityState = { ...accessibilityState, disabled }; + return ( diff --git a/src/components/__tests__/MenuItem.test.tsx b/src/components/__tests__/MenuItem.test.tsx index 3c68ee77eb..5dac9a848e 100644 --- a/src/components/__tests__/MenuItem.test.tsx +++ b/src/components/__tests__/MenuItem.test.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; +import { render } from '@testing-library/react-native'; import color from 'color'; import renderer from 'react-test-renderer'; @@ -170,3 +171,17 @@ it('renders menu item', () => { expect(tree).toMatchSnapshot(); }); + +it('accepts different values for accessibilityState', () => { + const { getByTestId } = render( + + ); + + expect(getByTestId('touchable').props.accessibilityState).toMatchObject({ + checked: true, + }); +});