feat(components/atom/input): Improve a11y by wrapping clickable icons in Button with hover state

[DmelladoH]

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

[github-actions]

	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

[jordevo]

should we be using some theme var here...? $m-m or $m-l perhaps?

[DmelladoH]

yes, thats right. Fixed!

[jordevo]

same as above, here...

[github-actions]

	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

[github-actions]

	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

[andresin87]

not the s-ui button but a unestiled

[github-actions]

	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]

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

[github-actions]

	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