diff --git a/packages/react-native/Libraries/Components/View/__tests__/View-itest.js b/packages/react-native/Libraries/Components/View/__tests__/View-itest.js index 43dd28766a67d9..04b384626638cb 100644 --- a/packages/react-native/Libraries/Components/View/__tests__/View-itest.js +++ b/packages/react-native/Libraries/Components/View/__tests__/View-itest.js @@ -15,182 +15,357 @@ import * as Fantom from '@react-native/fantom'; import * as React from 'react'; import {View} from 'react-native'; -describe('width and height style', () => { - it('handles correct percentage-based dimensions', () => { - const root = Fantom.createRoot(); - - Fantom.runTask(() => { - root.render( - - - , +describe('', () => { + describe('width and height style', () => { + it('handles correct percentage-based dimensions', () => { + const root = Fantom.createRoot(); + + Fantom.runTask(() => { + root.render( + + + , + ); + }); + + expect( + root.getRenderedOutput({includeLayoutMetrics: true}).toJSX(), + ).toEqual( + , ); }); - expect( - root.getRenderedOutput({includeLayoutMetrics: true}).toJSX(), - ).toEqual( - , - ); - }); + it('handles numeric values passed in as strings', () => { + const root = Fantom.createRoot(); - it('handles numeric values passed in as strings', () => { - const root = Fantom.createRoot(); + Fantom.runTask(() => { + root.render( + , + ); + }); - Fantom.runTask(() => { - root.render( - , + expect( + root.getRenderedOutput({includeLayoutMetrics: true}).toJSX(), + ).toEqual( + , ); }); - expect( - root.getRenderedOutput({includeLayoutMetrics: true}).toJSX(), - ).toEqual( - , - ); - }); + it('handles invalid values, falling back to default', () => { + const root = Fantom.createRoot(); + + Fantom.runTask(() => { + root.render( + + + , + ); + }); - it('handles invalid values, falling back to default', () => { - const root = Fantom.createRoot(); - - Fantom.runTask(() => { - root.render( - - - , + expect( + root.getRenderedOutput({includeLayoutMetrics: true}).toJSX(), + ).toEqual( + , ); }); - - expect( - root.getRenderedOutput({includeLayoutMetrics: true}).toJSX(), - ).toEqual( - , - ); }); -}); -describe('margin style', () => { - it('handles correct percentage-based values', () => { - const root = Fantom.createRoot(); - - Fantom.runTask(() => { - root.render( - - - , + describe('margin style', () => { + it('handles correct percentage-based values', () => { + const root = Fantom.createRoot(); + + Fantom.runTask(() => { + root.render( + + + , + ); + }); + + expect( + root.getRenderedOutput({includeLayoutMetrics: true}).toJSX(), + ).toEqual( + , ); }); - expect( - root.getRenderedOutput({includeLayoutMetrics: true}).toJSX(), - ).toEqual( - , - ); - }); + it('handles numeric values passed in as strings', () => { + const root = Fantom.createRoot(); + + Fantom.runTask(() => { + root.render( + + + , + ); + }); - it('handles numeric values passed in as strings', () => { - const root = Fantom.createRoot(); - - Fantom.runTask(() => { - root.render( - - - , + expect( + root.getRenderedOutput({includeLayoutMetrics: true}).toJSX(), + ).toEqual( + , ); }); - - expect( - root.getRenderedOutput({includeLayoutMetrics: true}).toJSX(), - ).toEqual( - , - ); }); -}); -describe('accessibilityRole', () => { - it('is propagated to the mounting layer', () => { - const root = Fantom.createRoot(); + describe('props', () => { + describe('accessibility', () => { + describe('accessibilityActions', () => { + it('is propagated to the mounting layer', () => { + const root = Fantom.createRoot(); - Fantom.runTask(() => { - root.render(); - }); + Fantom.runTask(() => { + root.render( + , + ); + }); - expect( - root.getRenderedOutput({props: ['accessibilityRole']}).toJSX(), - ).toEqual(); - }); + expect( + root.getRenderedOutput({props: ['accessibilityActions']}).toJSX(), + ).toEqual( + , + ); + }); + + it('does not unflatten view', () => { + const root = Fantom.createRoot(); + + Fantom.runTask(() => { + root.render( + , + ); + }); + + expect( + root.getRenderedOutput({props: ['accessibilityRole']}).toJSX(), + ).toEqual(null); + }); + }); + + describe('accessibilityElementsHidden', () => { + it('is not propagated to mounting layer, it is iOS only prop', () => { + const root = Fantom.createRoot(); + + Fantom.runTask(() => { + root.render(); + }); + + expect( + root + .getRenderedOutput({props: ['accessibilityElementsHidden']}) + .toJSX(), + ).toEqual(null); + }); + }); + + describe('accessibilityHint', () => { + it('is propagated to the mounting layer', () => { + const root = Fantom.createRoot(); + + Fantom.runTask(() => { + root.render(); + }); + + expect( + root.getRenderedOutput({props: ['accessibilityHint']}).toJSX(), + ).toEqual(); + }); - it('does not unflatten view', () => { - const root = Fantom.createRoot(); + it('does not unflatten view', () => { + const root = Fantom.createRoot(); - Fantom.runTask(() => { - root.render(); + Fantom.runTask(() => { + root.render(); + }); + + expect( + root.getRenderedOutput({props: ['accessibilityHint']}).toJSX(), + ).toEqual(null); + }); + }); + + describe('accessibilityLabel', () => { + it('is propagated to the mounting layer', () => { + const root = Fantom.createRoot(); + + Fantom.runTask(() => { + root.render( + , + ); + }); + + expect( + root.getRenderedOutput({props: ['accessibilityLabel']}).toJSX(), + ).toEqual(); + }); + + it('does not unflatten view', () => { + const root = Fantom.createRoot(); + + Fantom.runTask(() => { + root.render(); + }); + + expect( + root.getRenderedOutput({props: ['accessibilityLabel']}).toJSX(), + ).toEqual(null); + }); + }); + + describe('accessibilityLiveRegion', () => { + it('is propagated to the mounting layer', () => { + const root = Fantom.createRoot(); + + Fantom.runTask(() => { + root.render( + , + ); + }); + + expect( + root + .getRenderedOutput({props: ['accessibilityLiveRegion']}) + .toJSX(), + ).toEqual(); + }); + + it('does not unflatten view', () => { + const root = Fantom.createRoot(); + + Fantom.runTask(() => { + root.render(); + }); + + expect( + root + .getRenderedOutput({props: ['accessibilityLiveRegion']}) + .toJSX(), + ).toEqual(null); + }); + }); + + describe('accessibilityRole', () => { + it('is propagated to the mounting layer', () => { + const root = Fantom.createRoot(); + + Fantom.runTask(() => { + root.render( + , + ); + }); + + expect( + root.getRenderedOutput({props: ['accessibilityRole']}).toJSX(), + ).toEqual(); + }); + + it('does not unflatten view', () => { + const root = Fantom.createRoot(); + + Fantom.runTask(() => { + root.render(); + }); + + expect( + root.getRenderedOutput({props: ['accessibilityRole']}).toJSX(), + ).toEqual(null); + }); + }); }); - expect( - root.getRenderedOutput({props: ['accessibilityRole']}).toJSX(), - ).toEqual(null); + describe('accessible', () => { + it('unflattens view', () => { + const root = Fantom.createRoot(); + + Fantom.runTask(() => { + root.render(); + }); + + expect(root.getRenderedOutput({props: ['accessible']}).toJSX()).toEqual( + null, + ); + + Fantom.runTask(() => { + root.render(); + }); + + expect(root.getRenderedOutput({props: ['accessible']}).toJSX()).toEqual( + , + ); + }); + }); }); }); diff --git a/packages/react-native/ReactCommon/react/renderer/components/view/AccessibilityPrimitives.h b/packages/react-native/ReactCommon/react/renderer/components/view/AccessibilityPrimitives.h index 73d0dd8e778cdd..7a1e1679382a91 100644 --- a/packages/react-native/ReactCommon/react/renderer/components/view/AccessibilityPrimitives.h +++ b/packages/react-native/ReactCommon/react/renderer/components/view/AccessibilityPrimitives.h @@ -53,6 +53,27 @@ struct AccessibilityAction { std::optional label{}; }; +inline std::string toString(const AccessibilityAction& accessibilityAction) { + std::string result = accessibilityAction.name; + if (accessibilityAction.label.has_value()) { + result += ": '" + accessibilityAction.label.value() + "'"; + } + return result; +} + +inline std::string toString( + std::vector accessibilityActions) { + std::string result = "["; + for (size_t i = 0; i < accessibilityActions.size(); i++) { + result += toString(accessibilityActions[i]); + if (i < accessibilityActions.size() - 1) { + result += ", "; + } + } + result += "]"; + return result; +} + inline static bool operator==( const AccessibilityAction& lhs, const AccessibilityAction& rhs) { @@ -136,6 +157,18 @@ enum class AccessibilityLiveRegion : uint8_t { Assertive, }; +inline std::string toString( + const AccessibilityLiveRegion& accessibilityLiveRegion) { + switch (accessibilityLiveRegion) { + case AccessibilityLiveRegion::None: + return "none"; + case AccessibilityLiveRegion::Polite: + return "polite"; + case AccessibilityLiveRegion::Assertive: + return "assertive"; + } +} + enum class AccessibilityRole { None, Button, diff --git a/packages/react-native/ReactCommon/react/renderer/components/view/AccessibilityProps.cpp b/packages/react-native/ReactCommon/react/renderer/components/view/AccessibilityProps.cpp index 90153a6bba4b52..495b2aa1861540 100644 --- a/packages/react-native/ReactCommon/react/renderer/components/view/AccessibilityProps.cpp +++ b/packages/react-native/ReactCommon/react/renderer/components/view/AccessibilityProps.cpp @@ -301,6 +301,7 @@ void AccessibilityProps::setProp( #pragma mark - DebugStringConvertible #if RN_DEBUG_STRING_CONVERTIBLE + SharedDebugStringConvertibleList AccessibilityProps::getDebugProps() const { const auto& defaultProps = AccessibilityProps(); return SharedDebugStringConvertibleList{ @@ -309,6 +310,28 @@ SharedDebugStringConvertibleList AccessibilityProps::getDebugProps() const { "accessibilityRole", accessibilityRole, defaultProps.accessibilityRole), + debugStringConvertibleItem( + "accessible", accessible, defaultProps.accessible), + debugStringConvertibleItem( + "accessibilityActions", + accessibilityActions, + defaultProps.accessibilityActions), + debugStringConvertibleItem( + "accessibilityElementsHidden", + accessibilityElementsHidden, + defaultProps.accessibilityElementsHidden), + debugStringConvertibleItem( + "accessibilityHint", + accessibilityHint, + defaultProps.accessibilityHint), + debugStringConvertibleItem( + "accessibilityLabel", + accessibilityLabel, + defaultProps.accessibilityLabel), + debugStringConvertibleItem( + "accessibilityLiveRegion", + accessibilityLiveRegion, + defaultProps.accessibilityLiveRegion), }; } #endif // RN_DEBUG_STRING_CONVERTIBLE diff --git a/packages/react-native/ReactCommon/react/renderer/debug/debugStringConvertibleUtils.h b/packages/react-native/ReactCommon/react/renderer/debug/debugStringConvertibleUtils.h index 55213b78c8b409..4ffcfca122e8b1 100644 --- a/packages/react-native/ReactCommon/react/renderer/debug/debugStringConvertibleUtils.h +++ b/packages/react-native/ReactCommon/react/renderer/debug/debugStringConvertibleUtils.h @@ -7,11 +7,9 @@ #pragma once -#include #include #include #include -#include #include #include