diff --git a/packages/react-native/Libraries/Components/AccessibilityInfo/AccessibilityInfo.d.ts b/packages/react-native/Libraries/Components/AccessibilityInfo/AccessibilityInfo.d.ts index bad75fca1346..2c3f50530069 100644 --- a/packages/react-native/Libraries/Components/AccessibilityInfo/AccessibilityInfo.d.ts +++ b/packages/react-native/Libraries/Components/AccessibilityInfo/AccessibilityInfo.d.ts @@ -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; @@ -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 diff --git a/packages/react-native/Libraries/Components/AccessibilityInfo/AccessibilityInfo.js b/packages/react-native/Libraries/Components/AccessibilityInfo/AccessibilityInfo.js index 6071263103cf..7f9a2224b1a2 100644 --- a/packages/react-native/Libraries/Components/AccessibilityInfo/AccessibilityInfo.js +++ b/packages/react-native/Libraries/Components/AccessibilityInfo/AccessibilityInfo.js @@ -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], }; @@ -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. diff --git a/packages/react-native/ReactNativeApi.d.ts b/packages/react-native/ReactNativeApi.d.ts index 6e7dd111ae46..261ef45f8c2f 100644 --- a/packages/react-native/ReactNativeApi.d.ts +++ b/packages/react-native/ReactNativeApi.d.ts @@ -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<> + * @generated SignedSource<> * * This file was generated by scripts/js-api/build-types/index.js. */ @@ -1055,6 +1055,8 @@ declare type AccessibilityEventDefinitions = AccessibilityEventDefinitionsAndroid & AccessibilityEventDefinitionsIOS & { change: [boolean] + grayscaleChanged: [boolean] + invertColorsChanged: [boolean] reduceMotionChanged: [boolean] screenReaderChanged: [boolean] } @@ -1071,8 +1073,6 @@ declare type AccessibilityEventDefinitionsIOS = { ] boldTextChanged: [boolean] darkerSystemColorsChanged: [boolean] - grayscaleChanged: [boolean] - invertColorsChanged: [boolean] reduceTransparencyChanged: [boolean] } declare type AccessibilityEventTypes = @@ -6052,7 +6052,7 @@ declare type WrapperComponentProvider = ( ) => React.ComponentType export { AccessibilityActionEvent, // 5c5928b9 - AccessibilityInfo, // ccbcce2f + AccessibilityInfo, // 539eb4b3 AccessibilityProps, // 5a2836fc AccessibilityRole, // f2f2e066 AccessibilityState, // b0c2b3f7 diff --git a/packages/react-native/types/__typetests__/index.tsx b/packages/react-native/types/__typetests__/index.tsx index d75bcebce030..eb130ebd8eda 100644 --- a/packages/react-native/types/__typetests__/index.tsx +++ b/packages/react-native/types/__typetests__/index.tsx @@ -1493,6 +1493,9 @@ AccessibilityInfo.getRecommendedTimeoutMillis(5000).then(timeoutMiles => ), ); +AccessibilityInfo.addEventListener('accessibilityServiceChanged', isEnabled => + console.log(`AccessibilityInfo.accessibilityServiceChanged => ${isEnabled}`), +); AccessibilityInfo.addEventListener( 'announcementFinished', ({announcement, success}) => @@ -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}`), );