Allow apps to provide accessiblity information on non-focusable compo…

…nents (#11643) (#11645) * Allow apps to provide accessiblity information on non-focusable components * Change files * formatting * format * Add warning when making textinput focusable && !accessible * fix
microsoft · May 22, 2023 · 587083b · 587083b
1 parent b34b14a
commit 587083b
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 22 deletions.
diff --git a/change/react-native-windows-3ef19692-9e5c-436c-8efe-c0555e8cfd84.json b/change/react-native-windows-3ef19692-9e5c-436c-8efe-c0555e8cfd84.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Allow apps to provide accessiblity information on non-focusable components",
+  "packageName": "react-native-windows",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/vnext/Microsoft.ReactNative/Views/ControlViewManager.cpp b/vnext/Microsoft.ReactNative/Views/ControlViewManager.cpp
@@ -125,12 +125,9 @@ void ControlViewManager::SetLayoutProps(
 
 void ControlViewManager::OnPropertiesUpdated(ShadowNodeBase *node) {
   auto control(node->GetView().as<xaml::Controls::Control>());
-
-  // If developer specifies either the accessible and focusable prop to be false
-  // remove accessibility and keyboard focus for component.
-  const auto isTabStop = !node->IsDisable() && (node->IsAccessible() && node->IsFocusable());
-  const auto accessibilityView =
-      isTabStop ? xaml::Automation::Peers::AccessibilityView::Content : xaml::Automation::Peers::AccessibilityView::Raw;
+  const auto isTabStop = !node->IsDisable() && node->IsFocusable();
+  const auto accessibilityView = node->IsAccessible() ? xaml::Automation::Peers::AccessibilityView::Content
+                                                      : xaml::Automation::Peers::AccessibilityView::Raw;
   control.IsTabStop(isTabStop);
   xaml::Automation::AutomationProperties::SetAccessibilityView(control, accessibilityView);
 }

diff --git a/vnext/Microsoft.ReactNative/Views/ViewViewManager.cpp b/vnext/Microsoft.ReactNative/Views/ViewViewManager.cpp
@@ -595,20 +595,13 @@ void ViewViewManager::TryUpdateView(
 }
 
 void ViewViewManager::SyncFocusableAndAccessible(ViewShadowNode *pViewShadowNode, bool useControl) {
-  // If developer specifies either the accessible and focusable prop to be false
-  // remove accessibility and keyboard focus for component. Exception is made
-  // for case where a View with undefined onPress is specified, where
-  // component gains accessibility focus when either the accessible and focusable prop are true.
   if (useControl) {
     const auto isFocusable = pViewShadowNode->IsFocusable();
     const auto isAccessible = pViewShadowNode->IsAccessible();
-    const auto isPressable = pViewShadowNode->OnClick();
     const auto isDisabled = pViewShadowNode->IsDisable();
-    const auto isTabStop =
-        (!isDisabled &&
-         ((isPressable && isFocusable && isAccessible) || (!isPressable && (isFocusable || isAccessible))));
-    const auto accessibilityView = isTabStop ? xaml::Automation::Peers::AccessibilityView::Content
-                                             : xaml::Automation::Peers::AccessibilityView::Raw;
+    const auto isTabStop = !isDisabled && isFocusable;
+    const auto accessibilityView = isAccessible ? xaml::Automation::Peers::AccessibilityView::Content
+                                                : xaml::Automation::Peers::AccessibilityView::Raw;
     pViewShadowNode->GetControl().IsTabStop(isTabStop);
     xaml::Automation::AutomationProperties::SetAccessibilityView(pViewShadowNode->GetControl(), accessibilityView);
   }

diff --git a/vnext/src/Libraries/Components/TextInput/TextInput.windows.js b/vnext/src/Libraries/Components/TextInput/TextInput.windows.js
@@ -1527,6 +1527,12 @@ function InternalTextInput(props: Props): React.Node {
     };
   }
 
+  if (focusable && !accessible) {
+    console.warn(
+      'All focusable views should report proper accessiblity information. TextInputs marked as focusable should always be accessible.',
+    );
+  }
+
   // $FlowFixMe[underconstrained-implicit-instantiation]
   let style = flattenStyle(props.style);
 

diff --git a/vnext/src/Libraries/Components/View/View.windows.js b/vnext/src/Libraries/Components/View/View.windows.js
@@ -183,6 +183,19 @@ const View: React.AbstractComponent<
         return updatedChildren;
       }
     };
+
+    const _focusable = tabIndex !== undefined ? !tabIndex : focusable;
+    const _accessible =
+      importantForAccessibility === 'no-hide-descendants'
+        ? false
+        : otherProps.accessible;
+
+    if (_focusable === true && _accessible === false) {
+      console.warn(
+        'All focusable views should report proper accessiblity information. Views marked as focusable should always be accessible.',
+      );
+    }
+
     // Windows]
 
     return (
@@ -205,7 +218,7 @@ const View: React.AbstractComponent<
                   : ariaLive ?? accessibilityLiveRegion
               }
               accessibilityLabel={ariaLabel ?? accessibilityLabel}
-              focusable={tabIndex !== undefined ? !tabIndex : focusable}
+              focusable={_focusable}
               disabled={disabled}
               accessibilityState={_accessibilityState}
               accessibilityRole={
@@ -230,11 +243,7 @@ const View: React.AbstractComponent<
               onKeyUp={_keyUp}
               onKeyUpCapture={_keyUpCapture}
               // [Windows
-              accessible={
-                importantForAccessibility === 'no-hide-descendants'
-                  ? false
-                  : otherProps.accessible
-              }
+              accessible={_accessible}
               children={
                 importantForAccessibility === 'no-hide-descendants'
                   ? childrenWithImportantForAccessibility(otherProps.children)