react-native-windows 0.77.2 → 0.77.4

package/Libraries/Components/Button.windows.js

@@ -164,6 +164,7 @@ type ButtonProps = $ReadOnly<{|
   'aria-disabled'?: ?boolean,
   'aria-expanded'?: ?boolean,
   'aria-selected'?: ?boolean,
+  'aria-readonly'?: ?boolean, // Windows
   'aria-multiselectable'?: ?boolean, // Windows
   'aria-required'?: ?boolean, // Windows
 
@@ -312,6 +313,7 @@ const Button: component(
     'aria-expanded': ariaExpanded,
     'aria-label': ariaLabel,
     'aria-selected': ariaSelected,
+    'aria-readonly': ariaReadOnly, // Windows
     'aria-multiselectable': ariaMultiselectable, // Windows
     'aria-required': ariaRequired, // Windows
     importantForAccessibility,
@@ -349,6 +351,7 @@ const Button: component(
     disabled: ariaDisabled ?? accessibilityState?.disabled,
     expanded: ariaExpanded ?? accessibilityState?.expanded,
     selected: ariaSelected ?? accessibilityState?.selected,
+    readOnly: ariaReadOnly ?? accessibilityState?.readOnly, // Windows
     multiselectable: ariaMultiselectable ?? accessibilityState?.multiselectable, // Windows
     required: ariaRequired ?? accessibilityState?.required, // Windows
   };

package/Libraries/Components/Pressable/Pressable.windows.js

@@ -75,6 +75,7 @@ type Props = $ReadOnly<{|
   'aria-disabled'?: ?boolean,
   'aria-expanded'?: ?boolean,
   'aria-selected'?: ?boolean,
+  'aria-readonly'?: ?boolean, // Windows
   'aria-multiselectable'?: ?boolean, // Windows
   'aria-required'?: ?boolean, // Windows
   /**
@@ -264,6 +265,7 @@ function Pressable(
     'aria-expanded': ariaExpanded,
     'aria-label': ariaLabel,
     'aria-selected': ariaSelected,
+    'aria-readonly': ariaReadOnly,
     'aria-multiselectable': ariaMultiselectable, // Windows
     'aria-required': ariaRequired, // Windows
     cancelable,
@@ -309,6 +311,7 @@ function Pressable(
     disabled: ariaDisabled ?? accessibilityState?.disabled,
     expanded: ariaExpanded ?? accessibilityState?.expanded,
     selected: ariaSelected ?? accessibilityState?.selected,
+    readOnly: ariaReadOnly ?? accessibilityState?.readOnly,
     multiselectable: ariaMultiselectable ?? accessibilityState?.multiselectable, // Windows
     required: ariaRequired ?? accessibilityState?.required, // Windows
   };

package/Libraries/Components/TextInput/TextInput.windows.js

@@ -1360,6 +1360,7 @@ function InternalTextInput(props: Props): React.Node {
     'aria-disabled': ariaDisabled,
     'aria-expanded': ariaExpanded,
     'aria-selected': ariaSelected,
+    'aria-readonly': ariaReadOnly, // Windows
     'aria-multiselectable': ariaMultiselectable, // Windows
     'aria-required': ariaRequired, // Windows
     accessibilityState,
@@ -1691,6 +1692,7 @@ function InternalTextInput(props: Props): React.Node {
     ariaDisabled != null ||
     ariaExpanded != null ||
     ariaSelected != null ||
+    ariaReadOnly != null || // Windows
     ariaMultiselectable != null || // Windows
     ariaRequired != null // Windows
   ) {
@@ -1700,6 +1702,7 @@ function InternalTextInput(props: Props): React.Node {
       disabled: ariaDisabled ?? accessibilityState?.disabled,
       expanded: ariaExpanded ?? accessibilityState?.expanded,
       selected: ariaSelected ?? accessibilityState?.selected,
+      readOnly: ariaReadOnly ?? accessibilityState?.readOnly, // Windows
       multiselectable:
         ariaMultiselectable ?? accessibilityState?.multiselectable, // Windows
       required: ariaRequired ?? accessibilityState?.required, // Windows

package/Libraries/Components/Touchable/TouchableBounce.windows.js

@@ -146,6 +146,8 @@ class TouchableBounce extends React.Component<Props, State> {
         this.props['aria-expanded'] ?? this.props.accessibilityState?.expanded,
       selected:
         this.props['aria-selected'] ?? this.props.accessibilityState?.selected,
+      readOnly:
+        this.props['aria-readonly'] ?? this.props.accessibilityState?.readOnly, // Windows
       multiselectable:
         this.props['aria-multiselectable'] ??
         this.props.accessibilityState?.multiselectable, // Windows

package/Libraries/Components/Touchable/TouchableNativeFeedback.windows.js

@@ -265,6 +265,8 @@ class TouchableNativeFeedback extends React.Component<Props, State> {
         this.props['aria-expanded'] ?? this.props.accessibilityState?.expanded,
       selected:
         this.props['aria-selected'] ?? this.props.accessibilityState?.selected,
+      readOnly:
+        this.props['aria-readonly'] ?? this.props.accessibilityState?.readOnly,
       multiselectable:
         this.props['aria-multiselectable'] ??
         this.props.accessibilityState?.multiselectable, // Windows

package/Libraries/Components/Touchable/TouchableOpacity.windows.js

@@ -235,6 +235,8 @@ class TouchableOpacity extends React.Component<Props, State> {
         this.props['aria-expanded'] ?? this.props.accessibilityState?.expanded,
       selected:
         this.props['aria-selected'] ?? this.props.accessibilityState?.selected,
+      readOnly:
+        this.props['aria-readonly'] ?? this.props.accessibilityState?.readOnly, // Windows
       multiselectable:
         this.props['aria-multiselectable'] ??
         this.props.accessibilityState?.multiselectable, // Windows

package/Libraries/Components/Touchable/TouchableWithoutFeedback.windows.js

@@ -59,6 +59,7 @@ type Props = $ReadOnly<{|
   'aria-disabled'?: ?boolean,
   'aria-expanded'?: ?boolean,
   'aria-selected'?: ?boolean,
+  'aria-readonly'?: ?boolean, // Windows
   'aria-multiselectable'?: ?boolean, // Windows
   'aria-required'?: ?boolean, // Windows
   'aria-hidden'?: ?boolean,
@@ -224,6 +225,7 @@ const TouchableWithoutFeedback: React.AbstractComponent<
     disabled: props['aria-disabled'] ?? props.accessibilityState?.disabled,
     expanded: props['aria-expanded'] ?? props.accessibilityState?.expanded,
     selected: props['aria-selected'] ?? props.accessibilityState?.selected,
+    readonly: props['aria-readonly'] ?? props.accessibilityState?.readOnly, // Windows
     multiselectable:
       props['aria-multiselectable'] ??
       props.accessibilityState?.multiselectable, // Windows

package/Libraries/Components/View/View.windows.js

@@ -84,6 +84,7 @@ const View: component(
       'aria-level': ariaLevel,
       'aria-live': ariaLive,
       'aria-posinset': ariaPosinset, // Windows
+      'aria-readonly': ariaReadOnly, // Windows
       'aria-selected': ariaSelected,
       'aria-setsize': ariaSetsize, // Windows
       'aria-valuemax': ariaValueMax,
@@ -111,6 +112,7 @@ const View: component(
       ariaDisabled != null ||
       ariaExpanded != null ||
       ariaSelected != null ||
+      ariaReadOnly != null || // Windows
       ariaMultiselectable != null || // Windows
       ariaRequired != null // Windows
     ) {
@@ -120,6 +122,7 @@ const View: component(
         disabled: ariaDisabled ?? accessibilityState?.disabled,
         expanded: ariaExpanded ?? accessibilityState?.expanded,
         selected: ariaSelected ?? accessibilityState?.selected,
+        readOnly: ariaReadOnly ?? accessibilityState?.readOnly, // Windows
         multiselectable:
           ariaMultiselectable ?? accessibilityState?.multiselectable, // Windows
         required: ariaRequired ?? accessibilityState?.required, // Windows

package/Libraries/Components/View/ViewAccessibility.d.ts

@@ -183,14 +183,19 @@ export interface AccessibilityState {
    *  When present, informs accessible tools the element is expanded or collapsed
    */
   expanded?: boolean | undefined;
+  /**
+   *  When present, informs accessible tools the element is read only
+   *  @platform windows
+   */
+  readOnly?: boolean | undefined;
   /**
    *  When present, informs accessible tools the element can have multiple items selected
-   * @platform windows
+   *  @platform windows
    */
   multiselectable?: boolean | undefined;
   /**
    *  When present, informs accessible tools the element requires selection
-   * @platform windows
+   *  @platform windows
    */
   required?: boolean | undefined;
 }

package/Libraries/Components/View/ViewAccessibility.windows.js

@@ -181,6 +181,7 @@ export type AccessibilityState = {
   checked?: ?boolean | 'mixed',
   busy?: ?boolean,
   expanded?: ?boolean,
+  readOnly?: ?boolean, // Windows
   multiselectable?: ?boolean, // Windows
   required?: ?boolean, // Windows
   ...

package/Libraries/Components/View/ViewPropTypes.windows.js

@@ -620,6 +620,7 @@ export type ViewProps = $ReadOnly<{|
   'aria-disabled'?: ?boolean,
   'aria-expanded'?: ?boolean,
   'aria-selected'?: ?boolean,
+  'aria-readonly'?: ?boolean, // Windows
   /** A value indicating whether the accessibility elements contained within
    * this accessibility element are hidden.
    *

package/Libraries/Core/ReactNativeVersion.js

@@ -16,7 +16,7 @@ const version: $ReadOnly<{
 }> = {
   major: 0,
   minor: 77,
-  patch: 0,
+  patch: 1,
   prerelease: null,
 };
 

package/Libraries/Core/setUpDeveloperTools.js

@@ -42,9 +42,8 @@ if (__DEV__) {
   if (!Platform.isTesting) {
     const HMRClient = require('../Utilities/HMRClient');
 
-    if (global.__FUSEBOX_HAS_FULL_CONSOLE_SUPPORT__) {
-      HMRClient.unstable_notifyFuseboxConsoleEnabled();
-    } else if (console._isPolyfilled) {
+    // TODO(T214991636): Remove legacy Metro log forwarding
+    if (console._isPolyfilled) {
       // We assume full control over the console and send JavaScript logs to Metro.
       [
         'trace',

package/Libraries/Image/Image.windows.js

@@ -147,6 +147,7 @@ let BaseImage: AbstractImageIOS = React.forwardRef((props, forwardedRef) => {
     'aria-disabled': ariaDisabled,
     'aria-expanded': ariaExpanded,
     'aria-selected': ariaSelected,
+    'aria-readonly': ariaReadOnly, // Windows
     'aria-multiselectable': ariaMultiselectable, // Windows
     'aria-required': ariaRequired, // Windows
     height,
@@ -160,6 +161,7 @@ let BaseImage: AbstractImageIOS = React.forwardRef((props, forwardedRef) => {
     disabled: ariaDisabled ?? props.accessibilityState?.disabled,
     expanded: ariaExpanded ?? props.accessibilityState?.expanded,
     selected: ariaSelected ?? props.accessibilityState?.selected,
+    readOnly: ariaReadOnly ?? props.accessibilityState?.readOnly, // Windows
     multiselectable:
       ariaMultiselectable ?? props.accessibilityState?.multiselectable, // Windows
     required: ariaRequired ?? props.accessibilityState?.required, // Windows

package/Libraries/Text/Text.windows.js

@@ -60,6 +60,7 @@ const Text: component(
       'aria-posinset': ariaPosinset, // Windows
       'aria-setsize': ariaSetsize, // Windows
       'aria-selected': ariaSelected,
+      'aria-readonly': ariaReadOnly, //Windows
       children,
       ellipsizeMode,
       disabled,
@@ -98,6 +99,7 @@ const Text: component(
       ariaDisabled != null ||
       ariaExpanded != null ||
       ariaSelected != null ||
+      ariaReadOnly != null || // Windows
       ariaMultiselectable != null || // Windows
       ariaRequired != null // Windows
     ) {
@@ -108,6 +110,7 @@ const Text: component(
           disabled: ariaDisabled ?? _accessibilityState.disabled,
           expanded: ariaExpanded ?? _accessibilityState.expanded,
           selected: ariaSelected ?? _accessibilityState.selected,
+          readOnly: ariaReadOnly ?? _accessibilityState.readOnly, // Windows
           multiselectable:
             ariaMultiselectable ?? _accessibilityState.multiselectable, // Windows
           required: ariaRequired ?? _accessibilityState.required, // Windows
@@ -119,6 +122,7 @@ const Text: component(
           disabled: ariaDisabled,
           expanded: ariaExpanded,
           selected: ariaSelected,
+          readOnly: ariaReadOnly, // Windows
           multiselectable: ariaMultiselectable, // Windows
           required: ariaRequired, // Windows
         };

package/Libraries/Text/TextProps.windows.js

@@ -97,6 +97,7 @@ export type TextProps = $ReadOnly<{
   'aria-posinset'?: ?number, // Windows
   'aria-setsize'?: ?number, // Windows
   'aria-level'?: ?number, // Windows
+  'aria-readonly'?: ?boolean, // Windows
   'aria-multiselectable'?: ?boolean, // Windows
   'aria-required'?: ?boolean, // Windows
 

package/Libraries/Utilities/HMRClient.js

@@ -26,7 +26,6 @@ let hmrUnavailableReason: string | null = null;
 let currentCompileErrorMessage: string | null = null;
 let didConnect: boolean = false;
 let pendingLogs: Array<[LogLevel, $ReadOnlyArray<mixed>]> = [];
-let pendingFuseboxConsoleNotification = false;
 
 type LogLevel =
   | 'trace'
@@ -52,7 +51,6 @@ export type HMRClientNativeInterface = {|
     isEnabled: boolean,
     scheme?: string,
   ): void,
-  unstable_notifyFuseboxConsoleEnabled(): void,
 |};
 
 /**
@@ -142,29 +140,6 @@ const HMRClient: HMRClientNativeInterface = {
     }
   },
 
-  unstable_notifyFuseboxConsoleEnabled() {
-    if (!hmrClient) {
-      pendingFuseboxConsoleNotification = true;
-      return;
-    }
-    hmrClient.send(
-      JSON.stringify({
-        type: 'log',
-        level: 'info',
-        data: [
-          '\n' +
-            '\u001B[7m' +
-            ' \u001B[1m💡 JavaScript logs have moved!\u001B[22m They can now be ' +
-            'viewed in React Native DevTools. Tip: Type \u001B[1mj\u001B[22m in ' +
-            'the terminal to open (requires Google Chrome or Microsoft Edge).' +
-            '\u001B[27m' +
-            '\n',
-        ],
-      }),
-    );
-    pendingFuseboxConsoleNotification = false;
-  },
-
   // Called once by the bridge on startup, even if Fast Refresh is off.
   // It creates the HMR client but doesn't actually set up the socket yet.
   setup(
@@ -341,9 +316,6 @@ function flushEarlyLogs(client: MetroHMRClient) {
     pendingLogs.forEach(([level, data]) => {
       HMRClient.log(level, data);
     });
-    if (pendingFuseboxConsoleNotification) {
-      HMRClient.unstable_notifyFuseboxConsoleEnabled();
-    }
   } finally {
     pendingLogs.length = 0;
   }

package/Libraries/Utilities/HMRClientProdShim.js

@@ -25,7 +25,6 @@ const HMRClientProdShim: HMRClientNativeInterface = {
   disable() {},
   registerBundle() {},
   log() {},
-  unstable_notifyFuseboxConsoleEnabled() {},
 };
 
 module.exports = HMRClientProdShim;

package/Microsoft.ReactNative/Fabric/Composition/CompositionDynamicAutomationProvider.cpp

@@ -1,6 +1,8 @@
 #include "pch.h"
 #include "CompositionDynamicAutomationProvider.h"
 #include <Fabric/ComponentView.h>
+#include <Fabric/Composition/CompositionTextRangeProvider.h>
+#include <Fabric/Composition/ParagraphComponentView.h>
 #include <Fabric/Composition/SwitchComponentView.h>
 #include <Fabric/Composition/TextInput/WindowsTextInputComponentView.h>
 #include <Unicode.h>
@@ -25,6 +27,13 @@ CompositionDynamicAutomationProvider::CompositionDynamicAutomationProvider(
   if (props->accessibilityState.has_value() && props->accessibilityState->selected.has_value()) {
     AddSelectionItemsToContainer(this);
   }
+
+  if (strongView.try_as<winrt::Microsoft::ReactNative::Composition::implementation::WindowsTextInputComponentView>() ||
+      strongView.try_as<winrt::Microsoft::ReactNative::Composition::implementation::ParagraphComponentView>()) {
+    m_textProvider = winrt::make<CompositionTextProvider>(
+                         strongView.as<winrt::Microsoft::ReactNative::Composition::ComponentView>(), this)
+                         .try_as<ITextProvider2>();
+  }
 }
 
 HRESULT __stdcall CompositionDynamicAutomationProvider::Navigate(
@@ -141,8 +150,12 @@ HRESULT __stdcall CompositionDynamicAutomationProvider::get_ProviderOptions(Prov
   return S_OK;
 }
 
-bool accessibilityValueHasValue(const facebook::react::AccessibilityValue &value) {
-  return (value.min.has_value() && value.max.has_value()) || value.now.has_value() || value.text.has_value();
+bool accessibilityValueHasTextValue(const facebook::react::AccessibilityValue &value) {
+  return value.text.has_value();
+}
+
+bool accessibilityValueHasNumericValue(const facebook::react::AccessibilityValue &value) {
+  return (value.min.has_value() && value.max.has_value() && value.now.has_value());
 }
 
 bool expandableControl(const facebook::react::SharedViewProps props) {
@@ -203,8 +216,15 @@ HRESULT __stdcall CompositionDynamicAutomationProvider::GetPatternProvider(PATTE
   }
 
   if (patternId == UIA_ValuePatternId &&
-      (strongView.try_as<winrt::Microsoft::ReactNative::Composition::implementation::WindowsTextInputComponentView>() ||
-       accessibilityValueHasValue(props->accessibilityValue))) {
+      ((strongView
+            .try_as<winrt::Microsoft::ReactNative::Composition::implementation::WindowsTextInputComponentView>() &&
+        !accessibilityValueHasNumericValue(props->accessibilityValue)) ||
+       accessibilityValueHasTextValue(props->accessibilityValue))) {
+    *pRetVal = static_cast<IValueProvider *>(this);
+    AddRef();
+  }
+
+  if (patternId == UIA_RangeValuePatternId && accessibilityValueHasNumericValue(props->accessibilityValue)) {
     *pRetVal = static_cast<IValueProvider *>(this);
     AddRef();
   }
@@ -233,10 +253,21 @@ HRESULT __stdcall CompositionDynamicAutomationProvider::GetPatternProvider(PATTE
     AddRef();
   }
 
+  if (patternId == UIA_TextPatternId &&
+      (strongView.try_as<winrt::Microsoft::ReactNative::Composition::implementation::WindowsTextInputComponentView>() ||
+       strongView.try_as<winrt::Microsoft::ReactNative::Composition::implementation::ParagraphComponentView>())) {
+    m_textProvider.as<IUnknown>().copy_to(pRetVal);
+  }
+
+  if (patternId == UIA_TextPattern2Id &&
+      strongView.try_as<winrt::Microsoft::ReactNative::Composition::implementation::WindowsTextInputComponentView>()) {
+    m_textProvider.as<IUnknown>().copy_to(pRetVal);
+  }
+
   return S_OK;
 }
 
-long GetControlType(const std::string &role) noexcept {
+long GetControlTypeFromString(const std::string &role) noexcept {
   if (role == "adjustable") {
     return UIA_SliderControlTypeId;
   } else if (role == "group" || role == "search" || role == "radiogroup" || role == "timer" || role.empty()) {
@@ -299,6 +330,96 @@ long GetControlType(const std::string &role) noexcept {
   return UIA_GroupControlTypeId;
 }
 
+long GetControlTypeFromRole(const facebook::react::Role &role) noexcept {
+  switch (role) {
+    case facebook::react::Role::Alert:
+      return UIA_TextControlTypeId;
+    case facebook::react::Role::Application:
+      return UIA_WindowControlTypeId;
+    case facebook::react::Role::Button:
+      return UIA_ButtonControlTypeId;
+    case facebook::react::Role::Checkbox:
+      return UIA_CheckBoxControlTypeId;
+    case facebook::react::Role::Columnheader:
+      return UIA_HeaderControlTypeId;
+    case facebook::react::Role::Combobox:
+      return UIA_ComboBoxControlTypeId;
+    case facebook::react::Role::Document:
+      return UIA_DocumentControlTypeId;
+    case facebook::react::Role::Grid:
+      return UIA_GroupControlTypeId;
+    case facebook::react::Role::Group:
+      return UIA_GroupControlTypeId;
+    case facebook::react::Role::Heading:
+      return UIA_TextControlTypeId;
+    case facebook::react::Role::Img:
+      return UIA_ImageControlTypeId;
+    case facebook::react::Role::Link:
+      return UIA_HyperlinkControlTypeId;
+    case facebook::react::Role::List:
+      return UIA_ListControlTypeId;
+    case facebook::react::Role::Listitem:
+      return UIA_ListItemControlTypeId;
+    case facebook::react::Role::Menu:
+      return UIA_MenuControlTypeId;
+    case facebook::react::Role::Menubar:
+      return UIA_MenuBarControlTypeId;
+    case facebook::react::Role::Menuitem:
+      return UIA_MenuItemControlTypeId;
+    case facebook::react::Role::None:
+      return UIA_GroupControlTypeId;
+    case facebook::react::Role::Presentation:
+      return UIA_GroupControlTypeId;
+    case facebook::react::Role::Progressbar:
+      return UIA_ProgressBarControlTypeId;
+    case facebook::react::Role::Radio:
+      return UIA_RadioButtonControlTypeId;
+    case facebook::react::Role::Radiogroup:
+      return UIA_GroupControlTypeId;
+    case facebook::react::Role::Rowgroup:
+      return UIA_GroupControlTypeId;
+    case facebook::react::Role::Rowheader:
+      return UIA_HeaderControlTypeId;
+    case facebook::react::Role::Scrollbar:
+      return UIA_ScrollBarControlTypeId;
+    case facebook::react::Role::Searchbox:
+      return UIA_EditControlTypeId;
+    case facebook::react::Role::Separator:
+      return UIA_SeparatorControlTypeId;
+    case facebook::react::Role::Slider:
+      return UIA_SliderControlTypeId;
+    case facebook::react::Role::Spinbutton:
+      return UIA_SpinnerControlTypeId;
+    case facebook::react::Role::Status:
+      return UIA_StatusBarControlTypeId;
+    case facebook::react::Role::Summary:
+      return UIA_GroupControlTypeId;
+    case facebook::react::Role::Switch:
+      return UIA_ButtonControlTypeId;
+    case facebook::react::Role::Tab:
+      return UIA_TabItemControlTypeId;
+    case facebook::react::Role::Table:
+      return UIA_TableControlTypeId;
+    case facebook::react::Role::Tablist:
+      return UIA_TabControlTypeId;
+    case facebook::react::Role::Tabpanel:
+      return UIA_TabControlTypeId;
+    case facebook::react::Role::Timer:
+      return UIA_ButtonControlTypeId;
+    case facebook::react::Role::Toolbar:
+      return UIA_ToolBarControlTypeId;
+    case facebook::react::Role::Tooltip:
+      return UIA_ToolTipControlTypeId;
+    case facebook::react::Role::Tree:
+      return UIA_TreeControlTypeId;
+    case facebook::react::Role::Treegrid:
+      return UIA_TreeControlTypeId;
+    case facebook::react::Role::Treeitem:
+      return UIA_TreeItemControlTypeId;
+  }
+  return UIA_GroupControlTypeId;
+}
+
 HRESULT __stdcall CompositionDynamicAutomationProvider::GetPropertyValue(PROPERTYID propertyId, VARIANT *pRetVal) {
   if (pRetVal == nullptr)
     return E_POINTER;
@@ -324,8 +445,10 @@ HRESULT __stdcall CompositionDynamicAutomationProvider::GetPropertyValue(PROPERT
   switch (propertyId) {
     case UIA_ControlTypePropertyId: {
       pRetVal->vt = VT_I4;
-      auto role = props->accessibilityRole.empty() ? compositionView->DefaultControlType() : props->accessibilityRole;
-      pRetVal->lVal = GetControlType(role);
+      pRetVal->lVal = props->role == facebook::react::Role::None ? props->accessibilityRole.empty()
+              ? GetControlTypeFromString(compositionView->DefaultControlType())
+              : GetControlTypeFromString(props->accessibilityRole)
+                                                                 : GetControlTypeFromRole(props->role);
       break;
     }
     case UIA_AutomationIdPropertyId: {
@@ -365,12 +488,18 @@ HRESULT __stdcall CompositionDynamicAutomationProvider::GetPropertyValue(PROPERT
     }
     case UIA_IsContentElementPropertyId: {
       pRetVal->vt = VT_BOOL;
-      pRetVal->boolVal = (props->accessible && props->accessibilityRole != "none") ? VARIANT_TRUE : VARIANT_FALSE;
+      pRetVal->boolVal =
+          (props->accessible && (props->accessibilityRole != "none" || props->role != facebook::react::Role::None))
+          ? VARIANT_TRUE
+          : VARIANT_FALSE;
       break;
     }
     case UIA_IsControlElementPropertyId: {
       pRetVal->vt = VT_BOOL;
-      pRetVal->boolVal = (props->accessible && props->accessibilityRole != "none") ? VARIANT_TRUE : VARIANT_FALSE;
+      pRetVal->boolVal =
+          (props->accessible && (props->accessibilityRole != "none" || props->role != facebook::react::Role::None))
+          ? VARIANT_TRUE
+          : VARIANT_FALSE;
       break;
     }
     case UIA_IsOffscreenPropertyId: {
@@ -485,6 +614,8 @@ HRESULT __stdcall CompositionDynamicAutomationProvider::SetValue(LPCWSTR val) {
 
   winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(strongView)
       ->setAcccessiblityValue(winrt::to_string(val));
+  // TODO: Edit once/if onAccessibilityAction props supports returning UIA event data. See
+  // https://github.com/react-native-community/discussions-and-proposals/issues/843.
   DispatchAccessibilityAction(m_view, "setValue");
   return S_OK;
 }
@@ -515,23 +646,86 @@ HRESULT __stdcall CompositionDynamicAutomationProvider::get_IsReadOnly(BOOL *pRe
       winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(strongView)->props());
   if (props == nullptr)
     return UIA_E_ELEMENTNOTAVAILABLE;
-  auto accessibilityRole = props->accessibilityRole;
-  if (accessibilityRole.empty()) {
-    // Control is using default control type. Use default IsReadOnly value.
-    *pRetVal = winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(strongView)
-                   ->getAcccessiblityIsReadOnly();
-  } else if (
-      accessibilityRole == "textinput" || accessibilityRole == "searchbox" || accessibilityRole == "adjustable" ||
-      accessibilityRole == "spinbutton" || accessibilityRole == "combobox") {
-    // Control is using customized control type which should not be IsReadOnly for value pattern.
-    *pRetVal = false;
+  if (props->accessibilityState.has_value() && props->accessibilityState->readOnly.has_value()) {
+    *pRetVal = props->accessibilityState->readOnly.value();
   } else {
-    // Control is using customized control type which should be IsReadOnly for value pattern.
-    *pRetVal = true;
+    // Use default IsReadOnly value.
+    *pRetVal = false;
   }
   return S_OK;
 }
 
+HRESULT __stdcall CompositionDynamicAutomationProvider::get_LargeChange(double *pRetVal) {
+  // no-op
+  return S_OK;
+}
+HRESULT __stdcall CompositionDynamicAutomationProvider::get_Maximum(double *pRetVal) {
+  if (pRetVal == nullptr)
+    return E_POINTER;
+  auto strongView = m_view.view();
+
+  if (!strongView)
+    return UIA_E_ELEMENTNOTAVAILABLE;
+
+  auto props = std::static_pointer_cast<const facebook::react::ViewProps>(
+      winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(strongView)->props());
+
+  if (props == nullptr)
+    return UIA_E_ELEMENTNOTAVAILABLE;
+
+  *pRetVal = props->accessibilityValue.max.value();
+  return S_OK;
+}
+HRESULT __stdcall CompositionDynamicAutomationProvider::get_Minimum(double *pRetVal) {
+  if (pRetVal == nullptr)
+    return E_POINTER;
+  auto strongView = m_view.view();
+
+  if (!strongView)
+    return UIA_E_ELEMENTNOTAVAILABLE;
+
+  auto props = std::static_pointer_cast<const facebook::react::ViewProps>(
+      winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(strongView)->props());
+
+  if (props == nullptr)
+    return UIA_E_ELEMENTNOTAVAILABLE;
+
+  *pRetVal = props->accessibilityValue.min.value();
+  return S_OK;
+}
+HRESULT __stdcall CompositionDynamicAutomationProvider::get_SmallChange(double *pRetVal) {
+  // no-op
+  return S_OK;
+}
+HRESULT __stdcall CompositionDynamicAutomationProvider::get_Value(double *pRetVal) {
+  if (pRetVal == nullptr)
+    return E_POINTER;
+  auto strongView = m_view.view();
+
+  if (!strongView)
+    return UIA_E_ELEMENTNOTAVAILABLE;
+
+  auto props = std::static_pointer_cast<const facebook::react::ViewProps>(
+      winrt::get_self<winrt::Microsoft::ReactNative::implementation::ComponentView>(strongView)->props());
+
+  if (props == nullptr)
+    return UIA_E_ELEMENTNOTAVAILABLE;
+
+  *pRetVal = props->accessibilityValue.now.value();
+  return S_OK;
+}
+HRESULT __stdcall CompositionDynamicAutomationProvider::SetValue(double val) {
+  auto strongView = m_view.view();
+
+  if (!strongView)
+    return UIA_E_ELEMENTNOTAVAILABLE;
+
+  // TODO: Edit once/if onAccessibilityAction props supports returning UIA event data. See
+  // https://github.com/react-native-community/discussions-and-proposals/issues/843.
+  DispatchAccessibilityAction(m_view, "setValue");
+  return S_OK;
+}
+
 HRESULT __stdcall CompositionDynamicAutomationProvider::get_ToggleState(ToggleState *pRetVal) {
   if (pRetVal == nullptr)
     return E_POINTER;