fix(Select): make Select accessible for screen readers #6087

mendrew · 2023-11-09T11:39:59Z

close [Bug][a11y][Select]: Скринридер игнорирует Select #3547

Unit-тесты
e2e-тесты
a11y-ревью (стенд https://pspn9h.csb.app/. Артём уже аппрувил, ~~но я попросил ещё раз на всякий случай~~ ещё раз аппрувнул)
Документация фичи

Описание

Добавляем aria-аттрибуты CustomSelect'у, следуя паттерну Combobox.
Как для обычного режима селекта, так и для searchable режима, когда в инпут можно вводить текст для фильтрации опций.

Изменения

добавлены aria-аттрибуты для CustomSelect, следуя паттерну Combobox
исправлена работа onBlur/onFocus пропов. Начиная с react17 react больше не реагирует на dispatch кастомных событий blur/focus и мы должны создавать события focusin focusout.
вместо попеременного использования Input и SelectMimicry мы теперь всегда используем внутренний компонент CustomSelectInput. Это позволило избавиться от множества проблем и блокеров для поддержки доступности.
- ушла проблема с потерей фокуса при выборе опции в режиме searchable
- при фокусе на селекте в режиме searchable сразу доступен ввод с клавиатуры для поиска опций, причём скрин ридер правильно зачитывает информацию о селект и выбранной опции если она есть, либо плейсхолдер.
- стал из коробки работать фокус на селекте при клике на связанный с селектом лэйбл.
- для связи с лэйблом достаточно просто задать id селекта в htmlFor аттрибуте лэйбла. Без инпута для этого надо было бы ещё и прокидывать связь через aria-labelledby.
инпут имеет свойство autoComplete="off", потому что хром начинает предлагать свои варианты для заполнения инпута и мешает взаимодействовать с открытым списком.
новый компонент (CustomSelectInput) был добавлен ввиду того, что невозможно было переиспользовать имеющийся Input или SelectMimicry без внесений лишних изменений. Тем не менее CustomSelectInput продолжает внутри себя использовать FormField и заимствует часть свойство, имеющихся у Input и SelectMimicry.
В данный момент я не собираюсь переделывать SelectMimicry в рамках этого PR, но не против попробовать сделать это в будущем.
после тестирования селекта специалистом по доступности, было принято решение убрать обёртку компонентом label из CustomSelect и NativeSelect, потому что это заставляет скринридер зачитывать текст дважды при навигации с помощью стрелок, если у селекта выбранна опция. Не всегда, лишь в некоторых версиях Хром, но поведение стабильное.
тем не менее мы оставили поведения подобное label с помощью дополнительного кода в CustomSelect. В NativeSelect дополнительного кода не требуется, потому что нативный селект растянут и лежит поверх визуальных элементов и гарантирует фокус на селекте при клике по любой области внутри компонента NativeSelect.

исправлено прыгающее поведение фокуса на опции при навигации с клавиатуры, если на одну из опций наведён курсор.

VKUI/packages/vkui/src/components/CustomSelect/CustomSelect.tsx

Lines 677 to 685 in 9bae73f

    
           onMouseDown: handleOptionDown, 
        
           // Используем `onMouseMove` вместо `onMouseEnter/onMouseOver`. 
        
           // Потому что если при навигации с клавиатуры курсор наведён на 
        
           // список, то при первом автоматическом скролле списка вызывается событие MouseOver/MouseEnter 
        
           // обработчик которого фокусирует опцию под курсором, хотя при навигация с клавиатуры пользователь мог уйти дальше по списку, это путает. 
        
           // Причём координаты события меняются на пару пикселей по сравнению с прошлым вызовом, 
        
           // а значит нельзя на них опираться, чтобы запретить обработку такого события. 
        
           // C mousemove такой проблемы нет, что позволяет реализовать поведение при наведении с клавиатуры и при наведении мышью идентично нативному селекту. 
        
           onMouseMove: focusOptionOnMouseMove,

в документацию по Select/CustomSelect добавлены разделы про доступность с рекомендацией использования label и связывания label с селект.
обновлены примеры документации, FormItem лэйблы теперь связаны с селектами, для демонстрации предпочтительного использования.

github-actions · 2023-11-09T12:08:49Z

size-limit report 📦

Path	Size
JS	344.68 KB (+0.66% 🔺)
JS (gzip)	105.27 KB (+0.64% 🔺)
JS (brotli)	87.05 KB (+0.69% 🔺)
JS import Div (tree shaking)	2.71 KB (0%)
CSS	259.25 KB (+1.09% 🔺)
CSS (gzip)	33.87 KB (+0.72% 🔺)
CSS (brotli)	27.53 KB (+0.86% 🔺)

github-actions · 2023-11-09T12:12:20Z

e2e tests

Playwright Report

github-actions · 2023-11-09T12:12:40Z

👀 Docs deployed

✅ Styleguide
✅ Storybook

Commit 952e1ec

codesandbox-ci · 2023-11-09T13:37:16Z

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.

Latest deployment of this branch, based on commit 952e1ec:

Sandbox	Source
VKUI TypeScript	Configuration

codecov · 2023-11-09T13:37:44Z

Codecov Report

Attention: 20 lines in your changes are missing coverage. Please review.

Comparison is base (9d47c34) 79.13% compared to head (952e1ec) 79.17%.

Files	Patch %	Lines
.../vkui/src/components/CustomSelect/CustomSelect.tsx	77.38%	19 Missing ⚠️
.../src/components/CustomSelect/CustomSelectInput.tsx	96.87%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #6087      +/-   ##
==========================================
+ Coverage   79.13%   79.17%   +0.04%     
==========================================
  Files         312      313       +1     
  Lines        9957    10018      +61     
  Branches     3332     3352      +20     
==========================================
+ Hits         7879     7932      +53     
- Misses       2078     2086       +8

Flag	Coverage Δ
unittests	`79.17% <83.60%> (+0.04%)`	⬆️

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.

packages/vkui/src/components/CustomSelect/CustomSelect.test.tsx

packages/vkui/src/components/CustomSelect/CustomSelect.tsx

packages/vkui/src/components/CustomSelect/CustomSelectClearButton.tsx

packages/vkui/src/components/CustomSelect/CustomSelectInput.module.css

packages/vkui/src/components/CustomSelect/CustomSelectInput.tsx

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

eugpoloz

Андрей, ты 🚀 Огромная работа проделана!

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

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

packages/vkui/src/components/CustomSelect/CustomSelect.test.tsx

packages/vkui/src/components/CustomSelect/CustomSelect.tsx

inomdzhon

❤️‍🔥❤️‍🔥❤️‍🔥

packages/vkui/src/components/NativeSelect/NativeSelect.tsx

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

packages/vkui/src/components/CustomSelect/CustomSelect.tsx

packages/vkui/src/components/CustomSelect/CustomSelectInput.module.css

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

packages/vkui/src/components/CustomSelect/CustomSelect.tsx

packages/vkui/src/components/CustomSelect/CustomSelectInput.module.css

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

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

packages/vkui/src/components/CustomSelect/CustomSelectInput.module.css

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

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

Group aria-attributes Improve focus on SelectMimicry in searchable mode Improve FromItem to use together with Select/CustomSelect Update doc for FormItem to recommend to use more attributes to correctly connect FormItem with Select Use a11y attributes in CustomSelect examples Update Select and NativeSelect examples to include a11y Update links in the FormItem doc Add a11y doc to Select and CustomSelect

We have it in the Text component

We don't use anything from RootComponent

mendrew · 2023-11-23T13:01:48Z

Спасибо за ревью! 👍
@eugpoloz изменения после твоего последнего ревью: 500b902...952e1ec

mendrew · 2023-11-23T13:02:01Z

Спасибо за ревью! 💪
@inomdzhon изменения после твоего последнего ревью: d416279...952e1ec

mendrew · 2023-11-23T13:02:05Z

Спасибо за ревью! 💪 ✍️
@SevereCloud постарался тут собрать все коммиты по твоим комментариям: fcf39dc...952e1ec

…ders (#6087) - close #3547 Описание Добавляем `aria`-аттрибуты `CustomSelect`'у, следуя паттерну [Combobox](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/). Как для обычного режима селекта, так и для `searchable` режима, когда в инпут можно вводить текст для фильтрации опций. Изменения - добавлены aria-аттрибуты для CustomSelect, следуя паттерну [Combobox](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) - исправлена работа `onBlur/onFocus` пропов. Начиная с react17 react больше не реагирует на dispatch кастомных событий `blur/focus` и мы должны создавать события `focusin` `focusout`. - вместо попеременного использования `Input` и `SelectMimicry` мы теперь всегда используем внутренний компонент `CustomSelectInput`. Это позволило избавиться от множества проблем и блокеров для поддержки доступности. - ушла проблема с потерей фокуса при выборе опции в режиме `searchable` - при фокусе на селекте в режиме `searchable` сразу доступен ввод с клавиатуры для поиска опций, причём скрин ридер правильно зачитывает информацию о селект и выбранной опции если она есть, либо плейсхолдер. - стал из коробки работать фокус на селекте при клике на связанный с селектом лэйбл. - для связи с лэйблом достаточно просто задать `id` селекта в `htmlFor` аттрибуте лэйбла. Без инпута для этого надо было бы ещё и прокидывать связь через `aria-labelledby`. - инпут имеет свойство `autoComplete="off"`, потому что хром начинает предлагать свои варианты для заполнения инпута и мешает взаимодействовать с открытым списком. - новый компонент (`CustomSelectInput`) был добавлен ввиду того, что невозможно было переиспользовать имеющийся `Input` или `SelectMimicry` без внесений лишних изменений. Тем не менее `CustomSelectInput` продолжает внутри себя использовать `FormField` и заимствует часть свойство, имеющихся у `Input` и `SelectMimicry`. В данный момент я не собираюсь переделывать `SelectMimicry` в рамках этого PR, но не против попробовать сделать это в будущем. - после тестирования селекта специалистом по доступности, было принято решение убрать обёртку компонентом `label` из `CustomSelect` и `NativeSelect`, потому что это заставляет скринридер зачитывать текст дважды при навигации с помощью стрелок, если у селекта выбранна опция. Не всегда, лишь в некоторых версиях Хром, но поведение стабильное. - тем не менее мы оставили поведения подобное `label` с помощью дополнительного кода в CustomSelect. В NativeSelect дополнительного кода не требуется, потому что нативный селект растянут и лежит поверх визуальных элементов и гарантирует фокус на селекте при клике по любой области внутри компонента NativeSelect. - исправлено прыгающее поведение фокуса на опции при навигации с клавиатуры, если на одну из опций наведён курсор. https://github.com/VKCOM/VKUI/blob/9bae73ff784eaf7f6de096e8b7f56485f2e9cb50/packages/vkui/src/components/CustomSelect/CustomSelect.tsx#L677-L685 - в документацию по `Select/CustomSelect` добавлены разделы про доступность с рекомендацией использования label и связывания label с селект. - обновлены примеры документации, FormItem лэйблы теперь связаны с селектами, для демонстрации предпочтительного использования.

…7816) На touch устройстве не работает фокус на input при клике в зоне инпута ближе к стрелочке. Фокус есть на обертке, но сам инпут фокуса не имеет и клавиатура не появляется, как при клике на сам инпут, ближе к левому краю. Воспроизводится в симуляторе Iphone и на реальном устройстве. Дело в том, что не во всей видимой области инпута событие клика принимает input, и чтобы это победить мы программно вызываем фокус на инпуте. Изначально, в #6087, а конкретно в 0f45bb9 это было реализовано с помощью отложенного вызова фокуса для кнопки очистки, а потом функция с отложенным фокусом перекочевала и на остальной новый код. Объяснялось это тем, что без таймаута фокус просто не работал при клике на clear button. Финальный код был сложнее, чем тот, когда этот отложенный фокус был добавлен, и он уже мог работать без отложенного вызова фокуса. Протестировал в браузере и в симуляторе Iphone.

) На touch устройстве не работает фокус на input при клике в зоне инпута ближе к стрелочке. Фокус есть на обертке, но сам инпут фокуса не имеет и клавиатура не появляется, как при клике на сам инпут, ближе к левому краю. Воспроизводится в симуляторе Iphone и на реальном устройстве. Дело в том, что не во всей видимой области инпута событие клика принимает input, и чтобы это победить мы программно вызываем фокус на инпуте. Изначально, в #6087, а конкретно в 0f45bb9 это было реализовано с помощью отложенного вызова фокуса для кнопки очистки, а потом функция с отложенным фокусом перекочевала и на остальной новый код. Объяснялось это тем, что без таймаута фокус просто не работал при клике на clear button. Финальный код был сложнее, чем тот, когда этот отложенный фокус был добавлен, и он уже мог работать без отложенного вызова фокуса. Протестировал в браузере и в симуляторе Iphone.

