Fix Bug in Accessible/Focusable Behavior

change/react-native-windows-0518fa09-e292-4f75-9975-e5e47347c58a.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Implement Focus Fix",
+  "packageName": "react-native-windows",
+  "email": "34109996+chiaramooney@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

vnext/Microsoft.ReactNative/Views/FrameworkElementViewManager.cpp

@@ -197,6 +197,12 @@ bool FrameworkElementViewManager::UpdateProperty(
         } else {
           xaml::Automation::AutomationProperties::SetAccessibilityView(element, winrt::AccessibilityView::Raw);
         }
+        if (auto control = nodeToUpdate->GetView().try_as<xaml::Controls::Control>()) {
+          if (control.IsTabStop() != propertyValue.AsBoolean()) {
+            control.IsTabStop(false);
+            xaml::Automation::AutomationProperties::SetAccessibilityView(element, winrt::AccessibilityView::Raw);
+          }
+        }
       } else if (propertyValue.IsNull()) {
         element.ClearValue(xaml::Automation::AutomationProperties::AccessibilityViewProperty());
       }

vnext/Microsoft.ReactNative/Views/ViewViewManager.cpp

@@ -7,6 +7,7 @@
 
 #include "ViewControl.h"
 
+#include <UI.Xaml.Automation.Peers.h>
 #include "DynamicAutomationProperties.h"
 
 #include <JSValueWriter.h>
@@ -127,6 +128,14 @@ class ViewShadowNode : public ShadowNodeBase {
       GetControl().IsTabStop(m_isFocusable);
   }
 
+  bool IsAccessible() const {
+    return m_isAccessible;
+  }
+
+  void IsAccessible(bool isAccessible) {
+    m_isAccessible = isAccessible;
+  }
+
   bool IsHitTestBrushRequired() const {
     return IsRegisteredForMouseEvents();
   }
@@ -251,6 +260,7 @@ class ViewShadowNode : public ShadowNodeBase {
   bool m_enableFocusRing = true;
   bool m_onClick = false;
   bool m_isFocusable = false;
+  bool m_isAccessible = false;
   int32_t m_tabIndex = std::numeric_limits<std::int32_t>::max();
 
   xaml::Controls::ContentControl::GotFocus_revoker m_contentControlGotFocusRevoker{};
@@ -420,6 +430,11 @@ bool ViewViewManager::UpdateProperty(
         pViewShadowNode->TabIndex(std::numeric_limits<std::int32_t>::max());
       }
     } else {
+      if (propertyName == "accessible") {
+        if (propertyValue.Type() == winrt::Microsoft::ReactNative::JSValueType::Boolean) {
+          pViewShadowNode->IsAccessible(propertyValue.AsBoolean());
+        }
+      }
       ret = Super::UpdateProperty(nodeToUpdate, propertyName, propertyValue);
     }
   }
@@ -563,6 +578,12 @@ void ViewViewManager::TryUpdateView(
 
   if (useControl)
     pViewShadowNode->GetControl().Content(visualRoot);
+
+  if (pViewShadowNode->IsAccessible() != pViewShadowNode->IsFocusable()) {
+    pViewShadowNode->GetControl().IsTabStop(false);
+    xaml::Automation::AutomationProperties::SetAccessibilityView(
+        pViewShadowNode->GetControl(), xaml::Automation::Peers::AccessibilityView::Raw);
+  }
 }
 
 void ViewViewManager::SetLayoutProps(

vnext/src/Libraries/Components/Button.windows.js

@@ -342,6 +342,7 @@ class Button extends React.Component<
     if (Platform.OS === 'windows') {
       return (
         <Touchable
+          accessible={accessible}
           accessibilityLabel={accessibilityLabel}
           accessibilityHint={accessibilityHint}
           accessibilityLanguage={accessibilityLanguage}