feat(components/atom/icon): icon a11y

[andresin87]

atom/icon

🚢 Ship

TASK:

• Open classNames
  • Mod tests
• Open prop spreading to be able to track data and aria attributes
  • Add tests
• Add section to understand how to deal with a11y for icons usage in brand marketplace projects.

Description, Motivation and Context

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＝	≍ 0＝	≍ 0＝	≍ 0＝
%	75.96	64.07	65.73	77.74
ABS	3394 / 4468	2078 / 3243	662 / 1007	3213 / 4133

[Elisabetmh]

Use label prop so it could be announced correctly by screen readers. There is no visual difference.

Most icons or icon systems come with no accessibility built-in. For example, the same visual cross icon may in fact mean "close" or "delete". This component lets you give meaning to icons used throughout your app.