feat: Add ariaLabel property to icon component

[avinashbot]

Description

+   /**
+    * Specifies alternate text for the icon. We recommend that you provide this for accessibility.
+    */
+   ariaLabel?: string;

    /**
-    * Specifies alternate text for a custom icon (using the `url` attribute). We recommend that you provide this for accessibility.
+    * Specifies alternate text for a custom icon (using the `url` attribute).
     * This property is ignored if you use a predefined icon or if you set your custom icon using the `svg` slot.
     *
+    * @deprecated Use `ariaLabel` instead.
     */
    alt?: string;

Motivation

If you want to have an accessible label for your icon (assuming you don't have visible text next to it), you currently have to do this:

<span role="img" aria-label="Success">
  <Icon name="status-positive" />
</span>

Boo! Annoying! The current approach feels manual and seriously lacks discoverability - people can't find an ariaLabel property, and sometimes end up (understandably) misusing the alt property. We could really just let people do this instead:

<Icon name="status-positive" ariaLabel="Success" />

This alone doesn't fix the fact that alt is still confusing, so I also deprecated alt (ariaLabel will be used if provided, but we'll still fall back to "alt" for <img> only).

Related links, issue #, if available: n/a

How has this been tested?

Unit tests. Ignore all the force pushes, I was too lazy to run unit tests on my laptop.

Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

• Changes include appropriate documentation updates.
• Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
• Changes do not include unsupported browser features, see CONTRIBUTING.md.
• Changes were manually tested for accessibility, see accessibility guidelines.

Security

• If the code handles URLs: all URLs are validated through the checkSafeUrl function.

Testing

• Changes are covered with new/existing unit tests?
• Changes are covered with new/existing integration tests?

---

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 96.44%. Comparing base (3cdecff) to head (33c1fcf).
Report is 11 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #3244      +/-   ##
==========================================
+ Coverage   96.42%   96.44%   +0.01%     
==========================================
  Files         790      791       +1     
  Lines       22322    22568     +246     
  Branches     7255     7792     +537     
==========================================
+ Hits        21524    21765     +241     
- Misses        791      796       +5     
  Partials        7        7              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[avinashbot]

Just wanted to be sure before merging, dry-run build (7222839735) is successful.