Skip to content

Commit

Permalink
Making gesture views accessibile (microsoft#196)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
RamyaSenk authored and berickson1 committed Oct 22, 2018
1 parent 0a27552 commit fea6691
Show file tree
Hide file tree
Showing 7 changed files with 39 additions and 4 deletions.
2 changes: 1 addition & 1 deletion docs/docs/accessibility.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ ReactXP exposes a common way to implement accessibility features across platform

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.

ReactXP components [View](components/view), [Button](components/button), and [TextInput](components/textinput) implement a common set of accessibility-related props described below.
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.

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

Expand Down
5 changes: 4 additions & 1 deletion docs/docs/components/button.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ In addition to the [common accessibility props](/reactxp/docs/accessibility.html
``` javascript
// Alternate text to display if the image cannot be loaded
// or by screen readers
accessibilityHidden: boolean = false;
accessibilityLabel: boolean = false;

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

// Expose the element and/or its children as accessible to Screen readers
importantForAccessibility?: ImportantForAccessibility = ImportantForAccessibility.yes;

// Delay in ms before onLongPress is called
delayLongPress: number = 1000;

Expand Down
9 changes: 9 additions & 0 deletions docs/docs/components/gestureview.md
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,15 @@ panPixelThreshold: number = undefined;
// Something else wants to become responder. Should this view release the responder?
// Setting true allows release
releaseOnRequest: boolean = false;

// Alternate text for screen readers.
accessibilityLabel: string = undefined;

// Traits used to hint screen readers, etc.
accessibilityTraits: AccessibilityTrait | AccessibilityTrait[] = undefined;

// Expose the element and/or its children as accessible to Screen readers
importantForAccessibility?: ImportantForAccessibility = ImportantForAccessibility.Yes;
```

## Styles
Expand Down
3 changes: 3 additions & 0 deletions docs/docs/components/view.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,9 @@ accessibilityTraits: AccessibilityTrait | AccessibilityTrait[] = undefined;
// Region for accessibility mechanisms
accessibilityLiveRegion: AccessibilityLiveRegion = undefined; // Android and web only

// Expose the element and/or its children as accessible to Screen readers
importantForAccessibility?: ImportantForAccessibility = Auto;

// Animation of children
// - Every child must have a `key`.
// - String refs aren't supported on children. Only callback refs are.
Expand Down
2 changes: 1 addition & 1 deletion src/common/Types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -673,7 +673,7 @@ export enum PreferredPanGesture {
Vertical
}

export interface GestureViewProps extends CommonStyledProps<ViewStyleRuleSet> {
export interface GestureViewProps extends CommonStyledProps<ViewStyleRuleSet>, CommonAccessibilityProps {
// Gestures and attributes that apply only to touch inputs
onPinchZoom?: (gestureState: MultiTouchGestureState) => void;
onRotate?: (gestureState: MultiTouchGestureState) => void;
Expand Down
15 changes: 14 additions & 1 deletion src/native-common/GestureView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ import assert = require('assert');
import React = require('react');
import RN = require('react-native');

import AccessibilityUtil from './AccessibilityUtil';

import Types = require('../common/Types');
import UserInterface from './UserInterface';
import ViewBase from './ViewBase';
Expand All @@ -33,6 +35,8 @@ const _tapPixelThreshold = 4;
const _doubleTapDurationThreshold = 250;
const _doubleTapPixelThreshold = 20;

const _defaultImportantForAccessibility = Types.ImportantForAccessibility.Yes;

export abstract class GestureView extends ViewBase<Types.GestureViewProps, {}> {
private _panResponder: RN.PanResponder;
private _doubleTapTimer: any = null;
Expand Down Expand Up @@ -509,12 +513,21 @@ export abstract class GestureView extends ViewBase<Types.GestureViewProps, {}> {
}

render() {
const importantForAccessibility = AccessibilityUtil.importantForAccessibilityToString(this.props.importantForAccessibility,
_defaultImportantForAccessibility);
const accessibilityTrait = AccessibilityUtil.accessibilityTraitToString(this.props.accessibilityTraits);
const accessibilityComponentType = AccessibilityUtil.accessibilityComponentTypeToString(this.props.accessibilityTraits);

return (
<RN.View
style={ this._getStyles(this.props) }
importantForAccessibility={ importantForAccessibility }
accessibilityTraits={ accessibilityTrait }
accessibilityComponentType={ accessibilityComponentType }
accessibilityLabel={ this.props.accessibilityLabel }
{ ...this._panResponder.panHandlers }
>
{ this.props.children }
{this.props.children}
</RN.View>
);
}
Expand Down
7 changes: 7 additions & 0 deletions src/web/GestureView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
import _ = require('./utils/lodashMini');
import React = require('react');

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

render() {
const ariaRole = AccessibilityUtil.accessibilityTraitToString(this.props.accessibilityTraits);
const isAriaHidden = AccessibilityUtil.isHidden(this.props.importantForAccessibility);

return (
<div
style={ this._getStyles() }
ref={ this._setContainerRef }
onClick={ this._onClick }
onWheel={ this._onWheel }
role={ ariaRole }
aria-label={ this.props.accessibilityLabel }
aria-hidden={ isAriaHidden }
>
{ this.props.children }
</div>
Expand Down

0 comments on commit fea6691

Please sign in to comment.