[Enhancement][a11y] Доступность File

[eugpoloz]

• документация по доступности ([Doc] Добавить в документации отдельных компонентов пункты о доступности #3035)

---

Использование визуального скрытого в #2527 может приводить вот к таким интересным спецэффектам (на примере VoiceOver):

Аудит невизуальной доступности также обращает на это внимание:

Отдельная надпись для скринридера "Выберите файл" не нужна, потому что браузер самостоятельно подписывает эту кнопку на языке системы.

Нужно изучить подходы к доступным <input type="file" /> и сделать по красоте. 😉

[SevereCloud]

Дерево доступности

Google Chrome

Firefox

Дерево доступности с выбранным файлом

Google Chrome

ничего не изменилось

Firefox

Имя файла

Скрывать инпут вообще не вариант, потому что без инпута пользователь сейчас имя прикрепленного файла никак не узнает

• File это кнопка и в ней мы не показываем название файла
• Google Chrome игнорирует название файла

Пруф

предложение: Просто добавить aria-hidden. Остальное оставить на разработчиков

---

UPD: aria-hidden оказывается не работает в хроме, поскольку у input type="file" нет роли и браузер как хочет так и обрабатывает его

[samohovets]

Здравствуйте. Пользователи прислали два бага:

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 :)

[BlackySoul]

Здравствуйте. Пользователи прислали два бага:

https://vk.com/bug1027954 https://vk.com/bug1026403

При сабмите формы возникает вышеописанная проблема.

Видимо связано с этим issue :)

Привет! Завела на этот счет отдельную issue, потому что это касается в целом наших некоторых элементов форм.

[vkcom-publisher]

✅ v6.0.2 🎉