feat(Calendar): update props

and get rid of most aria-labels
VKCOM · Dec 4, 2023 · 7896781 · 7896781
1 parent d497f3a
commit 7896781
Show file tree

Hide file tree

Showing 8 changed files with 159 additions and 145 deletions.
diff --git a/packages/vkui/src/components/Calendar/Calendar.tsx b/packages/vkui/src/components/Calendar/Calendar.tsx
@@ -14,13 +14,13 @@ import styles from './Calendar.module.css';
 
 export interface CalendarProps
   extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'>,
-    Pick<CalendarTimeProps, 'changeHoursAriaLabel' | 'changeMinutesAriaLabel'>,
+    Pick<CalendarTimeProps, 'changeHoursLabel' | 'changeMinutesLabel'>,
     Pick<
       CalendarHeaderProps,
-      | 'prevMonthAriaLabel'
-      | 'nextMonthAriaLabel'
-      | 'changeMonthAriaLabel'
-      | 'changeYearAriaLabel'
+      | 'prevMonthLabel'
+      | 'nextMonthLabel'
+      | 'changeMonthLabel'
+      | 'changeYearLabel'
       | 'onNextMonth'
       | 'onPrevMonth'
       | 'prevMonthIcon'
@@ -35,7 +35,7 @@ export interface CalendarProps
   enableTime?: boolean;
   disablePickers?: boolean;
   doneButtonText?: string;
-  changeDayAriaLabel?: string;
+  changeDayLabel?: string;
   weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
   showNeighboringMonth?: boolean;
   size?: 's' | 'm';
@@ -77,14 +77,14 @@ export const Calendar = ({
   doneButtonText,
   weekStartsOn = 1,
   disablePickers,
-  changeHoursAriaLabel,
-  changeMinutesAriaLabel,
-  prevMonthAriaLabel,
-  nextMonthAriaLabel,
-  changeMonthAriaLabel,
-  changeYearAriaLabel,
+  changeHoursLabel = 'Изменить час',
+  changeMinutesLabel = 'Изменить минуту',
+  prevMonthLabel = 'Предыдущий месяц',
+  nextMonthLabel = 'Следующий месяц',
+  changeMonthLabel = 'Изменить месяц',
+  changeYearLabel = 'Изменить год',
   showNeighboringMonth,
-  changeDayAriaLabel = 'Изменить день',
+  changeDayLabel = 'Изменить день',
   size = 'm',
   viewDate: externalViewDate,
   onHeaderChange,
@@ -180,10 +180,10 @@ export const Calendar = ({
         onPrevMonth={setPrevMonth}
         disablePickers={disablePickers || size === 's'}
         className={styles['Calendar__header']}
-        prevMonthAriaLabel={prevMonthAriaLabel}
-        nextMonthAriaLabel={nextMonthAriaLabel}
-        changeMonthAriaLabel={changeMonthAriaLabel}
-        changeYearAriaLabel={changeYearAriaLabel}
+        prevMonthLabel={prevMonthLabel}
+        nextMonthLabel={nextMonthLabel}
+        changeMonthLabel={changeMonthLabel}
+        changeYearLabel={changeYearLabel}
         prevMonthIcon={prevMonthIcon}
         nextMonthIcon={nextMonthIcon}
         prevMonthProps={prevMonthProps}
@@ -195,7 +195,7 @@ export const Calendar = ({
         weekStartsOn={weekStartsOn}
         isDayFocused={isDayFocused}
         tabIndex={0}
-        aria-label={changeDayAriaLabel}
+        aria-label={changeDayLabel}
         onKeyDown={handleKeyDown}
         onDayChange={onDayChange}
         isDayActive={isDayActive}
@@ -215,8 +215,8 @@ export const Calendar = ({
             onChange={onChange}
             onClose={onClose}
             doneButtonText={doneButtonText}
-            changeHoursAriaLabel={changeHoursAriaLabel}
-            changeMinutesAriaLabel={changeMinutesAriaLabel}
+            changeHoursLabel={changeHoursLabel}
+            changeMinutesLabel={changeMinutesLabel}
             isDayDisabled={minDateTime || maxDateTime ? isDayDisabled : undefined}
           />
         </div>

diff --git a/packages/vkui/src/components/CalendarDay/CalendarDay.tsx b/packages/vkui/src/components/CalendarDay/CalendarDay.tsx
@@ -3,6 +3,7 @@ import { classNames } from '@vkontakte/vkjs';
 import { ENABLE_KEYBOARD_INPUT_EVENT_NAME } from '../../hooks/useKeyboardInputTracker';
 import { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';
 import { Tappable, TappableElementProps } from '../Tappable/Tappable';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
 import styles from './CalendarDay.module.css';
 
 export type CalendarDayElementProps = Omit<
@@ -50,14 +51,22 @@ export const CalendarDay = React.memo(
     sameMonth,
     size,
     className,
-    ...props
+    children,
+    ...restProps
   }: CalendarDayProps) => {
     const { locale } = useConfigProvider();
     const ref = React.useRef<HTMLElement>(null);
     const onClick = React.useCallback(() => onChange(day), [day, onChange]);
     const handleEnter = React.useCallback(() => onEnter?.(day), [day, onEnter]);
     const handleLeave = React.useCallback(() => onLeave?.(day), [day, onLeave]);
 
+    const label = new Intl.DateTimeFormat(locale, {
+      weekday: 'long',
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+    }).format(day);
+
     React.useEffect(() => {
       if (focused && ref.current) {
         ref.current.dispatchEvent(new Event(ENABLE_KEYBOARD_INPUT_EVENT_NAME, { bubbles: true }));
@@ -66,7 +75,7 @@ export const CalendarDay = React.memo(
     }, [focused]);
 
     if (hidden) {
-      return <div className={styles['CalendarDay__hidden']}></div>;
+      return <div className={styles['CalendarDay__hidden']} />;
     }
 
     return (
@@ -86,18 +95,12 @@ export const CalendarDay = React.memo(
         hasActive={false}
         onClick={onClick}
         disabled={disabled}
-        aria-label={new Intl.DateTimeFormat(locale, {
-          weekday: 'long',
-          year: 'numeric',
-          month: 'long',
-          day: 'numeric',
-        }).format(day)}
         tabIndex={-1}
         getRootRef={ref}
         focusVisibleMode={active ? 'outside' : 'inside'}
         onEnter={handleEnter}
         onLeave={handleLeave}
-        {...props}
+        {...restProps}
       >
         <div
           className={classNames(
@@ -113,7 +116,10 @@ export const CalendarDay = React.memo(
               active && !disabled && styles['CalendarDay__inner--active'],
             )}
           >
-            <div className={styles['CalendarDay__day-number']}>{day.getDate()}</div>
+            <div className={styles['CalendarDay__day-number']}>
+              <VisuallyHidden>{children ?? label}</VisuallyHidden>
+              <span aria-hidden>{day.getDate()}</span>
+            </div>
           </div>
         </div>
       </Tappable>

diff --git a/packages/vkui/src/components/CalendarHeader/CalendarHeader.tsx b/packages/vkui/src/components/CalendarHeader/CalendarHeader.tsx
@@ -14,6 +14,7 @@ import { CustomSelect } from '../CustomSelect/CustomSelect';
 import { RootComponent } from '../RootComponent/RootComponent';
 import { Tappable, TappableElementProps } from '../Tappable/Tappable';
 import { Paragraph } from '../Typography/Paragraph/Paragraph';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
 import styles from './CalendarHeader.module.css';
 
 type ArrowMonthProps = Omit<TappableElementProps, 'onClick' | 'aria-label'>;
@@ -24,10 +25,10 @@ export interface CalendarHeaderProps
   prevMonth?: boolean;
   nextMonth?: boolean;
   disablePickers?: boolean;
-  prevMonthAriaLabel?: string;
-  nextMonthAriaLabel?: string;
-  changeMonthAriaLabel?: string;
-  changeYearAriaLabel?: string;
+  prevMonthLabel?: string;
+  nextMonthLabel?: string;
+  changeMonthLabel?: string;
+  changeYearLabel?: string;
   prevMonthIcon?: React.ReactNode;
   nextMonthIcon?: React.ReactNode;
   prevMonthProps?: ArrowMonthProps;
@@ -53,10 +54,10 @@ export const CalendarHeader = ({
   onPrevMonth,
   prevMonthProps = {},
   nextMonthProps = {},
-  prevMonthAriaLabel = 'Предыдущий месяц',
-  nextMonthAriaLabel = 'Следующий месяц',
-  changeMonthAriaLabel = 'Изменить месяц',
-  changeYearAriaLabel = 'Изменить год',
+  prevMonthLabel,
+  nextMonthLabel,
+  changeMonthLabel,
+  changeYearLabel,
   prevMonthIcon = (
     <Icon20ChevronLeftOutline
       className={styles['CalendarHeader__nav-icon--accent']}
@@ -117,9 +118,11 @@ export const CalendarHeader = ({
               prevMonthClassName,
             )}
             onClick={onPrevMonth}
-            aria-label={`${prevMonthAriaLabel}, ${formatter.format(subMonths(viewDate, 1))}`}
             {...restPrevMonthProps}
           >
+            <VisuallyHidden>
+              {prevMonthLabel}, {formatter.format(subMonths(viewDate, 1))}
+            </VisuallyHidden>
             {prevMonthIcon}
           </Tappable>
         </AdaptivityProvider>
@@ -163,7 +166,7 @@ export const CalendarHeader = ({
               onChange={onMonthsChange}
               forceDropdownPortal={false}
               selectType="accent"
-              aria-label={changeMonthAriaLabel}
+              aria-label={changeMonthLabel}
             />
             <CustomSelect
               className={classNames(
@@ -178,7 +181,7 @@ export const CalendarHeader = ({
               onChange={onYearChange}
               forceDropdownPortal={false}
               selectType="accent"
-              aria-label={changeYearAriaLabel}
+              aria-label={changeYearLabel}
             />
           </div>
         </AdaptivityProvider>
@@ -192,9 +195,11 @@ export const CalendarHeader = ({
               nextMonthClassName,
             )}
             onClick={onNextMonth}
-            aria-label={`${nextMonthAriaLabel}, ${formatter.format(addMonths(viewDate, 1))}`}
             {...restNextMonthProps}
           >
+            <VisuallyHidden>
+              {nextMonthLabel}, {formatter.format(addMonths(viewDate, 1))}
+            </VisuallyHidden>
             {nextMonthIcon}
           </Tappable>
         </AdaptivityProvider>

diff --git a/packages/vkui/src/components/CalendarRange/CalendarRange.tsx b/packages/vkui/src/components/CalendarRange/CalendarRange.tsx
@@ -21,10 +21,10 @@ export interface CalendarRangeProps
   extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'>,
     Pick<
       CalendarHeaderProps,
-      | 'prevMonthAriaLabel'
-      | 'nextMonthAriaLabel'
-      | 'changeMonthAriaLabel'
-      | 'changeYearAriaLabel'
+      | 'prevMonthLabel'
+      | 'nextMonthLabel'
+      | 'changeMonthLabel'
+      | 'changeYearLabel'
       | 'prevMonthIcon'
       | 'nextMonthIcon'
     >,
@@ -33,7 +33,7 @@ export interface CalendarRangeProps
   disablePast?: boolean;
   disableFuture?: boolean;
   disablePickers?: boolean;
-  changeDayAriaLabel?: string;
+  changeDayLabel?: string;
   weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
   onChange?(value?: Array<Date | null>): void;
   shouldDisableDate?(value: Date): boolean;
@@ -60,11 +60,11 @@ export const CalendarRange = ({
   onClose,
   weekStartsOn = 1,
   disablePickers,
-  prevMonthAriaLabel,
-  nextMonthAriaLabel,
-  changeMonthAriaLabel,
-  changeYearAriaLabel,
-  changeDayAriaLabel = 'Изменить день',
+  prevMonthLabel = 'Предыдущий месяц',
+  nextMonthLabel = 'Следующий месяц',
+  changeMonthLabel = 'Изменить месяц',
+  changeYearLabel = 'Изменить год',
+  changeDayLabel = 'Изменить день',
   prevMonthIcon,
   nextMonthIcon,
   listenDayChangesForUpdate,
@@ -187,10 +187,10 @@ export const CalendarRange = ({
           onPrevMonth={setPrevMonth}
           disablePickers={disablePickers}
           className={styles['CalendarRange__header']}
-          prevMonthAriaLabel={prevMonthAriaLabel}
-          nextMonthAriaLabel={nextMonthAriaLabel}
-          changeMonthAriaLabel={changeMonthAriaLabel}
-          changeYearAriaLabel={changeYearAriaLabel}
+          prevMonthLabel={prevMonthLabel}
+          nextMonthLabel={nextMonthLabel}
+          changeMonthLabel={changeMonthLabel}
+          changeYearLabel={changeYearLabel}
           prevMonthIcon={prevMonthIcon}
         />
         <CalendarDays
@@ -211,7 +211,7 @@ export const CalendarRange = ({
           isHintedDaySelectionStart={isHintedDaySelectionStart}
           isDayDisabled={isDayDisabled}
           listenDayChangesForUpdate={listenDayChangesForUpdate}
-          aria-label={changeDayAriaLabel}
+          aria-label={changeDayLabel}
         />
       </div>
       <div className={styles['CalendarRange__inner']}>
@@ -222,17 +222,17 @@ export const CalendarRange = ({
           onNextMonth={setNextMonth}
           disablePickers={disablePickers}
           className={styles['CalendarRange__header']}
-          prevMonthAriaLabel={prevMonthAriaLabel}
-          nextMonthAriaLabel={nextMonthAriaLabel}
-          changeMonthAriaLabel={changeMonthAriaLabel}
-          changeYearAriaLabel={changeYearAriaLabel}
+          prevMonthLabel={prevMonthLabel}
+          nextMonthLabel={nextMonthLabel}
+          changeMonthLabel={changeMonthLabel}
+          changeYearLabel={changeYearLabel}
           nextMonthIcon={nextMonthIcon}
         />
         <CalendarDays
           viewDate={secondViewDate}
           value={value}
           weekStartsOn={weekStartsOn}
-          aria-label={changeDayAriaLabel}
+          aria-label={changeDayLabel}
           onKeyDown={handleKeyDown}
           isDayFocused={isDayFocused}
           onDayChange={onDayChange}

diff --git a/packages/vkui/src/components/CalendarTime/CalendarTime.tsx b/packages/vkui/src/components/CalendarTime/CalendarTime.tsx
@@ -8,8 +8,8 @@ import styles from './CalendarTime.module.css';
 export interface CalendarTimeProps {
   value: Date;
   doneButtonText?: string;
-  changeHoursAriaLabel?: string;
-  changeMinutesAriaLabel?: string;
+  changeHoursLabel?: string;
+  changeMinutesLabel?: string;
   onChange?(value: Date): void;
   onClose?(): void;
   isDayDisabled?(day: Date, withTime?: boolean): boolean;
@@ -36,8 +36,8 @@ export const CalendarTime = ({
   doneButtonText = 'Готово',
   onChange,
   onClose,
-  changeHoursAriaLabel = 'Изменить час',
-  changeMinutesAriaLabel = 'Изменить минуту',
+  changeHoursLabel,
+  changeMinutesLabel,
   isDayDisabled,
 }: CalendarTimeProps) => {
   const localHours = isDayDisabled
@@ -72,7 +72,7 @@ export const CalendarTime = ({
             options={localHours}
             onChange={onHoursChange}
             forceDropdownPortal={false}
-            aria-label={changeHoursAriaLabel}
+            aria-label={changeHoursLabel}
           />
         </AdaptivityProvider>
       </div>
@@ -84,13 +84,13 @@ export const CalendarTime = ({
             options={localMinutes}
             onChange={onMinutesChange}
             forceDropdownPortal={false}
-            aria-label={changeMinutesAriaLabel}
+            aria-label={changeMinutesLabel}
           />
         </AdaptivityProvider>
       </div>
       <div className={styles['CalendarTime__button']}>
         <AdaptivityProvider sizeY="compact">
-          <Button mode="secondary" onClick={onClose} size="l" aria-label={doneButtonText}>
+          <Button mode="secondary" onClick={onClose} size="l">
             {doneButtonText}
           </Button>
         </AdaptivityProvider>