From c735a111daeaa93d46784680bfa75757d44c922e Mon Sep 17 00:00:00 2001 From: Chiara Mooney <34109996+chiaramooney@users.noreply.github.com> Date: Wed, 27 Apr 2022 18:18:32 -0700 Subject: [PATCH 1/7] Implement no-hide-accessibility --- .../Libraries/Components/View/View.win32.js | 21 +++++++++++++++++++ .../Libraries/Components/View/View.windows.js | 21 +++++++++++++++++++ 2 files changed, 42 insertions(+) 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 d16e6279727..95e213198ea 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,24 @@ 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 +112,9 @@ const View: React.AbstractComponent< onKeyDownCapture={_keyDownCapture} onKeyUp={_keyUp} onKeyUpCapture={_keyUpCapture} + // [Windows + 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 d16e6279727..42e4396eb60 100644 --- a/vnext/src/Libraries/Components/View/View.windows.js +++ b/vnext/src/Libraries/Components/View/View.windows.js @@ -75,6 +75,24 @@ 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 +112,9 @@ const View: React.AbstractComponent< onKeyDownCapture={_keyDownCapture} onKeyUp={_keyUp} onKeyUpCapture={_keyUpCapture} + // [Windows + children={props.importantForAccessibility == 'no-hide-descendants' ? childrenWithImportantForAccessibility(props.children) : props.children} + // Windows] /> ); }} From edba8dcf637dca097288f9ea98de6e04a017928f Mon Sep 17 00:00:00 2001 From: Chiara Mooney <34109996+chiaramooney@users.noreply.github.com> Date: Wed, 27 Apr 2022 18:23:23 -0700 Subject: [PATCH 2/7] Change files --- ...-native-win32-2233ce57-16d8-4600-a96d-ce46a11cadde.json | 7 +++++++ ...ative-windows-454d3cec-b8c1-4e81-b92a-0b747f9ab9ef.json | 7 +++++++ 2 files changed, 14 insertions(+) create mode 100644 change/@office-iss-react-native-win32-2233ce57-16d8-4600-a96d-ce46a11cadde.json create mode 100644 change/react-native-windows-454d3cec-b8c1-4e81-b92a-0b747f9ab9ef.json diff --git a/change/@office-iss-react-native-win32-2233ce57-16d8-4600-a96d-ce46a11cadde.json b/change/@office-iss-react-native-win32-2233ce57-16d8-4600-a96d-ce46a11cadde.json new file mode 100644 index 00000000000..7b4095d1ecc --- /dev/null +++ b/change/@office-iss-react-native-win32-2233ce57-16d8-4600-a96d-ce46a11cadde.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "Implement no-hide-accessibility", + "packageName": "@office-iss/react-native-win32", + "email": "34109996+chiaramooney@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/change/react-native-windows-454d3cec-b8c1-4e81-b92a-0b747f9ab9ef.json b/change/react-native-windows-454d3cec-b8c1-4e81-b92a-0b747f9ab9ef.json new file mode 100644 index 00000000000..3c091ef2612 --- /dev/null +++ b/change/react-native-windows-454d3cec-b8c1-4e81-b92a-0b747f9ab9ef.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "Implement no-hide-accessibility", + "packageName": "react-native-windows", + "email": "34109996+chiaramooney@users.noreply.github.com", + "dependentChangeType": "patch" +} From 4bdd4c5db2d55610e065156ea18b7662eb311852 Mon Sep 17 00:00:00 2001 From: Chiara Mooney <34109996+chiaramooney@users.noreply.github.com> Date: Thu, 28 Apr 2022 11:40:40 -0700 Subject: [PATCH 3/7] Fix Lint --- .../Components/TextInput/TextInput.win32.tsx | 2 +- .../Components/Touchable/TouchableWin32.tsx | 16 ++++----- .../Components/View/Tests/ViewWin32Test.tsx | 2 +- .../Libraries/Components/View/View.win32.js | 34 +++++++++++-------- 4 files changed, 30 insertions(+), 24 deletions(-) diff --git a/packages/@office-iss/react-native-win32/src/Libraries/Components/TextInput/TextInput.win32.tsx b/packages/@office-iss/react-native-win32/src/Libraries/Components/TextInput/TextInput.win32.tsx index d7e44011a32..52a23232396 100644 --- a/packages/@office-iss/react-native-win32/src/Libraries/Components/TextInput/TextInput.win32.tsx +++ b/packages/@office-iss/react-native-win32/src/Libraries/Components/TextInput/TextInput.win32.tsx @@ -60,7 +60,7 @@ class TextInput extends React.Component { private readonly _inputRef: React.RefObject & Readonly>; private _lastNativeText: string; - private _eventCount = 0; + private readonly _eventCount = 0; constructor(props) { super(props); diff --git a/packages/@office-iss/react-native-win32/src/Libraries/Components/Touchable/TouchableWin32.tsx b/packages/@office-iss/react-native-win32/src/Libraries/Components/Touchable/TouchableWin32.tsx index 4d53de74a80..45dd88043b7 100644 --- a/packages/@office-iss/react-native-win32/src/Libraries/Components/Touchable/TouchableWin32.tsx +++ b/packages/@office-iss/react-native-win32/src/Libraries/Components/Touchable/TouchableWin32.tsx @@ -181,14 +181,14 @@ const LONG_PRESS_ALLOWED_MOVEMENT = 10; * (that use internal state to conditionally calculate styles) */ export class TouchableWin32 extends React.Component { - private _longPressDelayTimeout: number; - private _touchableDelayTimeout: number; - private _pressOutDelayTimeout: number; - private _pressInLocation: IPressInLocation; - private _touchState: IState; - private _responderID: number; - private _positionOnActivate: IPosition; - private _dimensionsOnActivate: IDimensions; + private readonly _longPressDelayTimeout: number; + private readonly _touchableDelayTimeout: number; + private readonly _pressOutDelayTimeout: number; + private readonly _pressInLocation: IPressInLocation; + private readonly _touchState: IState; + private readonly _responderID: number; + private readonly _positionOnActivate: IPosition; + private readonly _dimensionsOnActivate: IDimensions; private readonly _internalRef: React.RefObject diff --git a/packages/@office-iss/react-native-win32/src/Libraries/Components/View/Tests/ViewWin32Test.tsx b/packages/@office-iss/react-native-win32/src/Libraries/Components/View/Tests/ViewWin32Test.tsx index 7fe777f1df3..a55f3f17bcc 100644 --- a/packages/@office-iss/react-native-win32/src/Libraries/Components/View/Tests/ViewWin32Test.tsx +++ b/packages/@office-iss/react-native-win32/src/Libraries/Components/View/Tests/ViewWin32Test.tsx @@ -30,7 +30,7 @@ interface IFocusableComponentState { } class FocusMoverTestComponent extends React.Component<{}, IFocusableComponentState> { - private _focusTarget: ViewWin32 = null; + private readonly _focusTarget: ViewWin32 = null; private readonly _labeledBy: React.RefObject; public constructor(props) { 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 95e213198ea..6f0fafb043d 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 @@ -76,22 +76,24 @@ const View: React.AbstractComponent< }; // [Windows -const childrenWithImportantForAccessibility = children => { - return React.Children.map( - children, - (child) => { + 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}); - } + 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] + }); + }; + // Windows] return ( // [Windows @@ -113,7 +115,11 @@ const childrenWithImportantForAccessibility = children => { onKeyUp={_keyUp} onKeyUpCapture={_keyUpCapture} // [Windows - children={props.importantForAccessibility == 'no-hide-descendants' ? childrenWithImportantForAccessibility(props.children) : props.children} + children={ + props.importantForAccessibility == 'no-hide-descendants' + ? childrenWithImportantForAccessibility(props.children) + : props.children + } // Windows] /> ); From df2903040bc31d5cdd7b1710e084ff38190bb97d Mon Sep 17 00:00:00 2001 From: Chiara Mooney <34109996+chiaramooney@users.noreply.github.com> Date: Thu, 28 Apr 2022 11:43:04 -0700 Subject: [PATCH 4/7] Remove Unneeded Change --- .../Components/TextInput/TextInput.win32.tsx | 2 +- .../Components/Touchable/TouchableWin32.tsx | 16 ++++++++-------- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/@office-iss/react-native-win32/src/Libraries/Components/TextInput/TextInput.win32.tsx b/packages/@office-iss/react-native-win32/src/Libraries/Components/TextInput/TextInput.win32.tsx index 52a23232396..d7e44011a32 100644 --- a/packages/@office-iss/react-native-win32/src/Libraries/Components/TextInput/TextInput.win32.tsx +++ b/packages/@office-iss/react-native-win32/src/Libraries/Components/TextInput/TextInput.win32.tsx @@ -60,7 +60,7 @@ class TextInput extends React.Component { private readonly _inputRef: React.RefObject & Readonly>; private _lastNativeText: string; - private readonly _eventCount = 0; + private _eventCount = 0; constructor(props) { super(props); diff --git a/packages/@office-iss/react-native-win32/src/Libraries/Components/Touchable/TouchableWin32.tsx b/packages/@office-iss/react-native-win32/src/Libraries/Components/Touchable/TouchableWin32.tsx index 45dd88043b7..4d53de74a80 100644 --- a/packages/@office-iss/react-native-win32/src/Libraries/Components/Touchable/TouchableWin32.tsx +++ b/packages/@office-iss/react-native-win32/src/Libraries/Components/Touchable/TouchableWin32.tsx @@ -181,14 +181,14 @@ const LONG_PRESS_ALLOWED_MOVEMENT = 10; * (that use internal state to conditionally calculate styles) */ export class TouchableWin32 extends React.Component { - private readonly _longPressDelayTimeout: number; - private readonly _touchableDelayTimeout: number; - private readonly _pressOutDelayTimeout: number; - private readonly _pressInLocation: IPressInLocation; - private readonly _touchState: IState; - private readonly _responderID: number; - private readonly _positionOnActivate: IPosition; - private readonly _dimensionsOnActivate: IDimensions; + private _longPressDelayTimeout: number; + private _touchableDelayTimeout: number; + private _pressOutDelayTimeout: number; + private _pressInLocation: IPressInLocation; + private _touchState: IState; + private _responderID: number; + private _positionOnActivate: IPosition; + private _dimensionsOnActivate: IDimensions; private readonly _internalRef: React.RefObject From e959d1312ebfc5d74653b51312ce892a0e63b428 Mon Sep 17 00:00:00 2001 From: Chiara Mooney <34109996+chiaramooney@users.noreply.github.com> Date: Thu, 28 Apr 2022 11:43:52 -0700 Subject: [PATCH 5/7] Remove Unneeded Change --- .../src/Libraries/Components/View/Tests/ViewWin32Test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/@office-iss/react-native-win32/src/Libraries/Components/View/Tests/ViewWin32Test.tsx b/packages/@office-iss/react-native-win32/src/Libraries/Components/View/Tests/ViewWin32Test.tsx index a55f3f17bcc..7fe777f1df3 100644 --- a/packages/@office-iss/react-native-win32/src/Libraries/Components/View/Tests/ViewWin32Test.tsx +++ b/packages/@office-iss/react-native-win32/src/Libraries/Components/View/Tests/ViewWin32Test.tsx @@ -30,7 +30,7 @@ interface IFocusableComponentState { } class FocusMoverTestComponent extends React.Component<{}, IFocusableComponentState> { - private readonly _focusTarget: ViewWin32 = null; + private _focusTarget: ViewWin32 = null; private readonly _labeledBy: React.RefObject; public constructor(props) { From 5beda8ea6f7bc0a6f3d32493c482af65ff8e0e94 Mon Sep 17 00:00:00 2001 From: Chiara Mooney <34109996+chiaramooney@users.noreply.github.com> Date: Thu, 28 Apr 2022 12:12:22 -0700 Subject: [PATCH 6/7] Fix Lint --- .../Libraries/Components/View/View.windows.js | 42 +++++++++++-------- 1 file changed, 24 insertions(+), 18 deletions(-) diff --git a/vnext/src/Libraries/Components/View/View.windows.js b/vnext/src/Libraries/Components/View/View.windows.js index 42e4396eb60..6f0fafb043d 100644 --- a/vnext/src/Libraries/Components/View/View.windows.js +++ b/vnext/src/Libraries/Components/View/View.windows.js @@ -75,23 +75,25 @@ 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] + // [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 @@ -113,7 +115,11 @@ const childrenWithImportantForAccessibility = children => { onKeyUp={_keyUp} onKeyUpCapture={_keyUpCapture} // [Windows - children={props.importantForAccessibility == 'no-hide-descendants' ? childrenWithImportantForAccessibility(props.children) : props.children} + children={ + props.importantForAccessibility == 'no-hide-descendants' + ? childrenWithImportantForAccessibility(props.children) + : props.children + } // Windows] /> ); From 0651bd23cd4313b2fe1e71ca3a79deb2d9a84ea1 Mon Sep 17 00:00:00 2001 From: Chiara Mooney <34109996+chiaramooney@users.noreply.github.com> Date: Thu, 28 Apr 2022 15:40:36 -0700 Subject: [PATCH 7/7] Cover Touchables --- .../src/Libraries/Components/View/View.win32.js | 7 ++++++- vnext/src/Libraries/Components/View/View.windows.js | 7 ++++++- 2 files changed, 12 insertions(+), 2 deletions(-) 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 6f0fafb043d..4b083e003c1 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 @@ -115,8 +115,13 @@ const View: React.AbstractComponent< onKeyUp={_keyUp} onKeyUpCapture={_keyUpCapture} // [Windows + accessible={ + props.importantForAccessibility === 'no-hide-descendants' + ? false + : props.accessible + } children={ - props.importantForAccessibility == 'no-hide-descendants' + props.importantForAccessibility === 'no-hide-descendants' ? childrenWithImportantForAccessibility(props.children) : props.children } diff --git a/vnext/src/Libraries/Components/View/View.windows.js b/vnext/src/Libraries/Components/View/View.windows.js index 6f0fafb043d..4b083e003c1 100644 --- a/vnext/src/Libraries/Components/View/View.windows.js +++ b/vnext/src/Libraries/Components/View/View.windows.js @@ -115,8 +115,13 @@ const View: React.AbstractComponent< onKeyUp={_keyUp} onKeyUpCapture={_keyUpCapture} // [Windows + accessible={ + props.importantForAccessibility === 'no-hide-descendants' + ? false + : props.accessible + } children={ - props.importantForAccessibility == 'no-hide-descendants' + props.importantForAccessibility === 'no-hide-descendants' ? childrenWithImportantForAccessibility(props.children) : props.children }