feat(Calendar): improve a11y (#59)

src/components/CalendarView/hooks/useCalendarProps.ts

@@ -6,7 +6,7 @@ import type {ButtonProps} from '@gravity-ui/uikit';
 import type {CalendarProps} from '../../Calendar/Calendar';
 import {i18n} from '../i18n';
 
-import type {CalendarState, RangeCalendarState} from './types';
+import type {CalendarLayout, CalendarState, RangeCalendarState} from './types';
 
 const buttonDisabledClassName = 'yc-button_disabled g-button_disabled';
 
@@ -52,6 +52,8 @@ export function useCalendarProps(props: CalendarProps, state: CalendarState | Ra
               },
         extraProps: {
             'aria-disabled': modeDisabled ? 'true' : undefined,
+            'aria-description': getAriaDescriptionForModeButton(state.mode, state.availableModes),
+            'aria-live': 'polite',
         },
         children: title,
     };
@@ -133,3 +135,20 @@ export function useCalendarProps(props: CalendarProps, state: CalendarState | Ra
         previousButtonProps,
     };
 }
+
+function getAriaDescriptionForModeButton(mode: CalendarLayout, availableModes: CalendarLayout[]) {
+    const nextModeIndex = availableModes.indexOf(mode) + 1;
+    const isModeLast = nextModeIndex === availableModes.length;
+    if (isModeLast) {
+        return undefined;
+    }
+
+    const ariaLabelMap: Record<CalendarLayout, string> = {
+        days: '',
+        months: i18n('Switch to months view'),
+        quarters: i18n('Switch to quarters view'),
+        years: i18n('Switch to years view'),
+    };
+    const nextMode = availableModes[nextModeIndex];
+    return ariaLabelMap[nextMode];
+}

src/components/CalendarView/i18n/en.json

@@ -1,4 +1,7 @@
 {
   "Previous": "Previous",
-  "Next": "Next"
+  "Next": "Next",
+  "Switch to months view": "Switch to months view",
+  "Switch to quarters view": "Switch to quarters view",
+  "Switch to years view": "Switch to years view"
 }

src/components/CalendarView/i18n/ru.json

@@ -1,4 +1,7 @@
 {
   "Previous": "Назад",
-  "Next": "Вперёд"
+  "Next": "Вперёд",
+  "Switch to months view": "Переключиться на просмотр по месяцам",
+  "Switch to quarters view": "Переключиться на просмотр по кварталам",
+  "Switch to years view": "Переключиться на просмотр по годам"
 }