Add aria-required and aria-multiselectable to accessibilityState on win32 (#12046) (#12062)

* add missing a11yState props on win32

* Change files

* fix missing a11yState props for other components

* minor fix

* add aria- equivalent props

* edit change file comment

* Add win32 comment tags

* lint fix

* fix lint errors

* add aria- props to textprops

* remove unneeded props

Author: ksiler

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": "[email protected]",
+  "dependentChangeType": "patch"
+}

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 (
-      <ViewWin32 accessible accessibilityRole="tablist" accessibilityState={{multiselectable: true}}>
+      <ViewWin32 accessible accessibilityRole="tablist" aria-required aria-multiselectable>
         <SelectionItemComponent
           value={1}
           color="#aee8fcff"

packages/@office-iss/react-native-win32/src/Libraries/Components/Button.win32.js

@@ -163,6 +163,8 @@ type ButtonProps = $ReadOnly<{|
   'aria-disabled'?: ?boolean,
   'aria-expanded'?: ?boolean,
   'aria-selected'?: ?boolean,
+  'aria-multiselectable'?: ?boolean, // Win32
+  'aria-required'?: ?boolean, // Win32
 
   /**
    * [Android] Controlling if a view fires accessibility events and if it is reported to accessibility services.
@@ -293,6 +295,8 @@ class Button extends React.Component<ButtonProps> {
       '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<ButtonProps> {
       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,
     };
 

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,
   };
 

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,13 +78,18 @@ const View: React.AbstractComponent<
       ariaChecked != null ||
       ariaDisabled != null ||
       ariaExpanded != null ||
+      ariaMultiselectable != null ||
+      ariaRequired != null ||
       ariaSelected != null
     ) {
       _accessibilityState = {
         busy: ariaBusy ?? accessibilityState?.busy,
         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,
       };
     }

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;
 
   /**

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
   ...
 };
 

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
    */

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;