…7816) На touch устройстве не работает фокус на input при клике в зоне инпута ближе к стрелочке. Фокус есть на обертке, но сам инпут фокуса не имеет и клавиатура не появляется, как при клике на сам инпут, ближе к левому краю. Воспроизводится в симуляторе Iphone и на реальном устройстве. Дело в том, что не во всей видимой области инпута событие клика принимает input, и чтобы это победить мы программно вызываем фокус на инпуте. Изначально, в #6087, а конкретно в 0f45bb9 это было реализовано с помощью отложенного вызова фокуса для кнопки очистки, а потом функция с отложенным фокусом перекочевала и на остальной новый код. Объяснялось это тем, что без таймаута фокус просто не работал при клике на clear button. Финальный код был сложнее, чем тот, когда этот отложенный фокус был добавлен, и он уже мог работать без отложенного вызова фокуса. Протестировал в браузере и в симуляторе Iphone.

…7816) (#7825) На touch устройстве не работает фокус на input при клике в зоне инпута ближе к стрелочке. Фокус есть на обертке, но сам инпут фокуса не имеет и клавиатура не появляется, как при клике на сам инпут, ближе к левому краю. Воспроизводится в симуляторе Iphone и на реальном устройстве. Дело в том, что не во всей видимой области инпута событие клика принимает input, и чтобы это победить мы программно вызываем фокус на инпуте. Изначально, в #6087, а конкретно в 0f45bb9 это было реализовано с помощью отложенного вызова фокуса для кнопки очистки, а потом функция с отложенным фокусом перекочевала и на остальной новый код. Объяснялось это тем, что без таймаута фокус просто не работал при клике на clear button. Финальный код был сложнее, чем тот, когда этот отложенный фокус был добавлен, и он уже мог работать без отложенного вызова фокуса. Протестировал в браузере и в симуляторе Iphone.

mendrew removed the ci:cherry-pick:patch Автоматизация: PR продублируется в ветку последнего минорного релиза для выпуска патча label Nov 9, 2023

mendrew force-pushed the mendrew/fix/CustomSelect/3547/a11y-for-custom-select branch from eaea297 to 28897ff Compare November 9, 2023 12:16

github-actions bot added the ci:cherry-pick:patch Автоматизация: PR продублируется в ветку последнего минорного релиза для выпуска патча label Nov 9, 2023

mendrew removed the ci:cherry-pick:patch Автоматизация: PR продублируется в ветку последнего минорного релиза для выпуска патча label Nov 9, 2023

github-actions bot added the ci:cherry-pick:patch Автоматизация: PR продублируется в ветку последнего минорного релиза для выпуска патча label Nov 10, 2023

mendrew force-pushed the mendrew/fix/CustomSelect/3547/a11y-for-custom-select branch from 4ff2e40 to ca60b21 Compare November 21, 2023 17:37

mendrew commented Nov 21, 2023

View reviewed changes

mendrew removed the ci:cherry-pick:patch Автоматизация: PR продублируется в ветку последнего минорного релиза для выпуска патча label Nov 21, 2023

mendrew marked this pull request as ready for review November 21, 2023 17:47

mendrew requested a review from a team as a code owner November 21, 2023 17:47

github-actions bot added the ci:cherry-pick:patch Автоматизация: PR продублируется в ветку последнего минорного релиза для выпуска патча label Nov 21, 2023

mendrew removed the ci:cherry-pick:patch Автоматизация: PR продублируется в ветку последнего минорного релиза для выпуска патча label Nov 21, 2023

eugpoloz reviewed Nov 22, 2023

View reviewed changes

packages/vkui/src/components/Select/Readme.md Outdated Show resolved Hide resolved

github-actions bot added the ci:cherry-pick:patch Автоматизация: PR продублируется в ветку последнего минорного релиза для выпуска патча label Nov 22, 2023

eugpoloz reviewed Nov 22, 2023

View reviewed changes

mendrew requested review from eugpoloz and a team November 22, 2023 12:01

inomdzhon reviewed Nov 22, 2023

View reviewed changes

SevereCloud reviewed Nov 23, 2023

View reviewed changes

packages/vkui/src/components/CustomSelect/Readme.md Show resolved Hide resolved

mendrew added 3 commits November 23, 2023 15:03

Fix lint issue with ts-expect-error

f9e47ff

Fix simple a11y errors

2a94eba

mendrew added 5 commits November 23, 2023 15:03

Remove useless typography styles

6faae2b

We have it in the Text component

Set input type="text"

c563969

Use div tag instead of RootComponent

ab7824c

We don't use anything from RootComponent

Don't use useTimeout as it returns new object every render

da699ec

Make Input readonly while it's disabled in async fetching

fcf39dc

mendrew force-pushed the mendrew/fix/CustomSelect/3547/a11y-for-custom-select branch from 1d04e7d to fcf39dc Compare November 23, 2023 12:04

mendrew added 5 commits November 23, 2023 15:30

Trying not to use select in documentation

b86b264

Remove useless Fragment from the doc example

7c5746b

Fix typos

ca262be

Wrap some specific doc words into quotes

80c5780

Wrap select word into quotes

952e1ec

mendrew requested review from SevereCloud, inomdzhon and eugpoloz and removed request for eugpoloz November 23, 2023 13:02

inomdzhon approved these changes Nov 23, 2023

View reviewed changes

SevereCloud approved these changes Nov 23, 2023

View reviewed changes

mendrew removed the ci:cherry-pick:patch Автоматизация: PR продублируется в ветку последнего минорного релиза для выпуска патча label Nov 23, 2023

mendrew merged commit ec3a56d into master Nov 23, 2023

mendrew deleted the mendrew/fix/CustomSelect/3547/a11y-for-custom-select branch November 23, 2023 15:08

inomdzhon mentioned this pull request Jan 31, 2024

[Bug]: Не работает клик по NativeSelect на Android #5683

Closed

andrey-medvedev-vk mentioned this pull request Oct 23, 2024

fix(CustomSelect): Fix input focus on arrow click on touch device #7816

Merged

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(Select): make Select accessible for screen readers #6087

fix(Select): make Select accessible for screen readers #6087

mendrew commented Nov 9, 2023 •

edited

Loading

github-actions bot commented Nov 9, 2023 •

edited

Loading

github-actions bot commented Nov 9, 2023 •

edited

Loading

github-actions bot commented Nov 9, 2023 •

edited

Loading

codesandbox-ci bot commented Nov 9, 2023 •

edited

Loading

codecov bot commented Nov 9, 2023 •

edited

Loading

eugpoloz left a comment

inomdzhon left a comment

mendrew commented Nov 23, 2023 •

edited

Loading

mendrew commented Nov 23, 2023 •

edited

Loading

mendrew commented Nov 23, 2023 •

edited

Loading

	onMouseDown: handleOptionDown,
	// Используем `onMouseMove` вместо `onMouseEnter/onMouseOver`.
	// Потому что если при навигации с клавиатуры курсор наведён на
	// список, то при первом автоматическом скролле списка вызывается событие MouseOver/MouseEnter
	// обработчик которого фокусирует опцию под курсором, хотя при навигация с клавиатуры пользователь мог уйти дальше по списку, это путает.
	// Причём координаты события меняются на пару пикселей по сравнению с прошлым вызовом,
	// а значит нельзя на них опираться, чтобы запретить обработку такого события.
	// C mousemove такой проблемы нет, что позволяет реализовать поведение при наведении с клавиатуры и при наведении мышью идентично нативному селекту.
	onMouseMove: focusOptionOnMouseMove,

fix(Select): make Select accessible for screen readers #6087

fix(Select): make Select accessible for screen readers #6087

Conversation

mendrew commented Nov 9, 2023 • edited Loading

Описание

Изменения

github-actions bot commented Nov 9, 2023 • edited Loading

size-limit report 📦

github-actions bot commented Nov 9, 2023 • edited Loading

e2e tests

github-actions bot commented Nov 9, 2023 • edited Loading

👀 Docs deployed

codesandbox-ci bot commented Nov 9, 2023 • edited Loading

codecov bot commented Nov 9, 2023 • edited Loading

Codecov Report

eugpoloz left a comment

Choose a reason for hiding this comment

inomdzhon left a comment

Choose a reason for hiding this comment

mendrew commented Nov 23, 2023 • edited Loading

mendrew commented Nov 23, 2023 • edited Loading

mendrew commented Nov 23, 2023 • edited Loading

mendrew commented Nov 9, 2023 •

edited

Loading

github-actions bot commented Nov 9, 2023 •

edited

Loading

github-actions bot commented Nov 9, 2023 •

edited

Loading

github-actions bot commented Nov 9, 2023 •

edited

Loading

codesandbox-ci bot commented Nov 9, 2023 •

edited

Loading

codecov bot commented Nov 9, 2023 •

edited

Loading

mendrew commented Nov 23, 2023 •

edited

Loading

mendrew commented Nov 23, 2023 •

edited

Loading

mendrew commented Nov 23, 2023 •

edited

Loading