From 3c784e7f76dca20fe34f67e10d53f5a481ed91ce Mon Sep 17 00:00:00 2001 From: Andy Himberger <3460697+ahimberg@users.noreply.github.com> Date: Fri, 5 Jul 2019 00:48:06 -0700 Subject: [PATCH] [react-native] update/add new accessibility properties (#36636) * add new accessibilitystate and role values * add accessibleState property * Update ver to 0.60, use @depreacted in comments --- types/react-native/index.d.ts | 63 ++++++++++++++++++++++++++++--- types/react-native/test/index.tsx | 1 + 2 files changed, 59 insertions(+), 5 deletions(-) diff --git a/types/react-native/index.d.ts b/types/react-native/index.d.ts index ce2945cfd0..1f439ac28f 100644 --- a/types/react-native/index.d.ts +++ b/types/react-native/index.d.ts @@ -1,4 +1,4 @@ -// Type definitions for react-native 0.57 +// Type definitions for react-native 0.60 // Project: https://github.com/facebook/react-native // Definitions by: Eloy DurĂ¡n // HuHuanming @@ -2033,16 +2033,52 @@ export interface AccessibilityProps extends AccessibilityPropsAndroid, Accessibi accessibilityRole?: AccessibilityRole; /** * Accessibility State tells a person using either VoiceOver on iOS or TalkBack on Android the state of the element currently focused on. + * @deprecated: accessibilityState available in 0.60+ */ - accessibilityStates?: AccessibilityState[]; - + accessibilityStates?: AccessibilityStates[]; + /** + * Accessibility State tells a person using either VoiceOver on iOS or TalkBack on Android the state of the element currently focused on. + */ + accessibilityState?: AccessibilityState; /** * An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not obvious from the accessibility label. */ accessibilityHint?: string; } -export type AccessibilityState = "selected" | "disabled"; +// @deprecated: use AccessibilityState available in 0.60+ +export type AccessibilityStates = + | "disabled" + | "selected" + | "checked" + | "unchecked" + | "busy" + | "expanded" + | "collapsed" + | "hasPopup"; + +export interface AccessibilityState { + /** + * When true, informs accessible tools if the element is disabled + */ + disabled?: boolean; + /** + * When true, informs accessible tools if the element is selected + */ + selected?: boolean; + /** + * For items like Checkboxes and Toggle switches, reports their state to accessible tools + */ + checked?: boolean | "mixed"; + /** + * When present, informs accessible tools if the element is busy + */ + busy?: boolean; + /** + * When present, informs accessible tools the element is expanded or collapsed + */ + expanded?: boolean; +} export type AccessibilityRole = | "none" @@ -2053,9 +2089,26 @@ export type AccessibilityRole = | "keyboardkey" | "text" | "adjustable" + | "imagebutton" | "header" | "summary" - | "imagebutton"; + | "alert" + | "checkbox" + | "combobox" + | "menu" + | "menubar" + | "menuitem" + | "progressbar" + | "radio" + | "radiogroup" + | "scrollbar" + | "spinbutton" + | "switch" + | "tab" + | "tablist" + | "timer" + | "toolbar"; + export interface AccessibilityPropsAndroid { /** diff --git a/types/react-native/test/index.tsx b/types/react-native/test/index.tsx index 44b186322f..ec7b8b93f2 100644 --- a/types/react-native/test/index.tsx +++ b/types/react-native/test/index.tsx @@ -778,6 +778,7 @@ class AccessibilityTest extends React.Component { onAccessibilityTap={() => {}} accessibilityRole="header" accessibilityStates={["selected"]} + accessibilityState={{checked: true}} accessibilityHint="Very importent header" >