Skip to content

Conversation

DmelladoH
Copy link

@DmelladoH DmelladoH commented Sep 23, 2025

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:

  1. Icons with click handlers are wrapped in the SUI atom button component.
  2. The button uses a flat + neutral design by default.
  3. ARIA labels (ariaLabelLeftIcon, ariaLabelRightIcon) are supported for better accessibility.
  4. Consumers can pass additional leftIconButtonProps and rightIconButtonProps to customize the underlying buttons if needed.

This change improves accessibility

Types of changes

  • 🪲 Bug fix (non-breaking change which fixes an issue)
  • ✨ New feature (non-breaking change which adds functionality)
  • 💥 Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • 🧾 Documentation
  • 📷 Demo
  • 🧪 Test
  • 🧠 Refactor
  • 💄 Styles
  • 🛠️ Tool

Screenshots - Animations

image

Copy link

STATEMENTS BRANCHES FUNCTIONS LINES
≍ 0.01↑ ≍ 0.04↑ ≍ 0= ≍ 0=
% 76.2 63.41 67.55 77.77
ABS 3504 / 4598 2141 / 3376 687 / 1017 3321 / 4270

Comment on lines 22 to 25
top: -8px;
bottom: -8px;
left: -8px;
right: -8px;
Copy link
Contributor

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?

Copy link
Author

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;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same as above, here...

Copy link

STATEMENTS BRANCHES FUNCTIONS LINES
≍ 0.01↑ ≍ 0.04↑ ≍ 0= ≍ 0=
% 76.2 63.41 67.55 77.77
ABS 3504 / 4598 2141 / 3376 687 / 1017 3321 / 4270

Copy link

STATEMENTS BRANCHES FUNCTIONS LINES
≍ 0.01↑ ≍ 0.04↑ ≍ 0= ≍ 0=
% 76.2 63.41 67.55 77.77
ABS 3504 / 4598 2141 / 3376 687 / 1017 3321 / 4270

Copy link
Member

@andresin87 andresin87 left a 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

Copy link

STATEMENTS BRANCHES FUNCTIONS LINES
≍ 0.01↑ ≍ 0.04↑ ≍ 0= ≍ 0=
% 76.34 63.35 67.72 77.87
ABS 3476 / 4553 2106 / 3324 680 / 1004 3295 / 4231

@DmelladoH
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants