@vkontakte/vkui 7.3.8 → 7.4.0

package/src/components/DateRangeInput/DateRangeInput.tsx

@@ -8,7 +8,7 @@ import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { useDateInput } from '../../hooks/useDateInput';
 import { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';
 import { useExternRef } from '../../hooks/useExternRef';
-import { callMultiple } from '../../lib/callMultiple';
+import { type UseFocusTrapProps } from '../../hooks/useFocusTrap';
 import { format, isMatch, parse } from '../../lib/date';
 import type { PlacementWithAuto } from '../../lib/floating';
 import type { HasRootRef } from '../../types';
@@ -18,10 +18,12 @@ import {
   type CalendarRangeTestsProps,
   type DateRangeType,
 } from '../CalendarRange/CalendarRange';
+import { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';
+import { FocusTrap } from '../FocusTrap/FocusTrap';
 import { FormField, type FormFieldProps } from '../FormField/FormField';
 import { IconButton } from '../IconButton/IconButton';
-import { InputLike } from '../InputLike/InputLike';
 import { InputLikeDivider } from '../InputLike/InputLikeDivider';
+import { NumberInputLike } from '../NumberInputLike/NumberInputLike';
 import { Popper } from '../Popper/Popper';
 import { Text } from '../Typography/Text/Text';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
@@ -88,6 +90,7 @@ export interface DateRangeInputProps
       | 'nextMonthIcon'
       | 'renderDayContent'
     >,
+    Pick<UseFocusTrapProps, 'restoreFocus'>,
     HasRootRef<HTMLDivElement>,
     Omit<FormFieldProps, 'maxHeight'>,
     DateRangeInputTestsProps {
@@ -107,6 +110,10 @@ export interface DateRangeInputProps
    * Обработчик изменения состояния открытия календаря.
    */
   onCalendarOpenChanged?: (opened: boolean) => void;
+  /**
+   * Label для календаря.
+   */
+  calendarLabel?: string;
   /**
    * Label для кнопки очистки. Делает доступным для ассистивных технологий.
    */
@@ -143,6 +150,21 @@ export interface DateRangeInputProps
    * Отключение открытия календаря.
    */
   disableCalendar?: boolean;
+  /**
+   * Позволяет отключить захват фокуса при появлении календаря.
+   */
+  disableFocusTrap?: UseFocusTrapProps['disabled'];
+  /**
+   * Включает режим в котором DateRangeInput доступен
+   * для ассистивных технологий.
+   * В этом режиме:
+   * - календарь больше не открывает при фокусе на DateRangeInput;
+   * - иконка календаря видна всегда, чтобы пользователи
+   * ассистивных технологий могли открыть календарь по клику на иконку;
+   * - календарь при открытии получает фокус, клавиатурный
+   * фокус зациклен и не выходит за пределы календаря пока календарь не закрыт.
+   */
+  accessible?: boolean; // TODO [>=8]: включить по умолчанию.
 }
 
 const elementsConfig = (index: number) => {
@@ -185,6 +207,13 @@ const getInternalValue = (value: CalendarRangeProps['value']) => {
   return newValue;
 };
 
+const CALENDAR_MUTATION_OBSERVER_OPTIONS: MutationObserverInit = {
+  childList: true,
+  subtree: true,
+  attributes: true,
+  attributeFilter: ['tabindex'],
+};
+
 /**
  * @see https://vkcom.github.io/VKUI/#/DateRangeInput
  */
@@ -192,10 +221,10 @@ export const DateRangeInput = ({
   shouldDisableDate,
   disableFuture,
   disablePast,
-  value: valueProp,
+  'value': valueProp,
   defaultValue,
   onChange,
-  calendarPlacement: calendarPlacementProp = 'bottom-start',
+  'calendarPlacement': calendarPlacementProp = 'bottom-start',
   style,
   className,
   closeOnChange = true,
@@ -204,24 +233,24 @@ export const DateRangeInput = ({
   name,
   autoFocus,
   disabled,
-  onClick,
-  onFocus,
+  disableFocusTrap,
+  restoreFocus,
+  calendarLabel = 'Календарь',
   prevMonthLabel = 'Предыдущий месяц',
   nextMonthLabel = 'Следующий месяц',
-  changeDayLabel = 'Изменить день',
-  changeMonthLabel = 'Изменить месяц',
-  changeYearLabel = 'Изменить год',
-  changeStartDayLabel = 'Изменить день начала',
-  changeStartMonthLabel = 'Изменить месяц начала',
-  changeStartYearLabel = 'Изменить год начала',
-  changeEndDayLabel = 'Изменить день окончания',
-  changeEndMonthLabel = 'Изменить месяц окончания',
-  changeEndYearLabel = 'Изменить год окончания',
+  changeMonthLabel = 'Месяц',
+  changeYearLabel = 'Год',
+  changeStartDayLabel = 'День начала',
+  changeStartMonthLabel = 'Месяц начала',
+  changeStartYearLabel = 'Год начала',
+  changeEndDayLabel = 'День окончания',
+  changeEndMonthLabel = 'Месяц окончания',
+  changeEndYearLabel = 'Год окончания',
   clearFieldLabel = 'Очистить поле',
   showCalendarLabel = 'Показать календарь',
+  'aria-label': ariaLabel = '',
   prevMonthIcon,
   nextMonthIcon,
-  disableCalendar = false,
   onCalendarOpenChanged,
   renderDayContent,
   calendarTestsProps,
@@ -230,6 +259,9 @@ export const DateRangeInput = ({
   clearButtonTestId,
   showCalendarButtonTestId,
   id,
+  accessible,
+  readOnly,
+  'disableCalendar': disableCalendarProp = false,
   ...props
 }: DateRangeInputProps): React.ReactNode => {
   const daysStartRef = React.useRef<HTMLSpanElement>(null);
@@ -239,6 +271,8 @@ export const DateRangeInput = ({
   const monthsEndRef = React.useRef<HTMLSpanElement>(null);
   const yearsEndRef = React.useRef<HTMLSpanElement>(null);
 
+  const disableCalendar = readOnly ? true : disableCalendarProp;
+
   const _onChange = React.useCallback(
     (newValue: DateRangeType | null | undefined) => onChange?.(newValue || undefined),
     [onChange],
@@ -307,6 +341,7 @@ export const DateRangeInput = ({
     open,
     openCalendar,
     closeCalendar,
+    toggleCalendar,
     internalValue,
     handleKeyDown,
     setFocusedElement,
@@ -317,13 +352,14 @@ export const DateRangeInput = ({
     maxElement: 5,
     refs,
     autoFocus,
-    disabled,
+    disabled: disabled || readOnly,
     elementsConfig,
     onClear,
     onInternalValueChange,
     getInternalValue,
     value,
     onCalendarOpenChanged,
+    accessible,
   });
 
   const { sizeY = 'none' } = useAdaptivity();
@@ -347,38 +383,87 @@ export const DateRangeInput = ({
   const [calendarPlacement, setCalendarPlacement] =
     React.useState<PlacementWithAuto>(calendarPlacementProp);
 
+  const { locale } = useConfigProvider();
+  const currentDateLabel = React.useMemo(() => {
+    if (!value) {
+      return null;
+    }
+    const [startDate, endDate] = value;
+    if (!startDate || !endDate) {
+      return null;
+    }
+    return [
+      new Intl.DateTimeFormat(locale, {
+        weekday: 'long',
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+      }).format(startDate),
+      new Intl.DateTimeFormat(locale, {
+        weekday: 'long',
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+      }).format(endDate),
+    ].join(' - ');
+  }, [locale, value]);
+
+  const currentDateLabelId = React.useId();
+  const ariaLabelId = React.useId();
+
+  const showCalendarOnInputAreaClick = React.useCallback(() => {
+    handleFieldEnter();
+    if (accessible) {
+      openCalendar();
+    }
+  }, [handleFieldEnter, openCalendar, accessible]);
+
   return (
     <FormField
       style={style}
       className={classNames(sizeY !== 'regular' && sizeYClassNames[sizeY], className)}
       getRootRef={handleRootRef}
+      role="group"
+      aria-labelledby={`${ariaLabelId} ${currentDateLabelId}`}
       after={
-        value ? (
-          <IconButton hoverMode="opacity" onClick={clear} data-testid={clearButtonTestId}>
-            <VisuallyHidden>{clearFieldLabel}</VisuallyHidden>
-            <Icon16Clear />
-          </IconButton>
-        ) : (
-          <IconButton
-            hoverMode="opacity"
-            onClick={openCalendar}
-            data-testid={showCalendarButtonTestId}
-          >
-            <VisuallyHidden>{showCalendarLabel}</VisuallyHidden>
-            <Icon20CalendarOutline />
-          </IconButton>
-        )
+        <>
+          {!disableCalendar && (accessible || (!accessible && !value)) ? (
+            <IconButton
+              hoverMode="opacity"
+              label={showCalendarLabel}
+              onClick={toggleCalendar}
+              data-testid={showCalendarButtonTestId}
+            >
+              <Icon20CalendarOutline />
+            </IconButton>
+          ) : null}
+          {value && !readOnly ? (
+            <IconButton
+              hoverMode="opacity"
+              label={clearFieldLabel}
+              onClick={clear}
+              data-testid={clearButtonTestId}
+            >
+              <Icon16Clear />
+            </IconButton>
+          ) : null}
+        </>
       }
       disabled={disabled}
-      onClick={callMultiple(handleFieldEnter, onClick)}
-      onFocus={callMultiple(handleFieldEnter, onFocus)}
       {...props}
     >
       <div className={dateInputStyles.wrapper}>
+        {ariaLabel && <VisuallyHidden id={ariaLabelId}>{ariaLabel}</VisuallyHidden>}
+        {currentDateLabel && (
+          <VisuallyHidden id={currentDateLabelId}>{currentDateLabel}</VisuallyHidden>
+        )}
         <VisuallyHidden
           id={id}
           Component="input"
+          readOnly
+          aria-hidden
           name={name}
+          tabIndex={readOnly ? 0 : -1}
           value={
             value
               ? `${value[0] ? format(value[0], 'dd.MM.yyyy') : ''} - ${
@@ -386,64 +471,89 @@ export const DateRangeInput = ({
                 }`
               : ''
           }
+          onFocus={handleFieldEnter}
         />
-        <Text className={dateInputStyles.input} onKeyDown={handleKeyDown}>
-          <InputLike
+        <Text className={dateInputStyles.input} onClick={showCalendarOnInputAreaClick}>
+          <NumberInputLike
+            value={internalValue[0]}
+            minValue={1}
+            maxValue={31}
+            onKeyDown={readOnly ? undefined : handleKeyDown}
             length={2}
             getRootRef={daysStartRef}
             index={0}
+            readOnly={readOnly}
             onElementSelect={setFocusedElement}
-            value={internalValue[0]}
             label={changeStartDayLabel}
             data-testid={startDateTestsProps?.day}
           />
           <InputLikeDivider>.</InputLikeDivider>
-          <InputLike
+          <NumberInputLike
+            value={internalValue[1]}
+            minValue={1}
+            maxValue={12}
+            onKeyDown={handleKeyDown}
             length={2}
             getRootRef={monthsStartRef}
             index={1}
             onElementSelect={setFocusedElement}
-            value={internalValue[1]}
+            readOnly={readOnly}
             label={changeStartMonthLabel}
             data-testid={startDateTestsProps?.month}
           />
           <InputLikeDivider>.</InputLikeDivider>
-          <InputLike
+          <NumberInputLike
+            value={internalValue[2]}
+            minValue={1}
+            maxValue={275750}
+            onKeyDown={handleKeyDown}
             length={4}
             getRootRef={yearsStartRef}
             index={2}
             onElementSelect={setFocusedElement}
-            value={internalValue[2]}
+            readOnly={readOnly}
             label={changeStartYearLabel}
             data-testid={startDateTestsProps?.year}
           />
           <InputLikeDivider>{' — '}</InputLikeDivider>
-          <InputLike
+          <NumberInputLike
+            value={internalValue[3]}
+            minValue={1}
+            maxValue={31}
+            onKeyDown={handleKeyDown}
             length={2}
             getRootRef={daysEndRef}
             index={3}
             onElementSelect={setFocusedElement}
-            value={internalValue[3]}
+            readOnly={readOnly}
             label={changeEndDayLabel}
             data-testid={endDateTestsProps?.day}
           />
           <InputLikeDivider>.</InputLikeDivider>
-          <InputLike
+          <NumberInputLike
+            value={internalValue[4]}
+            minValue={1}
+            maxValue={12}
+            onKeyDown={handleKeyDown}
             length={2}
             getRootRef={monthsEndRef}
             index={4}
             onElementSelect={setFocusedElement}
-            value={internalValue[4]}
+            readOnly={readOnly}
             label={changeEndMonthLabel}
             data-testid={endDateTestsProps?.month}
           />
           <InputLikeDivider>.</InputLikeDivider>
-          <InputLike
+          <NumberInputLike
+            value={internalValue[5]}
+            minValue={1}
+            maxValue={275750}
+            onKeyDown={handleKeyDown}
             length={4}
             getRootRef={yearsEndRef}
             index={5}
             onElementSelect={setFocusedElement}
-            value={internalValue[5]}
+            readOnly={readOnly}
             label={changeEndYearLabel}
             data-testid={endDateTestsProps?.year}
           />
@@ -456,25 +566,33 @@ export const DateRangeInput = ({
           placement={calendarPlacement}
           onPlacementChange={setCalendarPlacement}
         >
-          <CalendarRange
-            value={value}
-            onChange={onCalendarChange}
-            disablePast={disablePast}
-            disableFuture={disableFuture}
-            shouldDisableDate={shouldDisableDate}
+          <FocusTrap
             onClose={closeCalendar}
-            getRootRef={calendarRef}
-            disablePickers={disablePickers}
-            prevMonthLabel={prevMonthLabel}
-            nextMonthLabel={nextMonthLabel}
-            changeMonthLabel={changeMonthLabel}
-            changeYearLabel={changeYearLabel}
-            changeDayLabel={changeDayLabel}
-            prevMonthIcon={prevMonthIcon}
-            nextMonthIcon={nextMonthIcon}
-            renderDayContent={renderDayContent}
-            {...calendarTestsProps}
-          />
+            disabled={disableFocusTrap ?? !accessible}
+            restoreFocus={restoreFocus ?? Boolean(accessible)}
+            captureEscapeKeyboardEvent={false}
+            mutationObserverOptions={CALENDAR_MUTATION_OBSERVER_OPTIONS}
+          >
+            <CalendarRange
+              value={value}
+              role="dialog"
+              onChange={onCalendarChange}
+              aria-label={calendarLabel}
+              disablePast={disablePast}
+              disableFuture={disableFuture}
+              shouldDisableDate={shouldDisableDate}
+              getRootRef={calendarRef}
+              disablePickers={disablePickers}
+              prevMonthLabel={prevMonthLabel}
+              nextMonthLabel={nextMonthLabel}
+              changeMonthLabel={changeMonthLabel}
+              changeYearLabel={changeYearLabel}
+              prevMonthIcon={prevMonthIcon}
+              nextMonthIcon={nextMonthIcon}
+              renderDayContent={renderDayContent}
+              {...calendarTestsProps}
+            />
+          </FocusTrap>
         </Popper>
       )}
     </FormField>

package/src/components/FocusTrap/FocusTrap.tsx

@@ -3,6 +3,7 @@
 import { type AllHTMLAttributes } from 'react';
 import { useExternRef } from '../../hooks/useExternRef';
 import { useFocusTrap, type UseFocusTrapProps } from '../../hooks/useFocusTrap';
+import { DEFAULT_MUTATION_OBSERVER_OPTIONS } from '../../hooks/useMutationObserver';
 import type { HasComponent, HasRootRef } from '../../types';
 
 export interface FocusTrapProps<T extends HTMLElement = HTMLElement>
@@ -25,6 +26,7 @@ export const FocusTrap = <T extends HTMLElement = HTMLElement>({
   getRootRef,
   children,
   captureEscapeKeyboardEvent = true,
+  mutationObserverOptions = DEFAULT_MUTATION_OBSERVER_OPTIONS,
   ...restProps
 }: FocusTrapProps<T>): React.ReactNode => {
   const ref = useExternRef<T>(getRootRef);
@@ -37,6 +39,7 @@ export const FocusTrap = <T extends HTMLElement = HTMLElement>({
     timeout,
     onClose,
     captureEscapeKeyboardEvent,
+    mutationObserverOptions,
   });
 
   return (

package/src/components/FormItem/FormItemTop/FormItemTop.mdx

@@ -1,4 +1,4 @@
-import { Meta, Title, ArgTypes, Story, Stories, Description } from '@storybook/blocks';
+import { Meta, Title, ArgTypes, Story, Stories, Description } from '@storybook/addon-docs/blocks';
 import { FormItemTop } from './FormItemTop';
 import { FormItemTopAside } from './FormItemTopAside';
 import { FormItemTopLabel } from './FormItemTopLabel';

package/src/components/HorizontalCell/HorizontalCell.tsx

@@ -3,7 +3,7 @@ import { classNames, hasReactNode } from '@vkontakte/vkjs';
 import { mergeStyle } from '../../helpers/mergeStyle';
 import type { CSSCustomProperties, HasRef, HasRootRef, LiteralUnion } from '../../types';
 import { Avatar } from '../Avatar/Avatar';
-import { Tappable, type TappableProps } from '../Tappable/Tappable';
+import { Tappable, type TappableOmitProps } from '../Tappable/Tappable';
 import { Caption } from '../Typography/Caption/Caption';
 import { Footnote } from '../Typography/Footnote/Footnote';
 import { Subhead } from '../Typography/Subhead/Subhead';
@@ -27,7 +27,7 @@ const textAlignClassNames = {
 type HorizontalCellSizes = 's' | 'm' | 'l' | 'xl' | 'auto';
 
 export interface HorizontalCellProps
-  extends Omit<TappableProps, 'size' | 'getRootRef' | 'title' | 'borderRadiusMode'>,
+  extends Omit<TappableOmitProps, 'size' | 'getRootRef' | 'title' | 'borderRadiusMode'>,
     HasRootRef<HTMLDivElement>,
     HasRef<HTMLDivElement> {
   /**

package/src/components/HorizontalScroll/HorizontalCellShowMore/HorizontalCellShowMore.tsx

@@ -2,7 +2,7 @@ import { Icon28ChevronRightCircle } from '@vkontakte/icons';
 import { classNames } from '@vkontakte/vkjs';
 import type { HasRef, HasRootRef, LiteralUnion } from '../../../types';
 import type { ImageBaseSize } from '../../ImageBase/ImageBase';
-import { Tappable, type TappableProps } from '../../Tappable/Tappable';
+import { Tappable, type TappableOmitProps } from '../../Tappable/Tappable';
 import { Subhead, type SubheadProps } from '../../Typography/Subhead/Subhead';
 import styles from './HorizontalCellShowMore.module.css';
 
@@ -12,7 +12,7 @@ const sizeClassNames = {
 };
 
 export interface HorizontalCellShowMoreProps
-  extends Omit<TappableProps, 'getRootRef' | 'size' | 'borderRadiusMode'>,
+  extends Omit<TappableOmitProps, 'getRootRef' | 'size' | 'borderRadiusMode'>,
     HasRef<HTMLElement>,
     HasRootRef<HTMLDivElement> {
   /**

package/src/components/IconButton/IconButton.tsx

@@ -5,7 +5,7 @@ import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { usePlatform } from '../../hooks/usePlatform';
 import { hasAccessibleName } from '../../lib/accessibility';
 import { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';
-import { Tappable, type TappableProps } from '../Tappable/Tappable';
+import { Tappable, type TappableOmitProps } from '../Tappable/Tappable';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
 import styles from './IconButton.module.css';
 
@@ -14,7 +14,7 @@ const sizeYClassNames = {
   compact: styles.sizeYCompact,
 } as const;
 
-export interface IconButtonProps extends TappableProps {
+export interface IconButtonProps extends TappableOmitProps {
   /**
    * Текст кнопки-иконки. Делает ее доступной для ассистивных технологий.
    */

package/src/components/InputLike/InputLike.tsx

@@ -35,9 +35,10 @@ export const InputLike = ({
   length,
   index,
   onElementSelect,
-  onClick,
   onFocus,
   label,
+  readOnly,
+  onKeyDown,
   ...restProps
 }: InputLikeProps) => {
   const handleElementSelect = React.useCallback(
@@ -52,9 +53,9 @@ export const InputLike = ({
     <RootComponent
       Component="span"
       baseClassName={value?.length === length ? styles.host : undefined}
-      tabIndex={0}
-      onClick={onClick}
+      tabIndex={readOnly ? -1 : 0}
       onFocus={callMultiple(onFocus, handleElementSelect)}
+      onKeyDown={readOnly ? undefined : onKeyDown}
       {...restProps}
     >
       {label && <VisuallyHidden>{label}</VisuallyHidden>}

package/src/components/Link/Link.tsx

@@ -1,9 +1,9 @@
 import type { ReactElement } from 'react';
 import { classNames } from '@vkontakte/vkjs';
-import { Tappable, type TappableProps } from '../Tappable/Tappable';
+import { Tappable, type TappableOmitProps } from '../Tappable/Tappable';
 import styles from './Link.module.css';
 
-export interface LinkProps extends TappableProps {
+export interface LinkProps extends TappableOmitProps {
   /**
    * Иконка слева.
    */
@@ -41,6 +41,7 @@ export const Link = ({
       activeMode="opacity"
       hoverMode={styles.hover}
       focusVisibleMode="outside"
+      DefaultComponent="span"
       {...restProps}
       baseClassName={classNames(
         styles.host,

package/src/components/MiniInfoCell/MiniInfoCell.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { Icon16Chevron } from '@vkontakte/icons';
 import { classNames, hasReactNode } from '@vkontakte/vkjs';
 import type { HTMLAttributesWithRootRef } from '../../types';
-import { RootComponent } from '../RootComponent/RootComponent';
 import { Tappable } from '../Tappable/Tappable';
 import { Paragraph } from '../Typography/Paragraph/Paragraph';
 import styles from './MiniInfoCell.module.css';
@@ -88,13 +87,9 @@ export const MiniInfoCell = ({
     </React.Fragment>
   );
 
-  return restProps.onClick ? (
-    <Tappable Component="div" role="button" {...restProps} baseClassName={cellClasses}>
+  return (
+    <Tappable {...restProps} baseClassName={cellClasses}>
       {cellContent}
     </Tappable>
-  ) : (
-    <RootComponent {...restProps} baseClassName={cellClasses}>
-      {cellContent}
-    </RootComponent>
   );
 };

package/src/components/ModalOutsideButton/ModalOutsideButton.tsx

@@ -1,11 +1,11 @@
 'use client';
 
 import * as React from 'react';
-import { Tappable, type TappableProps } from '../Tappable/Tappable';
+import { Tappable, type TappableOmitProps } from '../Tappable/Tappable';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
 import styles from './ModalOutsideButton.module.css';
 
-export interface ModalOutsideButtonProps extends TappableProps {
+export interface ModalOutsideButtonProps extends TappableOmitProps {
   /**
    * Текст для скринридера.
    */

package/src/components/NumberInputLike/NumberInputLike.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { InputLike, type InputLikeProps } from '../InputLike/InputLike';
+/* eslint-disable jsdoc/require-jsdoc */
+
+export interface NumberInputLikeProps extends Omit<InputLikeProps, 'value'> {
+  value?: number | string;
+  maxValue?: number;
+  minValue?: number;
+}
+
+const stringifyValue = (
+  value: NumberInputLikeProps['value'],
+  length: number,
+): string | undefined => {
+  if (value === undefined) {
+    return undefined;
+  }
+  if (typeof value === 'string') {
+    return value;
+  }
+  return String(value).padStart(length, '0');
+};
+
+export const NumberInputLike: React.FC<NumberInputLikeProps> = ({
+  value,
+  length,
+  minValue,
+  maxValue,
+  readOnly,
+  disabled,
+  label,
+  onKeyDown,
+  'aria-label': ariaLabel,
+  ...restProps
+}) => {
+  const stringValue = stringifyValue(value, length);
+  return (
+    <InputLike
+      role="spinbutton"
+      value={stringValue}
+      length={length}
+      aria-valuemin={minValue}
+      aria-valuemax={maxValue}
+      aria-valuenow={value !== undefined ? Number(value) : undefined}
+      aria-valuetext={stringValue}
+      aria-readonly={readOnly}
+      aria-disabled={disabled}
+      aria-label={label}
+      label={label}
+      tabIndex={readOnly ? -1 : 0}
+      onKeyDown={readOnly ? undefined : onKeyDown}
+      {...restProps}
+    />
+  );
+};

package/src/components/Pagination/PaginationPage/PaginationPageButton.tsx

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { type SizeTypeValues } from '../../../lib/adaptivity';
-import { Tappable, type TappableProps } from '../../Tappable/Tappable';
+import { Tappable, type TappableOmitProps } from '../../Tappable/Tappable';
 import { Text } from '../../Typography/Text/Text';
 import { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';
 import type { PaginationProps } from '../Pagination';
@@ -24,7 +24,7 @@ export interface PaginationPageButtonProps extends PaginationPageButtonOpts {
 
 const getTappablePropsFromPaginationPage = (
   opts: PaginationPageButtonOpts,
-): TappableProps & { 'data-page': number } => {
+): TappableOmitProps & { 'data-page': number } => {
   const {
     isCurrent = false,
     getPageLabel,