[Bug]: Incorrect Accessibility Role for Text Inside Buttons Causes a11y Test Failures about metamask-mobile

[georgewrmarshall]

@wachunei please add correct steps to reproduce

[wachunei]

I have more details about the issue and an example to reproduce.

The issue is: Button components base component ButtonBase does not have default props for accessibility, these are accessibilityRole: 'button' and accessible: true.

Currently a simplified snapshot of every Button of the component library would look like this:

<TouchableOpacity>
  <Text
    accessibilityRole="text"
  >
    Click me!
  </Text>
</TouchableOpacity>

This won't work with tests like screen.getByRole('button', { name: 'Click me!' }) because the button does not have the props.

This is a working example snapshot:

<TouchableOpacity
  accessibilityRole="button"
  accessible={true}
>
  <Text
    accessibilityRole="text"
  >
    Click me!
  </Text>
</TouchableOpacity>

In the branch temp/button-a11y-tests I have added this file app/component-library/components/Buttons/Button/foundation/ButtonBase/ButtonBase.rntl.test.tsx with examples of failing and passing tests.

The file includes a comparison with the deprecated StyledButton component that behaves correctly regarding a11y tests.
The tests include snapshots to compare the default rendering of the props missing https://github.com/MetaMask/metamask-mobile/blob/temp/button-a11y-tests/app/component-library/components/Buttons/Button/foundation/ButtonBase/__snapshots__/ButtonBase.rntl.test.tsx.snap