Fix Control Bug Accessible/Focusable Adjustment Code (#11032)

* Refactor Code * Change files * Update Locations
microsoft · Jan 30, 2023 · 031d0d7 · 031d0d7
1 parent 51c9f0f
commit 031d0d7
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 50 deletions.
diff --git a/change/react-native-windows-277cff43-6a02-4796-80c4-5d13ae258468.json b/change/react-native-windows-277cff43-6a02-4796-80c4-5d13ae258468.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Refactor Code",
+  "packageName": "react-native-windows",
+  "email": "34109996+chiaramooney@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/vnext/Microsoft.ReactNative/Views/ControlViewManager.cpp b/vnext/Microsoft.ReactNative/Views/ControlViewManager.cpp
@@ -82,16 +82,14 @@ bool ControlViewManager::UpdateProperty(
       }
     } else if (propertyName == "focusable") {
       if (propertyValue.Type() == winrt::Microsoft::ReactNative::JSValueType::Boolean) {
-        IsFocusable(propertyValue.AsBoolean());
-        control.IsTabStop(propertyValue.AsBoolean());
+        nodeToUpdate->IsFocusable(propertyValue.AsBoolean());
       } else if (propertyValue.IsNull()) {
-        control.ClearValue(TAB_STOP_PROPERTY());
-        IsFocusable(false);
+        nodeToUpdate->IsFocusable(false);
       }
     } else {
       if (propertyName == "accessible") {
         if (propertyValue.Type() == winrt::Microsoft::ReactNative::JSValueType::Boolean) {
-          IsAccessible(propertyValue.AsBoolean());
+          nodeToUpdate->IsAccessible(propertyValue.AsBoolean());
         }
       }
       ret = Super::UpdateProperty(nodeToUpdate, propertyName, propertyValue);
@@ -126,12 +124,11 @@ void ControlViewManager::OnPropertiesUpdated(ShadowNodeBase *node) {
 
   // If developer specifies either the accessible and focusable prop to be false
   // remove accessibility and keyboard focus for component.
-  if (IsAccessible() != IsFocusable()) {
-    control.IsTabStop(false);
-    xaml::Automation::AutomationProperties::SetAccessibilityView(
-        control, xaml::Automation::Peers::AccessibilityView::Raw);
-    control.IsEnabled(false);
-  }
+  const auto isTabStop = (node->IsAccessible() && node->IsFocusable());
+  const auto accessibilityView =
+      isTabStop ? xaml::Automation::Peers::AccessibilityView::Content : xaml::Automation::Peers::AccessibilityView::Raw;
+  control.IsTabStop(isTabStop);
+  xaml::Automation::AutomationProperties::SetAccessibilityView(control, accessibilityView);
 }
 
 void ControlViewManager::OnViewCreated(XamlView view) {
@@ -142,17 +139,4 @@ void ControlViewManager::OnViewCreated(XamlView view) {
   }
 }
 
-void ControlViewManager::IsAccessible(bool accessible) {
-  m_isAccessible = accessible;
-}
-bool ControlViewManager::IsAccessible() {
-  return m_isAccessible;
-}
-void ControlViewManager::IsFocusable(bool focusable) {
-  m_isFocusable = focusable;
-}
-bool ControlViewManager::IsFocusable() {
-  return m_isFocusable;
-}
-
 } // namespace Microsoft::ReactNative
diff --git a/vnext/Microsoft.ReactNative/Views/ControlViewManager.h b/vnext/Microsoft.ReactNative/Views/ControlViewManager.h
@@ -33,15 +33,6 @@ class REACTWINDOWS_EXPORT ControlViewManager : public FrameworkElementViewManage
   void OnViewCreated(XamlView view) override;
 
   void OnPropertiesUpdated(ShadowNodeBase *node) override;
-
- private:
-  void IsAccessible(bool accessible);
-  bool IsAccessible();
-  void IsFocusable(bool focusable);
-  bool IsFocusable();
-
-  bool m_isAccessible = true;
-  bool m_isFocusable = true;
 };
 
 } // namespace Microsoft::ReactNative
diff --git a/vnext/Microsoft.ReactNative/Views/ShadowNodeBase.cpp b/vnext/Microsoft.ReactNative/Views/ShadowNodeBase.cpp
@@ -166,4 +166,17 @@ void ShadowNodeBase::RedBox(const std::string &message) const noexcept {
   GetViewManager()->GetReactContext().CallJSFunction("RCTLog", "logToConsole", folly::dynamic::array("error", message));
 }
 
+void ShadowNodeBase::IsAccessible(bool accessible) {
+  m_isAccessible = accessible;
+}
+bool ShadowNodeBase::IsAccessible() {
+  return m_isAccessible;
+}
+void ShadowNodeBase::IsFocusable(bool focusable) {
+  m_isFocusable = focusable;
+}
+bool ShadowNodeBase::IsFocusable() {
+  return m_isFocusable;
+}
+
 } // namespace Microsoft::ReactNative
diff --git a/vnext/Microsoft.ReactNative/Views/ShadowNodeBase.h b/vnext/Microsoft.ReactNative/Views/ShadowNodeBase.h
@@ -121,9 +121,16 @@ struct REACTWINDOWS_EXPORT ShadowNodeBase : public ShadowNode {
     return m_onMouseEnterRegistered || m_onMouseLeaveRegistered;
   }
 
+  void IsAccessible(bool accessible);
+  bool IsAccessible();
+  void IsFocusable(bool focusable);
+  bool IsFocusable();
+
  protected:
   XamlView m_view;
   bool m_updating = false;
+  bool m_isFocusable = true;
+  bool m_isAccessible = true;
   comp::CompositionPropertySet m_transformPS{nullptr};
 
  public:

diff --git a/vnext/Microsoft.ReactNative/Views/ViewViewManager.cpp b/vnext/Microsoft.ReactNative/Views/ViewViewManager.cpp
@@ -47,6 +47,8 @@ class ViewShadowNode : public ShadowNodeBase {
     Super::createView(props);
 
     auto panel = GetPanel();
+    IsAccessible(false);
+    IsFocusable(false);
 
     DynamicAutomationProperties::SetAccessibilityInvokeEventHandler(panel, [=]() {
       if (OnClick())
@@ -121,21 +123,6 @@ class ViewShadowNode : public ShadowNodeBase {
     m_onClick = isSet;
   }
 
-  bool IsFocusable() const {
-    return m_isFocusable;
-  }
-  void IsFocusable(bool isFocusable) {
-    m_isFocusable = isFocusable;
-  }
-
-  bool IsAccessible() const {
-    return m_isAccessible;
-  }
-
-  void IsAccessible(bool isAccessible) {
-    m_isAccessible = isAccessible;
-  }
-
   bool IsHitTestBrushRequired() const {
     return IsRegisteredForMouseEvents();
   }
@@ -259,8 +246,6 @@ 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{};