Skip to content

Commit

Permalink
Mention to avoid navigation in readme
Browse files Browse the repository at this point in the history
  • Loading branch information
andrey-medvedev-vk committed Feb 4, 2025
1 parent 47ec0fe commit e9f3343
Showing 1 changed file with 10 additions and 5 deletions.
15 changes: 10 additions & 5 deletions packages/vkui/src/components/Pagination/Readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -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`.
Expand Down Expand Up @@ -149,8 +159,3 @@ const Example = () => {

<Example />;
```

## Цифровая доступность (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` должны быть одинаковыми.

0 comments on commit e9f3343

Please sign in to comment.