Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(Pagination):Update a11y labels #8237

Merged
merged 3 commits into from
Feb 5, 2025

Conversation

andrey-medvedev-vk
Copy link
Contributor

@andrey-medvedev-vk andrey-medvedev-vk commented Feb 4, 2025


  • Release notes

Описание

На основе обратной связи из #4737:

  • оставляем только слово "Страницы" как значение по умолчанию у свойства navigationLabel (заголовок, label всего Pagination)
  • убираем значение по умолчанию из свойства-функции getPageLabel, которое рендерило aria-label для кнопок пагинации. Так как дополнительный текст для кнопок создаёт избыточную информацию. Возможно, что стоит задеприкейтить эту функцию. Но пока оставлю.
  • связываем контенер nav с заголовком компонента через aria-labelledby, чтобы упростить выполнение условия спецификации, в котором говорится, что при наличии более одного nav элемента на странице, каждый элемент должен иметь aria-label. Теперь для выполнения этого условия достаточно будет проставить соответстующий navigationLabel.
  • добавили раздел по доступности где перечислены все эти тонкости.

Release notes

Исправления

  • Pagination: исправлены лэйблы заголовка и кнопок навигации, создающий избыточную информацию для пользователей скринридеров.

@andrey-medvedev-vk andrey-medvedev-vk self-assigned this Feb 4, 2025
@github-actions github-actions bot added the patch Автоматизация: PR продублируется в ветку последнего минорного релиза для выпуска патча label Feb 4, 2025
Copy link

codesandbox-ci bot commented Feb 4, 2025

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Copy link
Contributor

github-actions bot commented Feb 4, 2025

size-limit report 📦

Path Size
JS 394.85 KB (-0.02% 🔽)
JS (gzip) 119.74 KB (-0.02% 🔽)
JS (brotli) 98.35 KB (-0.03% 🔽)
JS import Div (tree shaking) 1.56 KB (0%)
CSS 347.6 KB (0%)
CSS (gzip) 43.03 KB (0%)
CSS (brotli) 34.33 KB (0%)

Copy link
Contributor

github-actions bot commented Feb 4, 2025

e2e tests

Playwright Report

Copy link

codecov bot commented Feb 4, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 95.53%. Comparing base (637a7b5) to head (e9f3343).
Report is 4 commits behind head on master.

Additional details and impacted files
@@           Coverage Diff           @@
##           master    #8237   +/-   ##
=======================================
  Coverage   95.52%   95.53%           
=======================================
  Files         405      404    -1     
  Lines       11555    11552    -3     
  Branches     3836     3835    -1     
=======================================
- Hits        11038    11036    -2     
+ Misses        517      516    -1     
Flag Coverage Δ
unittests 95.53% <100.00%> (+<0.01%) ⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

Copy link
Contributor

github-actions bot commented Feb 4, 2025

👀 Docs deployed

Commit e9f3343

@andrey-medvedev-vk andrey-medvedev-vk removed their assignment Feb 4, 2025
@andrey-medvedev-vk andrey-medvedev-vk marked this pull request as ready for review February 4, 2025 15:09
@andrey-medvedev-vk andrey-medvedev-vk requested a review from a team as a code owner February 4, 2025 15:09
Copy link
Contributor

@inomdzhon inomdzhon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👏

@andrey-medvedev-vk andrey-medvedev-vk merged commit 4f2d7c0 into master Feb 5, 2025
55 checks passed
@andrey-medvedev-vk andrey-medvedev-vk deleted the mendrew/4737/Pagination/fix-labels branch February 5, 2025 09:36
@vkcom-publisher
Copy link
Contributor

❌ Patch

Не удалось автоматически применить исправление на ветке 7.1-stable.

Дальнейшие действия выполняют контрибьютеры из группы @VKCOM/vkui-core

Чтобы изменение попало в ветку 7.1-stable, выполните следующие действия:

  1. Создайте новую ветку от 7.1-stable и примените изменения используя cherry-pick
git stash # опционально
git fetch origin 7.1-stable
git checkout -b patch/pr8237 origin/7.1-stable

git cherry-pick --no-commit 4f2d7c01f9110b92ff9848b3940aa6dad8eb4eea
git checkout HEAD **/__image_snapshots__/*.png
git diff --quiet HEAD || git commit --no-verify --no-edit
  1. Исправьте конфликты, следуя инструкциям из терминала
  2. Отправьте ветку на GitHub и создайте новый PR с веткой 7.1-stable (установка лейбла не требуется!)
git push --set-upstream origin patch/pr8237
gh pr create --base 7.1-stable --title "patch: pr8237" --body "- patch #8237"

andrey-medvedev-vk added a commit that referenced this pull request Feb 5, 2025
На основе обратной связи из #4737:
- оставляем только слово "Страницы" как значение по умолчанию у свойства `navigationLabel` (заголовок, `label` всего `Pagination`)
- убираем значение по умолчанию из свойства-функции `getPageLabel`, которое рендерило aria-label для кнопок пагинации. Так как дополнительный текст для кнопок создаёт избыточную информацию. Возможно, что стоит задеприкейтить эту функцию. Но пока оставлю.
- связываем контенер `nav` с заголовком компонента через `aria-labelledby`, чтобы упростить выполнение условия спецификации, в котором говорится, что при наличии более одного `nav` элемента на странице, каждый элемент должен иметь `aria-label`. Теперь для выполнения этого условия достаточно будет проставить соответстующий `navigationLabel`.
- добавили раздел по доступности где перечислены все эти тонкости.
# Conflicts:
#	packages/vkui/src/components/Pagination/Pagination.tsx
@andrey-medvedev-vk andrey-medvedev-vk mentioned this pull request Feb 5, 2025
andrey-medvedev-vk added a commit that referenced this pull request Feb 5, 2025
На основе обратной связи из #4737:
- оставляем только слово "Страницы" как значение по умолчанию у свойства `navigationLabel` (заголовок, `label` всего `Pagination`)
- убираем значение по умолчанию из свойства-функции `getPageLabel`, которое рендерило aria-label для кнопок пагинации. Так как дополнительный текст для кнопок создаёт избыточную информацию. Возможно, что стоит задеприкейтить эту функцию. Но пока оставлю.
- связываем контенер `nav` с заголовком компонента через `aria-labelledby`, чтобы упростить выполнение условия спецификации, в котором говорится, что при наличии более одного `nav` элемента на странице, каждый элемент должен иметь `aria-label`. Теперь для выполнения этого условия достаточно будет проставить соответстующий `navigationLabel`.
- добавили раздел по доступности где перечислены все эти тонкости.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
patch Автоматизация: PR продублируется в ветку последнего минорного релиза для выпуска патча
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug][Pagination]: Изменить текстовые метки для скринридера
4 participants