VKUI
VKUI copied to clipboard
VKCOM
[Enhancement][a11y] Доступность `File`
- [ ] документация по доступности (https://github.com/VKCOM/VKUI/issues/3035)
Использование визуального скрытого в https://github.com/VKCOM/VKUI/pull/2527 может приводить вот к таким интересным спецэффектам (на примере VoiceOver):
Аудит невизуальной доступности также обращает на это внимание:
Отдельная надпись для скринридера "Выберите файл" не нужна, потому что браузер самостоятельно подписывает эту кнопку на языке системы.
Нужно изучить подходы к доступным <input type="file" /> и сделать по красоте. :wink:
Дерево доступности
Google Chrome
Firefox
Дерево доступности с выбранным файлом
Google Chrome
ничего не изменилось
Firefox
Имя файла
Скрывать инпут вообще не вариант, потому что без инпута пользователь сейчас имя прикрепленного файла никак не узнает
- File это кнопка и в ней мы не показываем название файла
- Google Chrome игнорирует название файла
Пруф
предложение: Просто добавить aria-hidden. Остальное оставить на разработчиков
UPD: aria-hidden оказывается не работает в хроме, поскольку у input type="file" нет роли и браузер как хочет так и обрабатывает его
Здравствуйте. Пользователи прислали два бага:
https://vk.com/bug1027954 https://vk.com/bug1026403
Нативный попап перекрывает кнопку:
Версия VKUI: 5.10.0
Рендерю вот так:
<FormItem top="Детское новогоднее фото">
<Spacing size={4} />
<File
required
accept="image/*"
name="photo"
before={<Icon24Camera role="presentation" />}
size="m"
>
Выбрать фотографию
</File>
</FormItem>
При сабмите формы возникает вышеописанная проблема.
Видимо связано с этим issue :)
Здравствуйте. Пользователи прислали два бага:
https://vk.com/bug1027954 https://vk.com/bug1026403
При сабмите формы возникает вышеописанная проблема.
Видимо связано с этим issue :)
Привет! Завела на этот счет отдельную issue, потому что это касается в целом наших некоторых элементов форм.
