Feature: exclude third-party libraries from accessibility checks

[albullington]

Describe the bug I'm using react-native-modal in my project. This means that whenever I run the accessibility engine, it throws this error:

ThemeProvider > EnsureSingleNavigator > UserProfile > ViewWithFooter > RCTSafeAreaView > Footer > Modal > ReactNativeModal > Modal > TouchableWithoutFeedback
     · If a component is touchable/pressable, we should inform the user that it behaves like a button/link/radio
       ↳  Set the 'accessibilityRole' prop with a value of button or link or imagebutton or radio
     · If a button has no text content, an accessibility label can't be inferred so we should explicitly define one
       ↳  Place a text component within the button or define an 'accessibilityLabel' prop

Component under test

import RNModal from "react-native-modal";

const Modal = ( { showModal, closeModal, modal } ) => (
  <RNModal
    isVisible={showModal}
    onBackdropPress={closeModal}
    onSwipeComplete={closeModal}
    swipeDirection="down"
    useNativeDriverForBackdrop
    useNativeDriver
  >
    {modal}
  </RNModal>
);

export default Modal;

test( "should not have accessibility errors", ( ) => {
  const modal = (
    <Modal />
  );
  expect( modal ).toBeAccessible( );
} );

Expected behavior From what I can tell, there's no way I can add accessibilityLabel or accessibilityRole to react native modal within my codebase. It would need to be added in the react-native-modal repo. Therefore, I think there should be a way to optionally exclude this case from accessibility checks.

Context

• React Native version: 0.65.1
• OS: all
• Test runner: Jest
• Accessibility Engine version: 0.7.0

[aryella-lacerda]

Hello, @albullington!

Let me take a look at the best-practices regarding modals. Hopefully we can open a PR in react-native-modal to eventually correct any problems.

In the meantime, there's an update to RNAE pending release which should add the ability to do something like this: expect(<CustomModal />).toBeAccessible({ exclude: ['ReactNativeModal'] })

Thoughts?

[albullington]

Hi @aryella-lacerda, thanks for getting back to me on this. I think being able to exclude a package like React Native Modal would help a lot.

[pke]

Have any of you created a PR over at RNModal? It seems they should just add the a11y props on their TouchableWithoutFeedback since it acts as a click eater. Not sure what the role would be though.

[aryella-lacerda]

Nope. I haven't had time to research how accessibility for modals works on native iOS and Android, to check if it's different from any other type of screen. 🤔