Skip to content

Commit 17c6567

Browse files
RamyaSenkerictraut
authored andcommitted
Making gesture views accessibile (#196)
* Makign Gesture view accessibility property to true * Exposing accessibility property in gesture view * Making gesture Views accessibile. Expose the accessibility props in gesture views. Also make gesture views accessible by default as it generally always has actions that can be perfomed on them by the users. and hence needs to b exposed to screen readers as well * Removing gesture dist file * Updating documentation
1 parent 4362ffb commit 17c6567

File tree

7 files changed

+39
-4
lines changed

7 files changed

+39
-4
lines changed

docs/docs/accessibility.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ ReactXP exposes a common way to implement accessibility features across platform
1111

1212
A screen reader is an assistive technology available for visually-impaired users. It allows users to navigate through an application by focusing actionable components and announcing the purpose of those components.
1313

14-
ReactXP components [View](components/view), [Button](components/button), and [TextInput](components/textinput) implement a common set of accessibility-related props described below.
14+
ReactXP components [View](components/view), [Button](components/button), [GestureView](components/gestureview) and [TextInput](components/textinput) implement a common set of accessibility-related props described below.
1515

1616
Additional [Accessibility APIs](apis/accessibility) are provided for programmatically invoking the screen reader to announce events.
1717

docs/docs/components/button.md

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ In addition to the [common accessibility props](/reactxp/docs/accessibility.html
1717
``` javascript
1818
// Alternate text to display if the image cannot be loaded
1919
// or by screen readers
20-
accessibilityHidden: boolean = false;
20+
accessibilityLabel: boolean = false;
2121

2222
// Hide the component from screen readers?
2323
accessibilityHidden: boolean = false;
@@ -28,6 +28,9 @@ accessibilityTraits: AccessibilityTrait | AccessibilityTrait[] = undefined;
2828
// Region for accessibility mechanisms
2929
accessibilityLiveRegion: AccessibilityLiveRegion = undefined; // Android and web only
3030

31+
// Expose the element and/or its children as accessible to Screen readers
32+
importantForAccessibility?: ImportantForAccessibility = ImportantForAccessibility.yes;
33+
3134
// Delay in ms before onLongPress is called
3235
delayLongPress: number = 1000;
3336

docs/docs/components/gestureview.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,15 @@ panPixelThreshold: number = undefined;
3838
// Something else wants to become responder. Should this view release the responder?
3939
// Setting true allows release
4040
releaseOnRequest: boolean = false;
41+
42+
// Alternate text for screen readers.
43+
accessibilityLabel: string = undefined;
44+
45+
// Traits used to hint screen readers, etc.
46+
accessibilityTraits: AccessibilityTrait | AccessibilityTrait[] = undefined;
47+
48+
// Expose the element and/or its children as accessible to Screen readers
49+
importantForAccessibility?: ImportantForAccessibility = ImportantForAccessibility.Yes;
4150
```
4251

4352
## Styles

docs/docs/components/view.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,9 @@ accessibilityTraits: AccessibilityTrait | AccessibilityTrait[] = undefined;
2626
// Region for accessibility mechanisms
2727
accessibilityLiveRegion: AccessibilityLiveRegion = undefined; // Android and web only
2828

29+
// Expose the element and/or its children as accessible to Screen readers
30+
importantForAccessibility?: ImportantForAccessibility = Auto;
31+
2932
// Animation of children
3033
// - Every child must have a `key`.
3134
// - String refs aren't supported on children. Only callback refs are.

src/common/Types.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -673,7 +673,7 @@ export enum PreferredPanGesture {
673673
Vertical
674674
}
675675

676-
export interface GestureViewProps extends CommonStyledProps<ViewStyleRuleSet> {
676+
export interface GestureViewProps extends CommonStyledProps<ViewStyleRuleSet>, CommonAccessibilityProps {
677677
// Gestures and attributes that apply only to touch inputs
678678
onPinchZoom?: (gestureState: MultiTouchGestureState) => void;
679679
onRotate?: (gestureState: MultiTouchGestureState) => void;

src/native-common/GestureView.tsx

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ import assert = require('assert');
1313
import React = require('react');
1414
import RN = require('react-native');
1515

16+
import AccessibilityUtil from './AccessibilityUtil';
17+
1618
import Types = require('../common/Types');
1719
import UserInterface from './UserInterface';
1820
import ViewBase from './ViewBase';
@@ -33,6 +35,8 @@ const _tapPixelThreshold = 4;
3335
const _doubleTapDurationThreshold = 250;
3436
const _doubleTapPixelThreshold = 20;
3537

38+
const _defaultImportantForAccessibility = Types.ImportantForAccessibility.Yes;
39+
3640
export abstract class GestureView extends ViewBase<Types.GestureViewProps, {}> {
3741
private _panResponder: RN.PanResponder;
3842
private _doubleTapTimer: any = null;
@@ -509,12 +513,21 @@ export abstract class GestureView extends ViewBase<Types.GestureViewProps, {}> {
509513
}
510514

511515
render() {
516+
const importantForAccessibility = AccessibilityUtil.importantForAccessibilityToString(this.props.importantForAccessibility,
517+
_defaultImportantForAccessibility);
518+
const accessibilityTrait = AccessibilityUtil.accessibilityTraitToString(this.props.accessibilityTraits);
519+
const accessibilityComponentType = AccessibilityUtil.accessibilityComponentTypeToString(this.props.accessibilityTraits);
520+
512521
return (
513522
<RN.View
514523
style={ this._getStyles(this.props) }
524+
importantForAccessibility={ importantForAccessibility }
525+
accessibilityTraits={ accessibilityTrait }
526+
accessibilityComponentType={ accessibilityComponentType }
527+
accessibilityLabel={ this.props.accessibilityLabel }
515528
{ ...this._panResponder.panHandlers }
516529
>
517-
{ this.props.children }
530+
{this.props.children}
518531
</RN.View>
519532
);
520533
}

src/web/GestureView.tsx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
import _ = require('./utils/lodashMini');
1212
import React = require('react');
1313

14+
import AccessibilityUtil from './AccessibilityUtil';
1415
import MouseResponder, { MouseResponderSubscription } from './utils/MouseResponder';
1516
import RX = require('../common/Interfaces');
1617
import Styles from './Styles';
@@ -101,12 +102,18 @@ export class GestureView extends RX.ViewBase<Types.GestureViewProps, {}> {
101102
}
102103

103104
render() {
105+
const ariaRole = AccessibilityUtil.accessibilityTraitToString(this.props.accessibilityTraits);
106+
const isAriaHidden = AccessibilityUtil.isHidden(this.props.importantForAccessibility);
107+
104108
return (
105109
<div
106110
style={ this._getStyles() }
107111
ref={ this._setContainerRef }
108112
onClick={ this._onClick }
109113
onWheel={ this._onWheel }
114+
role={ ariaRole }
115+
aria-label={ this.props.accessibilityLabel }
116+
aria-hidden={ isAriaHidden }
110117
>
111118
{ this.props.children }
112119
</div>

0 commit comments

Comments
 (0)