Permalink
Browse files

Added in Prop for CurrentViewState

Summary:
Added in a prop for CurrentViewState that is used to set the state of the current view for both accessibility and regular view settings..

Ex:
AccessibilityRole = "button"
CurrentViewState = ['selected']

This will trigger talk back/voiceover to announce both the role and the state.

Unlike Accessibility Role, Accessibility States can take on more than one form, and are passed in an array.
Ex: AccessibilityState = ['selected', 'disabled']

Currently, two options are available: selected and disabled

Reviewed By: PeteTheHeat

Differential Revision: D8837848

fbshipit-source-id: ca30c950a2aa713813be8577ea4fa9ba9bfc698a
  • Loading branch information...
ziqichen6 authored and facebook-github-bot committed Jul 17, 2018
1 parent d9eeae9 commit 3cfa7ae69847cc3b687930346016b248f2427864
Showing with 14 additions and 1 deletion.
  1. +7 −0 Libraries/Components/View/ViewAccessibility.js
  2. +7 −1 Libraries/Components/View/ViewPropTypes.js
@@ -50,6 +50,12 @@ export type AccessibilityRole =
| 'adjustable'
| 'imagebutton';
export type CurrentViewState = 'selected' | 'disabled';
export type CurrentViewStates =
| CurrentViewState
| $ReadOnlyArray<CurrentViewState>;
module.exports = {
AccessibilityTraits: [
'none',
@@ -87,4 +93,5 @@ module.exports = {
'adjustable',
'imagebutton',
],
CurrentViewStates: ['selected', 'disabled'],
};
@@ -21,12 +21,14 @@ const {
AccessibilityComponentTypes,
AccessibilityTraits,
AccessibilityRoles,
CurrentViewStates,
} = require('ViewAccessibility');
import type {
AccessibilityComponentType,
AccessibilityTrait,
AccessibilityRole,
CurrentViewState,
} from 'ViewAccessibility';
import type {EdgeInsetsProp} from 'EdgeInsetsPropType';
import type {TVViewProps} from 'TVViewPropTypes';
@@ -92,6 +94,7 @@ export type ViewProps = $ReadOnly<{|
accessibilityIgnoresInvertColors?: boolean,
accessibilityTraits?: AccessibilityTrait | Array<AccessibilityTrait>,
accessibilityRole?: AccessibilityRole,
currentViewStates?: Array<CurrentViewState>,
accessibilityViewIsModal?: boolean,
accessibilityElementsHidden?: boolean,
children?: ?React.Node,
@@ -144,10 +147,13 @@ module.exports = {
/**
* Indicates to accessibility services to treat UI component like a
* native one. Merging accessibilityComponentType and accessibilityTraits.
*/
accessibilityRole: PropTypes.oneOf(AccessibilityRoles),
/**
* Indicates to accessibility services that UI Component is in a specific State.
*/
currentViewStates: PropTypes.arrayOf(PropTypes.oneOf(CurrentViewStates)),
/**
* Indicates to accessibility services whether the user should be notified
* when this view changes. Works for Android API >= 19 only.

0 comments on commit 3cfa7ae

Please sign in to comment.