From ef28e2e9d30f4d861955c8937610f66b707c0e42 Mon Sep 17 00:00:00 2001 From: Mayank Sunil Pagar Date: Thu, 1 Sep 2022 12:55:30 +0530 Subject: [PATCH 1/6] feat: added aria-live as a alias for accessibility-live-region --- Libraries/Components/View/View.js | 14 +++++++++++++- Libraries/Components/View/ViewPropTypes.js | 10 ++++++++++ 2 files changed, 23 insertions(+), 1 deletion(-) diff --git a/Libraries/Components/View/View.js b/Libraries/Components/View/View.js index 7822e8184f21..364ee67801be 100644 --- a/Libraries/Components/View/View.js +++ b/Libraries/Components/View/View.js @@ -27,10 +27,22 @@ const View: React.AbstractComponent< ViewProps, React.ElementRef, > = React.forwardRef( - ({tabIndex, focusable, ...otherProps}: ViewProps, forwardedRef) => { + ( + { + accessibilityLiveRegion, + 'aria-live': ariaLive, + tabIndex, + focusable, + ...otherProps + }: ViewProps, + forwardedRef, + ) => { return ( = 19 only. + * + * @platform android + * + * See https://reactnative.dev/docs/view#accessibilityliveregion + */ + 'aria-live'?: ?('none' | 'polite' | 'assertive' | 'off'), + /** * Controls how view is important for accessibility which is if it * fires accessibility events and if it is reported to accessibility services From 06434f8516f73e79a6f80bfa432afc31e7c76e04 Mon Sep 17 00:00:00 2001 From: Mayank Sunil Pagar Date: Thu, 1 Sep 2022 13:19:00 +0530 Subject: [PATCH 2/6] feat: added aria-live as a alias for accessibility-live-region in Pressable --- Libraries/Components/Pressable/Pressable.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/Libraries/Components/Pressable/Pressable.js b/Libraries/Components/Pressable/Pressable.js index aab4f21d33ed..1d230d43d7eb 100644 --- a/Libraries/Components/Pressable/Pressable.js +++ b/Libraries/Components/Pressable/Pressable.js @@ -52,6 +52,7 @@ type Props = $ReadOnly<{| accessibilityValue?: ?AccessibilityValue, accessibilityViewIsModal?: ?boolean, accessible?: ?boolean, + 'aria-live'?: ?('none' | 'polite' | 'assertive' | 'off'), focusable?: ?boolean, importantForAccessibility?: ?('auto' | 'yes' | 'no' | 'no-hide-descendants'), onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed, @@ -175,6 +176,7 @@ type Props = $ReadOnly<{| function Pressable(props: Props, forwardedRef): React.Node { const { accessible, + 'aria-live': ariaLive, android_disableSound, android_ripple, cancelable, @@ -210,10 +212,14 @@ function Pressable(props: Props, forwardedRef): React.Node { ? {...props.accessibilityState, disabled} : props.accessibilityState; + const accessibilityLiveRegion = + ariaLive === 'off' ? 'none' : ariaLive ?? props.accessibilityLiveRegion; + const restPropsWithDefaults: React.ElementConfig = { ...restProps, ...android_rippleConfig?.viewProps, accessible: accessible !== false, + accessibilityLiveRegion, accessibilityState, focusable: focusable !== false, hitSlop, From 36523f289cdab38fd654a22ae662b0f5a41f81be Mon Sep 17 00:00:00 2001 From: Mayank Sunil Pagar Date: Thu, 1 Sep 2022 14:53:24 +0530 Subject: [PATCH 3/6] feat: added aria-live as a alias for accessibility-live-region in touchable --- Libraries/Components/Touchable/TouchableBounce.js | 7 +++++-- Libraries/Components/Touchable/TouchableHighlight.js | 7 +++++-- Libraries/Components/Touchable/TouchableNativeFeedback.js | 7 ++++++- Libraries/Components/Touchable/TouchableOpacity.js | 7 ++++++- .../Components/Touchable/TouchableWithoutFeedback.js | 8 +++++++- 5 files changed, 29 insertions(+), 7 deletions(-) diff --git a/Libraries/Components/Touchable/TouchableBounce.js b/Libraries/Components/Touchable/TouchableBounce.js index f77ab0f5738f..829c55def68c 100644 --- a/Libraries/Components/Touchable/TouchableBounce.js +++ b/Libraries/Components/Touchable/TouchableBounce.js @@ -130,7 +130,10 @@ class TouchableBounce extends React.Component { // adopting `Pressability`, so preserve that behavior. const {onBlur, onFocus, ...eventHandlersWithoutBlurAndFocus} = this.state.pressability.getEventHandlers(); - + const accessibilityLiveRegion = + this.props['aria-live'] === 'off' + ? 'none' + : this.props['aria-live'] ?? this.props.accessibilityLiveRegion; return ( { onAccessibilityAction={this.props.onAccessibilityAction} accessibilityValue={this.props.accessibilityValue} importantForAccessibility={this.props.importantForAccessibility} - accessibilityLiveRegion={this.props.accessibilityLiveRegion} + accessibilityLiveRegion={accessibilityLiveRegion} accessibilityViewIsModal={this.props.accessibilityViewIsModal} accessibilityElementsHidden={this.props.accessibilityElementsHidden} nativeID={this.props.nativeID} diff --git a/Libraries/Components/Touchable/TouchableHighlight.js b/Libraries/Components/Touchable/TouchableHighlight.js index d41513b189b5..bd2df6d40d54 100644 --- a/Libraries/Components/Touchable/TouchableHighlight.js +++ b/Libraries/Components/Touchable/TouchableHighlight.js @@ -290,7 +290,10 @@ class TouchableHighlight extends React.Component { disabled: this.props.disabled, } : this.props.accessibilityState; - + const accessibilityLiveRegion = + this.props['aria-live'] === 'off' + ? 'none' + : this.props['aria-live'] ?? this.props.accessibilityLiveRegion; return ( { accessibilityActions={this.props.accessibilityActions} onAccessibilityAction={this.props.onAccessibilityAction} importantForAccessibility={this.props.importantForAccessibility} - accessibilityLiveRegion={this.props.accessibilityLiveRegion} + accessibilityLiveRegion={accessibilityLiveRegion} accessibilityViewIsModal={this.props.accessibilityViewIsModal} accessibilityElementsHidden={this.props.accessibilityElementsHidden} style={StyleSheet.compose( diff --git a/Libraries/Components/Touchable/TouchableNativeFeedback.js b/Libraries/Components/Touchable/TouchableNativeFeedback.js index 8fff2f302397..a7eabece9c98 100644 --- a/Libraries/Components/Touchable/TouchableNativeFeedback.js +++ b/Libraries/Components/Touchable/TouchableNativeFeedback.js @@ -259,6 +259,11 @@ class TouchableNativeFeedback extends React.Component { } : this.props.accessibilityState; + const accessibilityLiveRegion = + this.props['aria-live'] === 'off' + ? 'none' + : this.props['aria-live'] ?? this.props.accessibilityLiveRegion; + return React.cloneElement( element, { @@ -279,7 +284,7 @@ class TouchableNativeFeedback extends React.Component { onAccessibilityAction: this.props.onAccessibilityAction, accessibilityValue: this.props.accessibilityValue, importantForAccessibility: this.props.importantForAccessibility, - accessibilityLiveRegion: this.props.accessibilityLiveRegion, + accessibilityLiveRegion: accessibilityLiveRegion, accessibilityViewIsModal: this.props.accessibilityViewIsModal, accessibilityElementsHidden: this.props.accessibilityElementsHidden, hasTVPreferredFocus: this.props.hasTVPreferredFocus, diff --git a/Libraries/Components/Touchable/TouchableOpacity.js b/Libraries/Components/Touchable/TouchableOpacity.js index 67e18c06d54c..46dd64653173 100644 --- a/Libraries/Components/Touchable/TouchableOpacity.js +++ b/Libraries/Components/Touchable/TouchableOpacity.js @@ -220,6 +220,11 @@ class TouchableOpacity extends React.Component { } : this.props.accessibilityState; + const accessibilityLiveRegion = + this.props['aria-live'] === 'off' + ? 'none' + : this.props['aria-live'] ?? this.props.accessibilityLiveRegion; + return ( { onAccessibilityAction={this.props.onAccessibilityAction} accessibilityValue={this.props.accessibilityValue} importantForAccessibility={this.props.importantForAccessibility} - accessibilityLiveRegion={this.props.accessibilityLiveRegion} + accessibilityLiveRegion={accessibilityLiveRegion} accessibilityViewIsModal={this.props.accessibilityViewIsModal} accessibilityElementsHidden={this.props.accessibilityElementsHidden} style={[this.props.style, {opacity: this.state.anim}]} diff --git a/Libraries/Components/Touchable/TouchableWithoutFeedback.js b/Libraries/Components/Touchable/TouchableWithoutFeedback.js index 2b3bd4b930e1..d060d5f4b0b9 100755 --- a/Libraries/Components/Touchable/TouchableWithoutFeedback.js +++ b/Libraries/Components/Touchable/TouchableWithoutFeedback.js @@ -42,6 +42,7 @@ type Props = $ReadOnly<{| accessibilityValue?: ?AccessibilityValue, accessibilityViewIsModal?: ?boolean, accessible?: ?boolean, + 'aria-live'?: ?('none' | 'polite' | 'assertive' | 'off'), children?: ?React.Node, delayLongPress?: ?number, delayPressIn?: ?number, @@ -76,7 +77,6 @@ const PASSTHROUGH_PROPS = [ 'accessibilityLanguage', 'accessibilityIgnoresInvertColors', 'accessibilityLabel', - 'accessibilityLiveRegion', 'accessibilityRole', 'accessibilityValue', 'accessibilityViewIsModal', @@ -98,6 +98,8 @@ class TouchableWithoutFeedback extends React.Component { render(): React.Node { const element = React.Children.only(this.props.children); const children = [element.props.children]; + const ariaLive = this.props['aria-live']; + if (__DEV__) { if (element.type === View) { children.push( @@ -123,6 +125,10 @@ class TouchableWithoutFeedback extends React.Component { : this.props.accessibilityState, focusable: this.props.focusable !== false && this.props.onPress !== undefined, + accessibilityLiveRegion: + ariaLive === 'off' + ? 'none' + : ariaLive ?? this.props.accessibilityLiveRegion, }; for (const prop of PASSTHROUGH_PROPS) { if (this.props[prop] !== undefined) { From e99295ca92d39f9564ca5e1a63a04db36c7c849e Mon Sep 17 00:00:00 2001 From: Mayank Sunil Pagar Date: Fri, 2 Sep 2022 11:35:30 +0530 Subject: [PATCH 4/6] fix: removed none from aria-live typings --- Libraries/Components/Pressable/Pressable.js | 2 +- Libraries/Components/Touchable/TouchableWithoutFeedback.js | 2 +- Libraries/Components/View/ViewPropTypes.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/Libraries/Components/Pressable/Pressable.js b/Libraries/Components/Pressable/Pressable.js index 1d230d43d7eb..38ebea6baec2 100644 --- a/Libraries/Components/Pressable/Pressable.js +++ b/Libraries/Components/Pressable/Pressable.js @@ -52,7 +52,7 @@ type Props = $ReadOnly<{| accessibilityValue?: ?AccessibilityValue, accessibilityViewIsModal?: ?boolean, accessible?: ?boolean, - 'aria-live'?: ?('none' | 'polite' | 'assertive' | 'off'), + 'aria-live'?: ?('polite' | 'assertive' | 'off'), focusable?: ?boolean, importantForAccessibility?: ?('auto' | 'yes' | 'no' | 'no-hide-descendants'), onAccessibilityAction?: ?(event: AccessibilityActionEvent) => mixed, diff --git a/Libraries/Components/Touchable/TouchableWithoutFeedback.js b/Libraries/Components/Touchable/TouchableWithoutFeedback.js index d060d5f4b0b9..8acad4849670 100755 --- a/Libraries/Components/Touchable/TouchableWithoutFeedback.js +++ b/Libraries/Components/Touchable/TouchableWithoutFeedback.js @@ -42,7 +42,7 @@ type Props = $ReadOnly<{| accessibilityValue?: ?AccessibilityValue, accessibilityViewIsModal?: ?boolean, accessible?: ?boolean, - 'aria-live'?: ?('none' | 'polite' | 'assertive' | 'off'), + 'aria-live'?: ?('polite' | 'assertive' | 'off'), children?: ?React.Node, delayLongPress?: ?number, delayPressIn?: ?number, diff --git a/Libraries/Components/View/ViewPropTypes.js b/Libraries/Components/View/ViewPropTypes.js index c3af4c1636a5..a06b1205014a 100644 --- a/Libraries/Components/View/ViewPropTypes.js +++ b/Libraries/Components/View/ViewPropTypes.js @@ -300,7 +300,7 @@ type AndroidViewProps = $ReadOnly<{| * * See https://reactnative.dev/docs/view#accessibilityliveregion */ - 'aria-live'?: ?('none' | 'polite' | 'assertive' | 'off'), + 'aria-live'?: ?('polite' | 'assertive' | 'off'), /** * Controls how view is important for accessibility which is if it From d573999901e47281ec0dbcda6284cd254494fdec Mon Sep 17 00:00:00 2001 From: Mayank Sunil Pagar Date: Mon, 5 Sep 2022 19:18:28 +0530 Subject: [PATCH 5/6] fix: code refactored --- Libraries/Components/View/View.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/Libraries/Components/View/View.js b/Libraries/Components/View/View.js index ca222c1ae5be..d75059d6b92a 100644 --- a/Libraries/Components/View/View.js +++ b/Libraries/Components/View/View.js @@ -29,20 +29,20 @@ const View: React.AbstractComponent< React.ElementRef, > = React.forwardRef( ( - { accessibilityLiveRegion, 'aria-live': ariaLive, tabIndex, focusable, - style, pointerEvents, ...otherProps + style, + pointerEvents, + ...otherProps }: ViewProps, - forwardedRef, - , ) => { const flattendStyle = flattenStyle(style); const newPointerEvents = pointerEvents || flattendStyle?.pointerEvents; + return ( Date: Thu, 8 Sep 2022 16:28:34 +0530 Subject: [PATCH 6/6] fix: merge issue --- Libraries/Components/Pressable/Pressable.js | 1 + 1 file changed, 1 insertion(+) diff --git a/Libraries/Components/Pressable/Pressable.js b/Libraries/Components/Pressable/Pressable.js index e9921cd86028..9c41c9948b0b 100644 --- a/Libraries/Components/Pressable/Pressable.js +++ b/Libraries/Components/Pressable/Pressable.js @@ -192,6 +192,7 @@ type Props = $ReadOnly<{| function Pressable(props: Props, forwardedRef): React.Node { const { accessible, + accessibilityState, 'aria-live': ariaLive, android_disableSound, android_ripple,