-
Notifications
You must be signed in to change notification settings - Fork 63
feat(components/atom/input): Improve a11y by wrapping clickable icons in Button with hover state #2933
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
base: master
Are you sure you want to change the base?
Conversation
|
top: -8px; | ||
bottom: -8px; | ||
left: -8px; | ||
right: -8px; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
should we be using some theme var here...? $m-m
or $m-l
perhaps?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
yes, thats right. Fixed!
} | ||
|
||
&-container { | ||
width: 24px; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
same as above, here...
|
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
not the s-ui button but a unestiled
|
Listo! He cambiado el sui-button per un boton sin estilos pero he mantenido un hover por defecto |
Category/Component
❓ Ask
TASK: MMAA-48558
Description, Motivation and Context
This PR improves the InputIcons component by making icon elements clickable using accessible <Button> elements when click handlers are provided.
Previously, icons were rendered as <span> elements even when onClickLeftIcon or onClickRightIcon were passed, which made them less accessible and provided no hover/focus feedback.
Now:
This change improves accessibility
Types of changes
Screenshots - Animations