Accessibility - add header reader after month change (#2604)

* Accessibility - add header reader after month change

* remove console and add label arrows

* Fix for Android not grouping on accessible parent

Author: Inbal-Tish

src/calendar-list/index.tsx

@@ -2,7 +2,8 @@ import findIndex from 'lodash/findIndex';
 import PropTypes from 'prop-types';
 import XDate from 'xdate';
 import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
-import {FlatList, FlatListProps, View, ViewStyle} from 'react-native';
+import {AccessibilityInfo, FlatList, FlatListProps, View, ViewStyle} from 'react-native';
+
 import {extractCalendarProps, extractHeaderProps} from '../componentUpdater';
 import {parseDate, toMarkingFormat, xdateToData} from '../interface';
 import {page, sameDate, sameMonth} from '../dateutils';
@@ -100,7 +101,9 @@ const CalendarList = (props: CalendarListProps & ContextProp, ref: any) => {
     contentContainerStyle,
     onEndReachedThreshold,
     onEndReached,
-    onHeaderLayout
+    onHeaderLayout,
+    accessibilityElementsHidden,
+    importantForAccessibility
   } = props;
 
   const calendarProps = extractCalendarProps(props);
@@ -164,6 +167,7 @@ const CalendarList = (props: CalendarListProps & ContextProp, ref: any) => {
       const data = xdateToData(currMont);
       onMonthChange?.(data);
       onVisibleMonthsChange?.([data]);
+      AccessibilityInfo.announceForAccessibility(currMont.toString('MMMM yyyy'));
     }
   }, [currentMonth]);
 
@@ -271,9 +275,9 @@ const CalendarList = (props: CalendarListProps & ContextProp, ref: any) => {
           style={staticHeaderStyle}
           month={currentMonth}
           addMonth={addMonth}
-          accessibilityElementsHidden={true} // iOS
-          importantForAccessibility={'no-hide-descendants'} // Android
           onHeaderLayout={onHeaderLayoutToPass}
+          accessibilityElementsHidden={accessibilityElementsHidden} // iOS
+          importantForAccessibility={importantForAccessibility} // Android
         />
       );
     }

src/calendar/header/index.tsx

@@ -231,11 +231,11 @@ const CalendarHeader = forwardRef((props: CalendarHeaderProps, ref) => {
     }
 
     const isLeft = direction === 'left';
-    const arrowId = isLeft ? 'leftArrow' : 'rightArrow';
+    const arrowDirection = isLeft ? 'left' : 'right';   
+    const arrowId = `${arrowDirection}Arrow`;
     const shouldDisable = isLeft ? disableArrowLeft : disableArrowRight;
     const onPress = !shouldDisable ? isLeft ? onPressLeft : onPressRight : undefined;
     const imageSource = isLeft ? require('../img/previous.png') : require('../img/next.png');
-    const renderArrowDirection = isLeft ? 'left' : 'right';   
 
     return (
       <TouchableOpacity
@@ -244,12 +244,9 @@ const CalendarHeader = forwardRef((props: CalendarHeaderProps, ref) => {
         style={style.current.arrow}
         hitSlop={hitSlop}
         testID={`${testID}.${arrowId}`}
+        importantForAccessibility={'no-hide-descendants'}
       >
-        {renderArrow ? (
-          renderArrow(renderArrowDirection)
-        ) : (
-          <Image source={imageSource} style={shouldDisable ? style.current.disabledArrowImage : style.current.arrowImage}/>
-        )}
+        {renderArrow ? renderArrow(arrowDirection) : <Image source={imageSource} style={shouldDisable ? style.current.disabledArrowImage : style.current.arrowImage}/>}
       </TouchableOpacity>
     );
   };
@@ -275,6 +272,7 @@ const CalendarHeader = forwardRef((props: CalendarHeaderProps, ref) => {
         <View
           style={dayNamesStyle}
           testID={`${testID}.dayNames`}
+          importantForAccessibility={'no-hide-descendants'}
         >
           {renderWeekNumbersSpace()}
           {renderWeekDays}
@@ -297,7 +295,7 @@ const CalendarHeader = forwardRef((props: CalendarHeaderProps, ref) => {
     >
       <View style={headerStyle}>
         {_renderArrow('left')}
-        <View style={style.current.headerContainer}>
+        <View style={style.current.headerContainer} importantForAccessibility={'no-hide-descendants'}>
           {_renderHeader()}
           {renderIndicator()}
         </View>

src/calendar/index.tsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import XDate from 'xdate';
 import isEmpty from 'lodash/isEmpty';
 import React, {useRef, useState, useEffect, useCallback, useMemo} from 'react';
-import {View, ViewStyle, StyleProp} from 'react-native';
+import {AccessibilityInfo, View, ViewStyle, StyleProp} from 'react-native';
 // @ts-expect-error
 import GestureRecognizer, {swipeDirections} from 'react-native-swipe-gestures';
 import constants from '../commons/constants';
@@ -108,6 +108,7 @@ const Calendar = (props: CalendarProps & ContextProp) => {
     const _currentMonth = currentMonth.clone();
     onMonthChange?.(xdateToData(_currentMonth));
     onVisibleMonthsChange?.([xdateToData(_currentMonth)]);
+    AccessibilityInfo.announceForAccessibility(_currentMonth.toString('MMMM yyyy'));
   }, [currentMonth]);
 
   const updateMonth = useCallback((newMonth: XDate) => {