fix(Button): improve a11y with loading state #8778
Conversation
e2e tests |
👀 Docs deployed
📦 Package ✅yarn add @vkontakte/vkui@https://vkui-screenshot.hb.bizmrg.com/pull/8778/5b41d1246f5dcd2447b6ec1cba6675f5b2a8a369/pkg/@vkontakte/vkui/_pkg.tgzCommit 5b41d12 |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #8778 +/- ##
=======================================
Coverage 95.96% 95.96%
=======================================
Files 419 419
Lines 12141 12150 +9
Branches 4033 4037 +4
=======================================
+ Hits 11651 11660 +9
Misses 490 490
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
| return ( | ||
| <Tappable | ||
| hoverMode={styles.hover} | ||
| activeMode={styles.active} | ||
| Component={restProps.href ? 'a' : 'button'} | ||
| Component={href ? 'a' : 'button'} |
There was a problem hiding this comment.
disabled режим для тега a не так прост как кажтся на первый взгляд. Чтобы все работало правильно, необходимо учесть следующее:
- Тег
aне поддерживает атрибут disabled, поэтому используемaria-disabled - Тег
aс атрибутом href все еще кликабельный, поэтому ему нужно перестать передавать href - Тег
aбезhrefне является ссылкой, поэтому добавляемrole="link".
https://w3c.github.io/html-aria/#example-communicate-a-disabled-link-with-aria
Компонент Tappable под капотом уже умеет обрабатывать href и disabled, поэтому все что нам нужно, это при href не пробрасывать свойство Component
| Component={href ? 'a' : 'button'} | |
| {...(href === undefined && { Component: 'button' })} |
|
Привет, Спасибо за PR Это изменение решили делать в Пока можно править замечания по ревью |
Описание
Задаем корректные атрибуты для кнопки в состоянии
loadingдля улучшения a11y.Более явное различие между нативной кнопкой и ссылкой для скринридеров.
Release notes
href, а также в состоянииloading