diff --git a/change/@office-iss-react-native-win32-7fd6b7f9-9ded-4985-87b5-70b02f87b6c1.json b/change/@office-iss-react-native-win32-7fd6b7f9-9ded-4985-87b5-70b02f87b6c1.json new file mode 100644 index 00000000000..f1a2dccfe31 --- /dev/null +++ b/change/@office-iss-react-native-win32-7fd6b7f9-9ded-4985-87b5-70b02f87b6c1.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "fix a11yState and add support for aria-required and -multiselectable", + "packageName": "@office-iss/react-native-win32", + "email": "krsiler@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/@office-iss/react-native-win32-tester/src/js/examples-win32/Accessibility/AccessibilityExampleWin32.tsx b/packages/@office-iss/react-native-win32-tester/src/js/examples-win32/Accessibility/AccessibilityExampleWin32.tsx index 904d615b7b8..6938fddca55 100644 --- a/packages/@office-iss/react-native-win32-tester/src/js/examples-win32/Accessibility/AccessibilityExampleWin32.tsx +++ b/packages/@office-iss/react-native-win32-tester/src/js/examples-win32/Accessibility/AccessibilityExampleWin32.tsx @@ -181,7 +181,7 @@ class MultiSelectionExample extends React.Component<{}, IMultiSelectionExampleSt public render() { return ( - + { 'aria-disabled': ariaDisabled, 'aria-expanded': ariaExpanded, 'aria-label': ariaLabel, + 'aria-multiselectable': ariaMultiselectable, // Win32 + 'aria-required': ariaRequired, // Win32 'aria-selected': ariaSelected, importantForAccessibility, color, @@ -327,6 +331,9 @@ class Button extends React.Component { checked: ariaChecked ?? accessibilityState?.checked, disabled: ariaDisabled ?? accessibilityState?.disabled, expanded: ariaExpanded ?? accessibilityState?.expanded, + multiselectable: + ariaMultiselectable ?? accessibilityState?.multiselectable, // Win32 + required: ariaRequired ?? accessibilityState?.required, // Win32 selected: ariaSelected ?? accessibilityState?.selected, }; diff --git a/packages/@office-iss/react-native-win32/src/Libraries/Components/Pressable/Pressable.win32.js b/packages/@office-iss/react-native-win32/src/Libraries/Components/Pressable/Pressable.win32.js index 4939b0815f8..85b27be3544 100644 --- a/packages/@office-iss/react-native-win32/src/Libraries/Components/Pressable/Pressable.win32.js +++ b/packages/@office-iss/react-native-win32/src/Libraries/Components/Pressable/Pressable.win32.js @@ -74,6 +74,8 @@ type Props = $ReadOnly<{| 'aria-disabled'?: ?boolean, 'aria-expanded'?: ?boolean, 'aria-selected'?: ?boolean, + 'aria-multiselectable'?: ?boolean, // Win32 + 'aria-required'?: ?boolean, // Win32 /** * A value indicating whether the accessibility elements contained within * this accessibility element are hidden. @@ -257,6 +259,8 @@ function Pressable(props: Props, forwardedRef): React.Node { 'aria-disabled': ariaDisabled, 'aria-expanded': ariaExpanded, 'aria-label': ariaLabel, + 'aria-multiselectable': ariaMultiselectable, // Win32 + 'aria-required': ariaRequired, // Win32 'aria-selected': ariaSelected, cancelable, children, @@ -297,6 +301,8 @@ function Pressable(props: Props, forwardedRef): React.Node { checked: ariaChecked ?? accessibilityState?.checked, disabled: ariaDisabled ?? accessibilityState?.disabled, expanded: ariaExpanded ?? accessibilityState?.expanded, + multiselectable: ariaMultiselectable ?? accessibilityState?.multiselectable, // Win32 + required: ariaRequired ?? accessibilityState?.required, // Win32 selected: ariaSelected ?? accessibilityState?.selected, }; diff --git a/packages/@office-iss/react-native-win32/src/Libraries/Components/TextInput/TextInput.win32.js b/packages/@office-iss/react-native-win32/src/Libraries/Components/TextInput/TextInput.win32.js index b23f4fd8ed3..ecb111eb92f 100644 --- a/packages/@office-iss/react-native-win32/src/Libraries/Components/TextInput/TextInput.win32.js +++ b/packages/@office-iss/react-native-win32/src/Libraries/Components/TextInput/TextInput.win32.js @@ -1142,6 +1142,8 @@ function InternalTextInput(props: Props): React.Node { 'aria-disabled': ariaDisabled, 'aria-expanded': ariaExpanded, 'aria-selected': ariaSelected, + 'aria-multiselectable': ariaMultiselectable, // Win32 + 'aria-required': ariaRequired, // Win32 accessibilityState, id, tabIndex, @@ -1524,6 +1526,8 @@ function InternalTextInput(props: Props): React.Node { ariaChecked != null || ariaDisabled != null || ariaExpanded != null || + ariaMultiselectable != null || + ariaRequired != null || ariaSelected != null ) { _accessibilityState = { @@ -1531,6 +1535,9 @@ function InternalTextInput(props: Props): React.Node { checked: ariaChecked ?? accessibilityState?.checked, disabled: ariaDisabled ?? accessibilityState?.disabled, expanded: ariaExpanded ?? accessibilityState?.expanded, + multiselectable: + ariaMultiselectable ?? accessibilityState?.multiselectable, // Win32 + required: ariaRequired ?? accessibilityState?.required, // Win32 selected: ariaSelected ?? accessibilityState?.selected, }; } diff --git a/packages/@office-iss/react-native-win32/src/Libraries/Components/View/View.win32.js b/packages/@office-iss/react-native-win32/src/Libraries/Components/View/View.win32.js index ec4f0dec335..5ef908fdd23 100644 --- a/packages/@office-iss/react-native-win32/src/Libraries/Components/View/View.win32.js +++ b/packages/@office-iss/react-native-win32/src/Libraries/Components/View/View.win32.js @@ -58,7 +58,9 @@ const View: React.AbstractComponent< 'aria-labelledby': ariaLabelledBy, 'aria-level': ariaLevel, // Win32 'aria-live': ariaLive, + 'aria-multiselectable': ariaMultiselectable, // Win32 'aria-posinset': ariaPosinset, // Win32 + 'aria-required': ariaRequired, // Win32 'aria-selected': ariaSelected, 'aria-setsize': ariaSetsize, // Win32 'aria-valuemax': ariaValueMax, @@ -85,6 +87,8 @@ const View: React.AbstractComponent< ariaChecked != null || ariaDisabled != null || ariaExpanded != null || + ariaMultiselectable != null || + ariaRequired != null || ariaSelected != null ) { _accessibilityState = { @@ -92,6 +96,9 @@ const View: React.AbstractComponent< checked: ariaChecked ?? accessibilityState?.checked, disabled: ariaDisabled ?? accessibilityState?.disabled, expanded: ariaExpanded ?? accessibilityState?.expanded, + multiselectable: + ariaMultiselectable ?? accessibilityState?.multiselectable, // Win32 + required: ariaRequired ?? accessibilityState?.required, // Win32 selected: ariaSelected ?? accessibilityState?.selected, }; } diff --git a/packages/@office-iss/react-native-win32/src/Libraries/Components/View/ViewAccessibility.d.ts b/packages/@office-iss/react-native-win32/src/Libraries/Components/View/ViewAccessibility.d.ts index b7c84831b96..c3c546c5bbc 100644 --- a/packages/@office-iss/react-native-win32/src/Libraries/Components/View/ViewAccessibility.d.ts +++ b/packages/@office-iss/react-native-win32/src/Libraries/Components/View/ViewAccessibility.d.ts @@ -57,6 +57,8 @@ export interface AccessibilityProps 'aria-checked'?: boolean | 'mixed' | undefined; 'aria-disabled'?: boolean | undefined; 'aria-expanded'?: boolean | undefined; + 'aria-multiselectable'?: boolean | undefined; // Win32 + 'aria-required'?: boolean | undefined; // Win32 'aria-selected'?: boolean | undefined; /** diff --git a/packages/@office-iss/react-native-win32/src/Libraries/Components/View/ViewAccessibility.win32.js b/packages/@office-iss/react-native-win32/src/Libraries/Components/View/ViewAccessibility.win32.js index 535fa29e56e..6736dd38e6e 100644 --- a/packages/@office-iss/react-native-win32/src/Libraries/Components/View/ViewAccessibility.win32.js +++ b/packages/@office-iss/react-native-win32/src/Libraries/Components/View/ViewAccessibility.win32.js @@ -152,6 +152,8 @@ export type AccessibilityState = { checked?: ?boolean | 'mixed', busy?: boolean, expanded?: boolean, + multiselectable?: boolean, // Win32 + required?: boolean, // Win32 ... }; diff --git a/packages/@office-iss/react-native-win32/src/Libraries/Components/View/ViewPropTypes.win32.js b/packages/@office-iss/react-native-win32/src/Libraries/Components/View/ViewPropTypes.win32.js index 1e35f1656b1..0f5701046a7 100644 --- a/packages/@office-iss/react-native-win32/src/Libraries/Components/View/ViewPropTypes.win32.js +++ b/packages/@office-iss/react-native-win32/src/Libraries/Components/View/ViewPropTypes.win32.js @@ -483,6 +483,8 @@ type WindowsViewProps = $ReadOnly<{| 'aria-level'?: ?number, 'aria-controls'?: ?Stringish, 'aria-describedby'?: ?Stringish, + 'aria-multiselectable'?: ?boolean, + 'aria-required'?: ?boolean, /** * Specifies if the control should show System focus visuals diff --git a/packages/@office-iss/react-native-win32/src/Libraries/Image/Image.win32.js b/packages/@office-iss/react-native-win32/src/Libraries/Image/Image.win32.js index 5ca5f4e5e9b..c15c6f90c7a 100644 --- a/packages/@office-iss/react-native-win32/src/Libraries/Image/Image.win32.js +++ b/packages/@office-iss/react-native-win32/src/Libraries/Image/Image.win32.js @@ -173,6 +173,8 @@ const BaseImage = (props: ImagePropsType, forwardedRef) => { 'aria-checked': ariaChecked, 'aria-disabled': ariaDisabled, 'aria-expanded': ariaExpanded, + 'aria-multiselectable': ariaMultiselectable, // Win32 + 'aria-required': ariaRequired, // Win32 'aria-selected': ariaSelected, height, src, @@ -185,6 +187,9 @@ const BaseImage = (props: ImagePropsType, forwardedRef) => { checked: ariaChecked ?? props.accessibilityState?.checked, disabled: ariaDisabled ?? props.accessibilityState?.disabled, expanded: ariaExpanded ?? props.accessibilityState?.expanded, + multiselectable: + ariaMultiselectable ?? props.accessibilityState?.multiselectable, // Win32 + required: ariaRequired ?? props.accessibilityState?.required, // Win32 selected: ariaSelected ?? props.accessibilityState?.selected, }; const accessibilityLabel = props['aria-label'] ?? props.accessibilityLabel; diff --git a/packages/@office-iss/react-native-win32/src/Libraries/Text/Text.win32.js b/packages/@office-iss/react-native-win32/src/Libraries/Text/Text.win32.js index 355ad43e477..9873e70791c 100644 --- a/packages/@office-iss/react-native-win32/src/Libraries/Text/Text.win32.js +++ b/packages/@office-iss/react-native-win32/src/Libraries/Text/Text.win32.js @@ -50,7 +50,9 @@ const Text: React.AbstractComponent< 'aria-expanded': ariaExpanded, 'aria-label': ariaLabel, 'aria-level': ariaLevel, // Win32 + 'aria-multiselectable': ariaMultiselectable, // Win32 'aria-posinset': ariaPosinset, // Win32 + 'aria-required': ariaRequired, // Win32 'aria-selected': ariaSelected, 'aria-setsize': ariaSetsize, // Win32 ellipsizeMode, @@ -80,6 +82,8 @@ const Text: React.AbstractComponent< ariaChecked != null || ariaDisabled != null || ariaExpanded != null || + ariaMultiselectable != null || + ariaRequired != null || ariaSelected != null ) { _accessibilityState = { @@ -87,6 +91,9 @@ const Text: React.AbstractComponent< checked: ariaChecked ?? accessibilityState?.checked, disabled: ariaDisabled ?? accessibilityState?.disabled, expanded: ariaExpanded ?? accessibilityState?.expanded, + multiselectable: + ariaMultiselectable ?? accessibilityState?.multiselectable, // Win32 + required: ariaRequired ?? accessibilityState?.required, // Win32 selected: ariaSelected ?? accessibilityState?.selected, }; } diff --git a/packages/@office-iss/react-native-win32/src/Libraries/Text/TextProps.win32.js b/packages/@office-iss/react-native-win32/src/Libraries/Text/TextProps.win32.js index ba428663ed1..a2f86b80133 100644 --- a/packages/@office-iss/react-native-win32/src/Libraries/Text/TextProps.win32.js +++ b/packages/@office-iss/react-native-win32/src/Libraries/Text/TextProps.win32.js @@ -96,6 +96,8 @@ export type TextProps = $ReadOnly<{| 'aria-disabled'?: ?boolean, 'aria-expanded'?: ?boolean, 'aria-selected'?: ?boolean, + 'aria-multiselectable'?: ?boolean, // Win32 + 'aria-required'?: ?boolean, // Win32 'aria-controls'?: ?Stringish, // Win32 'aria-describedby'?: ?Stringish, // Win32 'aria-description'?: ?Stringish, // Win32