You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
В данный момент иконка глаза в PasswordInput представлена в виде span'а с событием onClick, из-за чего сложилась ситуация в которой "глаз" недоступен с клавиатуры.
Для того, чтобы это пофиксить, достаточно обернуть иконку в тэг <button /> и добавить button'ну атрибут aria-label со значением "показать/скрыть пароль", которое должно меняться в зависимости от того, в каком состоянии сейчас находится инпут.
Но проблема глобальнее, в том плане, что это не единственное место в библиотеке, где нужна кнопка с иконкой внутри неё, следовательно, стоит задуматься о создании некого внутреннего компонента IconButton, который позволял бы создавать подобные кнопки. Сейчас я вижу преимущества такого компонента в том, что в нём можно сделать обязательным атрибут aria-label, а также в том, что в нём можно сбросить дефолтные стили кнопки и использовать этот компонент пока в библиотеке нет reset.css.
Вторая глобальная проблема с обеспечением доступности компонентов библиотеки как раз заключается в том, что в ней отсутствует reset.css, из-за чего казалось бы тривиальные задачи вроде этой превращаются в долгое приключение, с фиговым концом.
В данный момент иконка глаза в
PasswordInput
представлена в видеspan
'а с событиемonClick
, из-за чего сложилась ситуация в которой "глаз" недоступен с клавиатуры.Для того, чтобы это пофиксить, достаточно обернуть иконку в тэг
<button />
и добавитьbutton
'ну атрибутaria-label
со значением "показать/скрыть пароль", которое должно меняться в зависимости от того, в каком состоянии сейчас находится инпут.Но проблема глобальнее, в том плане, что это не единственное место в библиотеке, где нужна кнопка с иконкой внутри неё, следовательно, стоит задуматься о создании некого внутреннего компонента
IconButton
, который позволял бы создавать подобные кнопки. Сейчас я вижу преимущества такого компонента в том, что в нём можно сделать обязательным атрибутaria-label
, а также в том, что в нём можно сбросить дефолтные стили кнопки и использовать этот компонент пока в библиотеке нетreset.css
.Вторая глобальная проблема с обеспечением доступности компонентов библиотеки как раз заключается в том, что в ней отсутствует
reset.css
, из-за чего казалось бы тривиальные задачи вроде этой превращаются в долгое приключение, с фиговым концом.Итого:
reset.css
, о котором не раз упоминалось например в [react-ui] add reset.css IF-219 #2009, а также в [Toast] Семантика Toast IF-376 #2757.reset.css
в библиотеку затащить не получится, стоит задуматься над созданием чего-то вродеIconButton
.The text was updated successfully, but these errors were encountered: