From 3cfa7ae69847cc3b687930346016b248f2427864 Mon Sep 17 00:00:00 2001 From: Ziqi Chen <ziqichen@fb.com> Date: Mon, 16 Jul 2018 19:01:27 -0700 Subject: [PATCH] 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 --- Libraries/Components/View/ViewAccessibility.js | 7 +++++++ Libraries/Components/View/ViewPropTypes.js | 8 +++++++- 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/Libraries/Components/View/ViewAccessibility.js b/Libraries/Components/View/ViewAccessibility.js index 66988382a205c1..420c3c10790da6 100644 --- a/Libraries/Components/View/ViewAccessibility.js +++ b/Libraries/Components/View/ViewAccessibility.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'], }; diff --git a/Libraries/Components/View/ViewPropTypes.js b/Libraries/Components/View/ViewPropTypes.js index 73a39cf255fcbf..1e0f328d99ad14 100644 --- a/Libraries/Components/View/ViewPropTypes.js +++ b/Libraries/Components/View/ViewPropTypes.js @@ -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.