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.

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

[PasswordInput] Глаз недоступен с клавиатуры IF-376 #2779

Open
JackUait opened this issue Feb 10, 2022 · 0 comments
Labels
a11y Issues related to a11y of components

Comments

@JackUait
Copy link
Contributor

JackUait commented Feb 10, 2022

В данный момент иконка глаза в PasswordInput представлена в виде span'а с событием onClick, из-за чего сложилась ситуация в которой "глаз" недоступен с клавиатуры.

Для того, чтобы это пофиксить, достаточно обернуть иконку в тэг <button /> и добавить button'ну атрибут aria-label со значением "показать/скрыть пароль", которое должно меняться в зависимости от того, в каком состоянии сейчас находится инпут.

Но проблема глобальнее, в том плане, что это не единственное место в библиотеке, где нужна кнопка с иконкой внутри неё, следовательно, стоит задуматься о создании некого внутреннего компонента IconButton, который позволял бы создавать подобные кнопки. Сейчас я вижу преимущества такого компонента в том, что в нём можно сделать обязательным атрибут aria-label, а также в том, что в нём можно сбросить дефолтные стили кнопки и использовать этот компонент пока в библиотеке нет reset.css.

Вторая глобальная проблема с обеспечением доступности компонентов библиотеки как раз заключается в том, что в ней отсутствует reset.css, из-за чего казалось бы тривиальные задачи вроде этой превращаются в долгое приключение, с фиговым концом.

Итого:

  1. Нужно попробовать затащить в библиотеку глобальный reset.css, о котором не раз упоминалось например в [react-ui] add reset.css IF-219 #2009, а также в [Toast] Семантика Toast IF-376 #2757.
  2. Если reset.css в библиотеку затащить не получится, стоит задуматься над созданием чего-то вроде IconButton.
@JackUait JackUait added the a11y Issues related to a11y of components label Feb 10, 2022
@asukhar asukhar changed the title [PasswordInput] Глаз недоступен с клавиатуры [PasswordInput] Глаз недоступен с клавиатуры IF-376 Jan 30, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
a11y Issues related to a11y of components
Development

No branches or pull requests

1 participant