Closed
Description
Summary
The new aria-*
props are being rendered to mocked View
, Text
, TextInput
components directly without translation to original accessibilityState
prop. Therefore, we need to modify related checks to account for these.
Scope:
- - support
role
feat: supportrole
prop #1476 - - support
aria-hidden
feat: support aria-hidden prop #1474 - - support
aria-label
feat: supportaria-label
andaria-labelledby
props #1475 - - support
aria-labelledby
feat: supportaria-label
andaria-labelledby
props #1475 - - support
aria-modal
feat:aria-modal
support #1481 - - support accessibility state ARIA props:
aria-disabled
,aria-selected
,aria-checked
,aria-busy
,aria-expanded
feat:aria-*
state props #1478 - - support accessibility value props:
aria-value*
feat:aria-value*
props support #1480
Evidence
test('React Native API assumption: aria-* props render on host View', () => {
const view = render(
<View
testID="test"
aria-busy
aria-checked
aria-disabled
aria-expanded
aria-hidden
aria-label="Label"
aria-labelledby="LabelledBy"
aria-live="polite"
aria-modal
aria-pressed
aria-readonly
aria-required
aria-selected
aria-valuemax={10}
aria-valuemin={0}
aria-valuenow={5}
aria-valuetext="ValueText"
/>
);
expect(view.toJSON()).toMatchInlineSnapshot(`
<View
aria-busy={true}
aria-checked={true}
aria-disabled={true}
aria-expanded={true}
aria-hidden={true}
aria-label="Label"
aria-labelledby="LabelledBy"
aria-live="polite"
aria-modal={true}
aria-pressed={true}
aria-readonly={true}
aria-required={true}
aria-selected={true}
aria-valuemax={10}
aria-valuemin={0}
aria-valuenow={5}
aria-valuetext="ValueText"
testID="test"
/>
`);
});
References
- RN View
aria-*
props transformations - https://github.com/facebook/react-native/blob/3c87455c128af58dc62a2a4212573a9d8fcaf985/packages/react-native/Libraries/Components/View/View.js#L28 - RN Text
aria-*
props transformation - https://github.com/facebook/react-native/blob/3c87455c128af58dc62a2a4212573a9d8fcaf985/packages/react-native/Libraries/Text/Text.js#L29 - RN TextInput
aria-*
props transformation - https://github.com/facebook/react-native/blob/3c87455c128af58dc62a2a4212573a9d8fcaf985/packages/react-native/Libraries/Components/TextInput/TextInput.js#L1416 - Default RN component mock - https://github.com/facebook/react-native/blob/main/packages/react-native/jest/mockComponent.js
Test plan
Add relevant test cases.
Metadata
Metadata
Assignees
Labels
No labels