fix(Pagination):Update a11y labels (#8237)

На основе обратной связи из #4737:
- оставляем только слово "Страницы" как значение по умолчанию у свойства `navigationLabel` (заголовок, `label` всего `Pagination`)
- убираем значение по умолчанию из свойства-функции `getPageLabel`, которое рендерило aria-label для кнопок пагинации. Так как дополнительный текст для кнопок создаёт избыточную информацию. Возможно, что стоит задеприкейтить эту функцию. Но пока оставлю.
- связываем контенер `nav` с заголовком компонента через `aria-labelledby`, чтобы упростить выполнение условия спецификации, в котором говорится, что при наличии более одного `nav` элемента на странице, каждый элемент должен иметь `aria-label`. Теперь для выполнения этого условия достаточно будет проставить соответстующий `navigationLabel`.
- добавили раздел по доступности где перечислены все эти тонкости.
# Conflicts:
#	packages/vkui/src/components/Pagination/Pagination.tsx

packages/vkui/src/components/Pagination/Pagination.tsx

@@ -17,7 +17,6 @@ import {
   PaginationPageButton,
 } from './PaginationPage/PaginationPageButton';
 import { PaginationPageEllipsis } from './PaginationPage/PaginationPageEllipsis';
-import { getPageLabelDefault } from './utils';
 import styles from './Pagination.module.css';
 
 export interface PaginationProps extends Omit<HTMLAttributesWithRootRef<HTMLElement>, 'onChange'> {
@@ -76,6 +75,12 @@ export interface PaginationProps extends Omit<HTMLAttributesWithRootRef<HTMLElem
   nextButtonLabel?: string;
   /**
    * [a11y] Функция для переопределения и/или локализации метки кнопки страницы.
+   *
+   * > Note: По возможности лучше не использовать,
+   * так как компонент и так проставляет номер страницы в разметку,
+   * что достаточно для пользователей скринридеров.
+   * Дополнительная информация скорее будет избыточна,
+   * так как будет зачитываться для каждой кнопки при перемещении по списку.
    */
   getPageLabel?: (isCurrent: boolean) => string;
   onChange?: (page: number, event: React.MouseEvent<HTMLElement>) => void;
@@ -117,8 +122,8 @@ export const Pagination = ({
   prevButtonCaption = 'Назад',
   nextButtonCaption = 'Вперёд',
   navigationButtonsStyle = 'icon',
-  getPageLabel = getPageLabelDefault,
-  navigationLabel = 'Навигация по страницам',
+  getPageLabel,
+  navigationLabel = 'Страницы',
   navigationLabelComponent = 'h2',
   prevButtonLabel = 'Перейти на предыдущую страницу',
   nextButtonLabel = 'Перейти на следующую страницу',
@@ -204,9 +209,18 @@ export const Pagination = ({
     [currentPage, disabled, getPageLabel, handleClick, renderPageButton, sizeY, pageButtonTestId],
   );
 
+  const navigationLabelId = React.useId();
+
   return (
-    <RootComponent Component="nav" role="navigation" {...resetProps}>
-      <VisuallyHidden Component={navigationLabelComponent}>{navigationLabel}</VisuallyHidden>
+    <RootComponent
+      Component="nav"
+      role="navigation"
+      aria-labelledby={navigationLabelId}
+      {...resetProps}
+    >
+      <VisuallyHidden id={navigationLabelId} Component={navigationLabelComponent}>
+        {navigationLabel}
+      </VisuallyHidden>
       <ul className={styles.list}>
         <li className={styles.prevButtonContainer}>
           <PaginationNavigationButton

packages/vkui/src/components/Pagination/PaginationPage/PaginationPageButton.tsx

@@ -5,7 +5,6 @@ import { Tappable, type TappableProps } from '../../Tappable/Tappable';
 import { Text } from '../../Typography/Text/Text';
 import { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';
 import type { PaginationProps } from '../Pagination';
-import { getPageLabelDefault } from '../utils';
 import { getPaginationPageClassNames } from './usePaginationPageClasses';
 import styles from './PaginationPage.module.css';
 
@@ -26,7 +25,7 @@ const getTappablePropsFromPaginationPage = (
 ): TappableProps & { 'data-page': number } => {
   const {
     isCurrent = false,
-    getPageLabel = getPageLabelDefault,
+    getPageLabel,
     children,
     className,
     disabled,
@@ -40,6 +39,7 @@ const getTappablePropsFromPaginationPage = (
     sizeY,
   });
 
+  const pageLabel = getPageLabel?.(isCurrent);
   return {
     'className': classNames(pageClassNames, className),
     'activeMode': styles.stateActive,
@@ -49,7 +49,7 @@ const getTappablePropsFromPaginationPage = (
     'disabled': disabled,
     'children': (
       <Text normalize={false}>
-        <VisuallyHidden>{getPageLabel(isCurrent)} </VisuallyHidden>
+        {pageLabel && <VisuallyHidden>{pageLabel} </VisuallyHidden>}
         {children}
       </Text>
     ),

packages/vkui/src/components/Pagination/Readme.md

@@ -6,6 +6,16 @@
 
 > При ширине `< 380px` рекомендуется отключать `siblingCount` передав в него значение `0`.
 
+## Цифровая доступность (a11y)
+
+В вёрстке `Pagination` используется HTML тэг `nav`.
+
+По спецификации, если на странице несколько `nav` или элементов с ролью `navigation`, каждому стоит задать своё уникальное имя с помощью `aria-label` или `aria-labelledby` (см. [role navigation](https://doka.guide/a11y/role-navigation/#kak-pishetsya)).
+
+Так как `Pagination` уже связан с меткой блока навигации, который задаётся через свойство `navigationLabel`, с помощью `aria-labelledby`, то для каждого `Pagination` достаточно задать свой `navigationLabel`. Если `Pagination` элементы содержат одинаковые ссылки, то и `navigationLabel` должны быть одинаковыми.
+
+В `navigationLabel` стоит избегать слова `Навигация` или слов близких по значению, так как скринридер и так зачитывает это видя тег `nav` или `role="navigation"`. Лучше ограничиться чем-то вроде `Страницы`.
+
 ## `usePagination`
 
 Для полной кастомизации можно использовать хук `usePagination()`. Возвращает массив типа `[1, 2, 3, 4, 5, 'end-ellipsis', 8]`. Принимает почти те же параметры, что и `Pagination`.