diff --git a/change/@office-iss-react-native-win32-66e95e8b-c77f-4122-bcbb-fcb1e6ce5077.json b/change/@office-iss-react-native-win32-66e95e8b-c77f-4122-bcbb-fcb1e6ce5077.json new file mode 100644 index 00000000000..4a1763d9be8 --- /dev/null +++ b/change/@office-iss-react-native-win32-66e95e8b-c77f-4122-bcbb-fcb1e6ce5077.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Implement no-hide-accessibility", + "packageName": "@office-iss/react-native-win32", + "email": "tatianakapos@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/react-native-windows-93fc478e-4970-43db-9342-1f0e9aa42483.json b/change/react-native-windows-93fc478e-4970-43db-9342-1f0e9aa42483.json new file mode 100644 index 00000000000..d60b7fe2145 --- /dev/null +++ b/change/react-native-windows-93fc478e-4970-43db-9342-1f0e9aa42483.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Implement no-hide-accessibility", + "packageName": "react-native-windows", + "email": "tatianakapos@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/@office-iss/react-native-win32/src/Libraries/Components/View/View.win32.js b/packages/@office-iss/react-native-win32/src/Libraries/Components/View/View.win32.js index b9050da9042..aa093c8c4ca 100644 --- a/packages/@office-iss/react-native-win32/src/Libraries/Components/View/View.win32.js +++ b/packages/@office-iss/react-native-win32/src/Libraries/Components/View/View.win32.js @@ -75,6 +75,26 @@ const View: React.AbstractComponent< props.onKeyUpCapture && props.onKeyUpCapture(event); }; + // [Windows + const childrenWithImportantForAccessibility = children => { + return React.Children.map(children, child => { + if (React.isValidElement(child)) { + if (child.props.children) { + return React.cloneElement(child, { + accessible: false, + children: childrenWithImportantForAccessibility( + child.props.children, + ), + }); + } else { + return React.cloneElement(child, {accessible: false}); + } + } + return child; + }); + }; + // Windows] + return ( // [Windows // In core this is a TextAncestor.Provider value={false} See @@ -94,6 +114,18 @@ const View: React.AbstractComponent< onKeyDownCapture={_keyDownCapture} onKeyUp={_keyUp} onKeyUpCapture={_keyUpCapture} + // [Windows + accessible={ + props.importantForAccessibility === 'no-hide-descendants' + ? false + : props.accessible + } + children={ + props.importantForAccessibility === 'no-hide-descendants' + ? childrenWithImportantForAccessibility(props.children) + : props.children + } + // Windows] /> ); }} diff --git a/vnext/src/Libraries/Components/View/View.windows.js b/vnext/src/Libraries/Components/View/View.windows.js index b9050da9042..aa093c8c4ca 100644 --- a/vnext/src/Libraries/Components/View/View.windows.js +++ b/vnext/src/Libraries/Components/View/View.windows.js @@ -75,6 +75,26 @@ const View: React.AbstractComponent< props.onKeyUpCapture && props.onKeyUpCapture(event); }; + // [Windows + const childrenWithImportantForAccessibility = children => { + return React.Children.map(children, child => { + if (React.isValidElement(child)) { + if (child.props.children) { + return React.cloneElement(child, { + accessible: false, + children: childrenWithImportantForAccessibility( + child.props.children, + ), + }); + } else { + return React.cloneElement(child, {accessible: false}); + } + } + return child; + }); + }; + // Windows] + return ( // [Windows // In core this is a TextAncestor.Provider value={false} See @@ -94,6 +114,18 @@ const View: React.AbstractComponent< onKeyDownCapture={_keyDownCapture} onKeyUp={_keyUp} onKeyUpCapture={_keyUpCapture} + // [Windows + accessible={ + props.importantForAccessibility === 'no-hide-descendants' + ? false + : props.accessible + } + children={ + props.importantForAccessibility === 'no-hide-descendants' + ? childrenWithImportantForAccessibility(props.children) + : props.children + } + // Windows] /> ); }}