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.

Sign up for GitHub

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

Jump to bottom

[Docs][a11y]: Исправить примеры интерактивных компонентов в Storybook #4931

Open
eugpoloz opened this issue Apr 25, 2023 · 0 comments · May be fixed by #8299
Open

[Docs][a11y]: Исправить примеры интерактивных компонентов в Storybook #4931

eugpoloz opened this issue Apr 25, 2023 · 0 comments · May be fixed by #8299
Assignees
@andrey-medvedev-vk
Labels
a11y:audit Проблемы, найденные в ходе аудита невизуальной доступности VKUI a11y Доступность (цифровая) cmp:checkbox cmp:form-field cmp:input cmp:switch cmp:textarea docs
Milestone
v7.2.0

Comments

@eugpoloz
Copy link
Contributor

Из аудита невизуальной доступности:

Checkbox:

Этот флажок без текста. Возможно он и должен быть без текста, но для скринридера текст нужен обязательно какой-то, соотносящийся с иконкой.

FormField:

Для скринридера здесь отображается однострочное текстовое поле без лейбла и две неподписанные кнопки. Выглядит как что-то недоступное, но может смысл компонента в минимализме, или я не нашел настройки для разных типов полей?

Input:

Однострочное текстовое поле без лейбла

Switch:

Флажок есть, но самого текста лейбла нет. Так и должно быть? Просто не наглядно как-то.

Textarea:

Многострочное текстовое поле без лейбла

