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 77ad107b53c..0ea26fa93ec 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/View/View.win32.js b/packages/@office-iss/react-native-win32/src/Libraries/Components/View/View.win32.js index f1530e4d6b1..674c9a1441d 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 @@ -50,6 +50,8 @@ const View: React.AbstractComponent< 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-live': ariaLive, + 'aria-multiselectable': ariaMultiselectable, // Win32 + 'aria-required': ariaRequired, // Win32 'aria-selected': ariaSelected, 'aria-valuemax': ariaValueMax, 'aria-valuemin': ariaValueMin, @@ -76,6 +78,8 @@ const View: React.AbstractComponent< ariaChecked != null || ariaDisabled != null || ariaExpanded != null || + ariaMultiselectable != null || + ariaRequired != null || ariaSelected != null ) { _accessibilityState = { @@ -83,6 +87,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 b4f96106833..c216c8544ab 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 1688dff7adb..4af78ef0c1f 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 @@ -467,7 +467,8 @@ type WindowsViewProps = $ReadOnly<{| accessibilityPosInSet?: ?number, accessibilitySetSize?: ?number, - + '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;