Skip to content

Fix missing and incorrect AccessibilityInfo types (#56708) #56708

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
huntie wants to merge 1 commit into from
Closed

Fix missing and incorrect AccessibilityInfo types (#56708) #56708

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
29 changes: 20 additions & 9 deletions packages/react-native/Libraries/Components/AccessibilityInfo/AccessibilityInfo.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,22 @@ import {HostInstance} from '../../../types/public/ReactNativeTypes';
import {EmitterSubscription} from '../../vendor/emitter/EventEmitter';

type AccessibilityChangeEventName =
| 'change' // deprecated, maps to screenReaderChanged
| 'boldTextChanged' // iOS-only Event
| 'grayscaleChanged' // iOS-only Event
| 'invertColorsChanged' // iOS-only Event
/** Android only */
| 'accessibilityServiceChanged'
/** iOS only */
| 'boldTextChanged'
/** @deprecated Maps to 'screenReaderChanged' */
| 'change'
/** iOS only */
| 'darkerSystemColorsChanged'
| 'grayscaleChanged'
/** Android only */
| 'highTextContrastChanged'
| 'invertColorsChanged'
| 'reduceMotionChanged'
| 'highTextContrastChanged' // Android-only Event
| 'darkerSystemColorsChanged' // iOS-only Event
| 'screenReaderChanged'
| 'reduceTransparencyChanged'; // iOS-only Event
/** iOS only */
| 'reduceTransparencyChanged'
| 'screenReaderChanged';

type AccessibilityChangeEvent = boolean;

Expand All @@ -38,7 +45,11 @@ type AccessibilityAnnouncementFinishedEventHandler = (
event: AccessibilityAnnouncementFinishedEvent,
) => void;

type AccessibilityEventTypes = 'click' | 'focus' | 'viewHoverEnter';
type AccessibilityEventTypes =
| 'click'
| 'focus'
| 'viewHoverEnter'
| 'windowStateChange';

/**
* @see https://reactnative.dev/docs/accessibilityinfo
Expand Down
18 changes: 9 additions & 9 deletions packages/react-native/Libraries/Components/AccessibilityInfo/AccessibilityInfo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,16 +28,16 @@ type AccessibilityEventDefinitionsAndroid = {
type AccessibilityEventDefinitionsIOS = {
announcementFinished: [{announcement: string, success: boolean}],
boldTextChanged: [boolean],
grayscaleChanged: [boolean],
invertColorsChanged: [boolean],
reduceTransparencyChanged: [boolean],
darkerSystemColorsChanged: [boolean],
reduceTransparencyChanged: [boolean],
};

type AccessibilityEventDefinitions = {
...AccessibilityEventDefinitionsAndroid,
...AccessibilityEventDefinitionsIOS,
change: [boolean], // screenReaderChanged
grayscaleChanged: [boolean],
invertColorsChanged: [boolean],
reduceMotionChanged: [boolean],
screenReaderChanged: [boolean],
};
Expand Down Expand Up @@ -395,18 +395,18 @@ const AccessibilityInfo = {
* - `screenReaderChanged`: Fires when the state of the screen reader changes. The argument
* to the event handler is a boolean. The boolean is `true` when a screen
* reader is enabled and `false` otherwise.
* - `grayscaleChanged`: Fires when the state of the gray scale toggle changes.
* The argument to the event handler is a boolean. The boolean is `true` when gray scale
* is enabled and `false` otherwise.
* - `invertColorsChanged`: Fires when the state of the invert colors toggle
* changes. The argument to the event handler is a boolean. The boolean is `true` when invert
* colors is enabled and `false` otherwise.
*
* These events are only supported on iOS:
*
* - `boldTextChanged`: iOS-only event. Fires when the state of the bold text toggle changes.
* The argument to the event handler is a boolean. The boolean is `true` when a bold text
* is enabled and `false` otherwise.
* - `grayscaleChanged`: iOS-only event. Fires when the state of the gray scale toggle changes.
* The argument to the event handler is a boolean. The boolean is `true` when a gray scale
* is enabled and `false` otherwise.
* - `invertColorsChanged`: iOS-only event. Fires when the state of the invert colors toggle
* changes. The argument to the event handler is a boolean. The boolean is `true` when a invert
* colors is enabled and `false` otherwise.
* - `reduceTransparencyChanged`: iOS-only event. Fires when the state of the reduce transparency
* toggle changes. The argument to the event handler is a boolean. The boolean is `true`
* when a reduce transparency is enabled and `false` otherwise.
Expand Down
8 changes: 4 additions & 4 deletions packages/react-native/ReactNativeApi.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @generated SignedSource<<eeffa8d1c270f98debd70024251b4a1a>>
* @generated SignedSource<<d6790c241d1bd46a735efba34eeb4742>>
*
* This file was generated by scripts/js-api/build-types/index.js.
*/
Expand Down Expand Up @@ -1055,6 +1055,8 @@ declare type AccessibilityEventDefinitions =
AccessibilityEventDefinitionsAndroid &
AccessibilityEventDefinitionsIOS & {
change: [boolean]
grayscaleChanged: [boolean]
invertColorsChanged: [boolean]
reduceMotionChanged: [boolean]
screenReaderChanged: [boolean]
}
Expand All @@ -1071,8 +1073,6 @@ declare type AccessibilityEventDefinitionsIOS = {
]
boldTextChanged: [boolean]
darkerSystemColorsChanged: [boolean]
grayscaleChanged: [boolean]
invertColorsChanged: [boolean]
reduceTransparencyChanged: [boolean]
}
declare type AccessibilityEventTypes =
Expand Down Expand Up @@ -6052,7 +6052,7 @@ declare type WrapperComponentProvider = (
) => React.ComponentType<any>
export {
AccessibilityActionEvent, // 5c5928b9
AccessibilityInfo, // ccbcce2f
AccessibilityInfo, // 539eb4b3
AccessibilityProps, // 5a2836fc
AccessibilityRole, // f2f2e066
AccessibilityState, // b0c2b3f7
Expand Down
12 changes: 12 additions & 0 deletions packages/react-native/types/__typetests__/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1493,6 +1493,9 @@ AccessibilityInfo.getRecommendedTimeoutMillis(5000).then(timeoutMiles =>
),
);

AccessibilityInfo.addEventListener('accessibilityServiceChanged', isEnabled =>
console.log(`AccessibilityInfo.accessibilityServiceChanged => ${isEnabled}`),
);
AccessibilityInfo.addEventListener(
'announcementFinished',
({announcement, success}) =>
Expand All @@ -1503,9 +1506,18 @@ AccessibilityInfo.addEventListener(
AccessibilityInfo.addEventListener('boldTextChanged', isEnabled =>
console.log(`AccessibilityInfo.isBoldTextEnabled => ${isEnabled}`),
);
AccessibilityInfo.addEventListener('change', isEnabled =>
console.log(`AccessibilityInfo.change => ${isEnabled}`),
);
AccessibilityInfo.addEventListener('darkerSystemColorsChanged', isEnabled =>
console.log(`AccessibilityInfo.darkerSystemColorsChanged => ${isEnabled}`),
);
AccessibilityInfo.addEventListener('grayscaleChanged', isEnabled =>
console.log(`AccessibilityInfo.isGrayscaleEnabled => ${isEnabled}`),
);
AccessibilityInfo.addEventListener('highTextContrastChanged', isEnabled =>
console.log(`AccessibilityInfo.highTextContrastChanged => ${isEnabled}`),
);
AccessibilityInfo.addEventListener('invertColorsChanged', isEnabled =>
console.log(`AccessibilityInfo.isInvertColorsEnabled => ${isEnabled}`),
);
Expand Down
Loading