Как исправить:
Подписать все поля и флажки.
@eugpoloz eugpoloz added docs cmp:switch cmp:input cmp:checkbox cmp:textarea cmp:form-field a11y Доступность (цифровая) a11y:audit Проблемы, найденные в ходе аудита невизуальной доступности VKUI labels Apr 25, 2023
@eugpoloz eugpoloz added this to the a11y. Документация по доступности компонентов milestone Apr 25, 2023
@eugpoloz eugpoloz added this to VKUI Apr 25, 2023
@github-project-automation github-project-automation bot moved this to 🗃 Backlog in VKUI Apr 25, 2023
@eugpoloz eugpoloz mentioned this issue Apr 25, 2023
Closed
1 task
@eugpoloz eugpoloz removed this from the a11y. Документация по доступности компонентов milestone Jun 13, 2023
@mendrew mendrew mentioned this issue Jan 11, 2024
Merged
1 task
mendrew added a commit that referenced this issue Jan 15, 2024
@mendrew
fix(Switch): Show focus in android talkback (#6365)
7af29b3 
Действительно, на Android в Talkback не видно фокуса при фокусировании на инпуте, потому что мы прячем этот инпут с помощью `VisuallyHidden` компонента.
Как вариант можно убрать использование VisuallyHidden и спрятать компонент позади визульной части.

Изменения: 
- Добавил модификатор для VisuallyHidden, когда речь идет о `Component=input`. Явно задал размер равный размеру родительского элемента, чтобы выделение визуально было подобно размеру switch. Но изменение затронуло не только Switch, но и другие компоненты, в которых `<VisuallyHidden Component="input" \>`.
- добавил `role='switch'`
- добавил `aria-checked`. Так как значение этого аттрибута должно соответствовать значению инпута, то добавил переменную состояния.
- обновил пример в Storybook, добавив историю с испольованием SimpleCell чтобы как-то учесть пожелания из #4931
mendrew added a commit that referenced this issue Jan 18, 2024
@mendrew
fix(Switch): Show focus in android talkback (#6365)
b27305f 
Действительно, на Android в Talkback не видно фокуса при фокусировании на инпуте, потому что мы прячем этот инпут с помощью `VisuallyHidden` компонента.
Как вариант можно убрать использование VisuallyHidden и спрятать компонент позади визульной части.

Изменения:
- Добавил модификатор для VisuallyHidden, когда речь идет о `Component=input`. Явно задал размер равный размеру родительского элемента, чтобы выделение визуально было подобно размеру switch. Но изменение затронуло не только Switch, но и другие компоненты, в которых `<VisuallyHidden Component="input" \>`.
- добавил `role='switch'`
- добавил `aria-checked`. Так как значение этого аттрибута должно соответствовать значению инпута, то добавил переменную состояния.
- обновил пример в Storybook, добавив историю с испольованием SimpleCell чтобы как-то учесть пожелания из #4931
@mendrew mendrew mentioned this issue Jan 18, 2024
Merged
mendrew added a commit that referenced this issue Jan 19, 2024
@mendrew
fix(Switch): Show focus in android talkback (#6365) (#6405)
43288a8 
Действительно, на Android в Talkback не видно фокуса при фокусировании на инпуте, потому что мы прячем этот инпут с помощью `VisuallyHidden` компонента.
Как вариант можно убрать использование VisuallyHidden и спрятать компонент позади визульной части.

Изменения:
- Добавил модификатор для VisuallyHidden, когда речь идет о `Component=input`. Явно задал размер равный размеру родительского элемента, чтобы выделение визуально было подобно размеру switch. Но изменение затронуло не только Switch, но и другие компоненты, в которых `<VisuallyHidden Component="input" \>`.
- добавил `role='switch'`
- добавил `aria-checked`. Так как значение этого аттрибута должно соответствовать значению инпута, то добавил переменную состояния.
- обновил пример в Storybook, добавив историю с испольованием SimpleCell чтобы как-то учесть пожелания из #4931
vkcom-publisher pushed a commit that referenced this issue Jan 19, 2024
@mendrew @actions-user
fix(Switch): Show focus in android talkback (#6365) (#6405)
84daced 
Действительно, на Android в Talkback не видно фокуса при фокусировании на инпуте, потому что мы прячем этот инпут с помощью `VisuallyHidden` компонента.
Как вариант можно убрать использование VisuallyHidden и спрятать компонент позади визульной части.

Изменения:
- Добавил модификатор для VisuallyHidden, когда речь идет о `Component=input`. Явно задал размер равный размеру родительского элемента, чтобы выделение визуально было подобно размеру switch. Но изменение затронуло не только Switch, но и другие компоненты, в которых `<VisuallyHidden Component="input" \>`.
- добавил `role='switch'`
- добавил `aria-checked`. Так как значение этого аттрибута должно соответствовать значению инпута, то добавил переменную состояния.
- обновил пример в Storybook, добавив историю с испольованием SimpleCell чтобы как-то учесть пожелания из #4931
@SevereCloud SevereCloud moved this from 🗃 Backlog to 🔜 To do in VKUI Mar 17, 2024
@andrey-medvedev-vk andrey-medvedev-vk self-assigned this Feb 24, 2025
andrey-medvedev-vk added a commit that referenced this issue Feb 25, 2025
@andrey-medvedev-vk
Fix other storybook examples from #4931
716acc8
@andrey-medvedev-vk andrey-medvedev-vk linked a pull request Feb 25, 2025 that will close this issue
Open
1 task
@andrey-medvedev-vk andrey-medvedev-vk moved this from 🔜 To do to 🔧 In progress in VKUI Feb 25, 2025
@andrey-medvedev-vk andrey-medvedev-vk moved this from 🔧 In progress to 👀 In Review in VKUI Feb 26, 2025
@inomdzhon inomdzhon added this to the v7.2.0 milestone Feb 28, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@andrey-medvedev-vk andrey-medvedev-vk

Labels
a11y:audit Проблемы, найденные в ходе аудита невизуальной доступности VKUI a11y Доступность (цифровая) cmp:checkbox cmp:form-field cmp:input cmp:switch cmp:textarea docs
Projects
VKUI
Status: 👀 In Review
Milestone
v7.2.0
Development

Successfully merging a pull request may close this issue.

doc(Card): add labels to Card and CardScroll storybook examples VKCOM/VKUI
3 participants
@inomdzhon @eugpoloz @andrey-medvedev-vk