Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
242 changes: 241 additions & 1 deletion packages/react-native/Libraries/Components/View/ViewAccessibility.js
Original file line number Diff line number Diff line change
Expand Up @@ -123,9 +123,38 @@ export type Role =
| 'treegrid'
| 'treeitem';

export type AccessibilityActionName =
/**
* Generated when a screen reader user double taps the component.
*/
| 'activate'
/**
* Generated when a screen reader user increments an adjustable component.
*/
| 'increment'
/**
* Generated when a screen reader user decrements an adjustable component.
*/
| 'decrement'
/**
* Generated when a TalkBack user places accessibility focus on the component and double taps and holds one finger on the screen.
* @platform android
*/
| 'longpress'
/**
* Generated when a VoiceOver user places focus on or inside the component and double taps with two fingers.
* @platform ios
* */
| 'magicTap'
/**
* Generated when a VoiceOver user places focus on or inside the component and performs a two finger scrub gesture (left, right, left).
* @platform ios
* */
| 'escape';

// the info associated with an accessibility action
export type AccessibilityActionInfo = $ReadOnly<{
name: string,
name: AccessibilityActionName | string,
label?: string,
...
}>;
Expand All @@ -136,10 +165,25 @@ export type AccessibilityActionEvent = SyntheticEvent<
>;

export type 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,
...
};
Expand All @@ -165,3 +209,199 @@ export type AccessibilityValue = $ReadOnly<{
*/
text?: Stringish,
}>;

export type AccessibilityPropsAndroid = $ReadOnly<{
/**
* Identifies the element that labels the element it is applied to. When the assistive technology focuses on the component with this props,
* the text is read aloud. The value should should match the nativeID of the related element.
*
* @platform android
*/
accessibilityLabelledBy?: ?string | ?Array<string>,

/**
* Identifies the element that labels the element it is applied to. When the assistive technology focuses on the component with this props,
* the text is read aloud. The value should should match the nativeID of the related element.
*
* @platform android
*/
'aria-labelledby'?: ?string,

/**
* Indicates to accessibility services whether the user should be notified
* when this view changes. Works for Android API >= 19 only.
*
* @platform android
*
* See https://reactnative.dev/docs/view#accessibilityliveregion
*/
accessibilityLiveRegion?: ?('none' | 'polite' | 'assertive'),

/**
* Indicates to accessibility services whether the user should be notified
* when this view changes. Works for Android API >= 19 only.
*
* @platform android
*
* See https://reactnative.dev/docs/view#accessibilityliveregion
*/
'aria-live'?: ?('polite' | 'assertive' | 'off'),

/**
* Controls how view is important for accessibility which is if it
* fires accessibility events and if it is reported to accessibility services
* that query the screen. Works for Android only.
*
* @platform android
*
* See https://reactnative.dev/docs/view#importantforaccessibility
*/
importantForAccessibility?: ?('auto' | 'yes' | 'no' | 'no-hide-descendants'),
}>;

export type AccessibilityPropsIOS = $ReadOnly<{
/**
* Prevents view from being inverted if set to true and color inversion is turned on.
*
* @platform ios
*/
accessibilityIgnoresInvertColors?: ?boolean,

/**
* A value indicating whether VoiceOver should ignore the elements
* within views that are siblings of the receiver.
* Default is `false`.
*
* @platform ios
*
* See https://reactnative.dev/docs/view#accessibilityviewismodal
*/
accessibilityViewIsModal?: ?boolean,

/**
* @platform ios
*
* See https://reactnative.dev/docs/view#accessibilityshowslargecontentviewer
*/
accessibilityShowsLargeContentViewer?: ?boolean,

/**
* @platform ios
*
* See https://reactnative.dev/docs/view#accessibilitylargecontenttitle
*/
accessibilityLargeContentTitle?: ?string,

/**
* The aria-modal attribute indicates content contained within a modal with aria-modal="true"
* should be accessible to the user.
* Default is `false`.
*
* @platform ios
*/
'aria-modal'?: ?boolean,

/**
* A value indicating whether the accessibility elements contained within
* this accessibility element are hidden.
*
* @platform ios
*
* See https://reactnative.dev/docs/view#accessibilityElementsHidden
*/
accessibilityElementsHidden?: ?boolean,

/**
* Indicates to the accessibility services that the UI component is in
* a specific language. The provided string should be formatted following
* the BCP 47 specification (https://www.rfc-editor.org/info/bcp47).
*
* @platform ios
*/
accessibilityLanguage?: ?Stringish,
}>;

export type AccessibilityProps = $ReadOnly<{
...AccessibilityPropsAndroid,
...AccessibilityPropsIOS,
/**
* When `true`, indicates that the view is an accessibility element.
* By default, all the touchable elements are accessible.
*
* See https://reactnative.dev/docs/view#accessible
*/
accessible?: ?boolean,

/**
* Overrides the text that's read by the screen reader when the user interacts
* with the element. By default, the label is constructed by traversing all
* the children and accumulating all the `Text` nodes separated by space.
*
* See https://reactnative.dev/docs/view#accessibilitylabel
*/
accessibilityLabel?: ?Stringish,

/**
* 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.
*
*
* See https://reactnative.dev/docs/view#accessibilityHint
*/
accessibilityHint?: ?Stringish,

/**
* Alias for accessibilityLabel https://reactnative.dev/docs/view#accessibilitylabel
* https://github.com/facebook/react-native/issues/34424
*/
'aria-label'?: ?Stringish,

/**
* Indicates to accessibility services to treat UI component like a specific role.
*/
accessibilityRole?: ?AccessibilityRole,

/**
* Alias for accessibilityRole
*/
role?: ?Role,

/**
* Indicates to accessibility services that UI Component is in a specific State.
*/
accessibilityState?: ?AccessibilityState,
accessibilityValue?: ?AccessibilityValue,

/**
* alias for accessibilityState
* It represents textual description of a component's value, or for range-based components, such as sliders and progress bars.
*/
'aria-valuemax'?: ?AccessibilityValue['max'],
'aria-valuemin'?: ?AccessibilityValue['min'],
'aria-valuenow'?: ?AccessibilityValue['now'],
'aria-valuetext'?: ?AccessibilityValue['text'],

/**
* Provides an array of custom actions available for accessibility.
*
*/
accessibilityActions?: ?$ReadOnlyArray<AccessibilityActionInfo>,

/**
* alias for accessibilityState
*
* see https://reactnative.dev/docs/accessibility#accessibilitystate
*/
'aria-busy'?: ?boolean,
'aria-checked'?: ?boolean | 'mixed',
'aria-disabled'?: ?boolean,
'aria-expanded'?: ?boolean,
'aria-selected'?: ?boolean,
/** A value indicating whether the accessibility elements contained within
* this accessibility element are hidden.
*
* See https://reactnative.dev/docs/view#aria-hidden
*/
'aria-hidden'?: ?boolean,
}>;
Loading