feat: Add ariaLabel property to icon

Author: avinashbot

src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap

@@ -8890,12 +8890,19 @@ exports[`Documenter definition for icon matches the snapshot: icon 1`] = `
   "name": "Icon",
   "properties": [
     {
+      "deprecatedTag": "Use the \`ariaLabel\` property instead.",
       "description": "Specifies alternate text for a custom icon (using the \`url\` attribute). We recommend that you provide this for accessibility.
 This property is ignored if you use a predefined icon or if you set your custom icon using the \`svg\` slot.",
       "name": "alt",
       "optional": true,
       "type": "string",
     },
+    {
+      "description": "Specifies alternate text for the icon. We recommend that you provide this for accessibility.",
+      "name": "ariaLabel",
+      "optional": true,
+      "type": "string",
+    },
     {
       "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
       "description": "Adds the specified classes to the root element of the component.",
@@ -13942,6 +13949,16 @@ The function will be called when a user clicks on the trigger button.",
             "optional": true,
             "type": "(itemsType: string) => string",
           },
+          {
+            "name": "labelIconFile",
+            "optional": true,
+            "type": "string",
+          },
+          {
+            "name": "labelIconFolder",
+            "optional": true,
+            "type": "string",
+          },
           {
             "name": "labelModalDismiss",
             "optional": true,

src/icon/interfaces.ts

@@ -9,6 +9,7 @@ export interface IconProps extends BaseComponentProps {
    * Specifies the icon to be displayed.
    */
   name?: IconProps.Name;
+
   /**
    * Specifies the size of the icon.
    *
@@ -32,12 +33,20 @@ export interface IconProps extends BaseComponentProps {
    * If you set both `url` and `svg`, `svg` will take precedence.
    */
   url?: string;
+
   /**
    * Specifies alternate text for a custom icon (using the `url` attribute). We recommend that you provide this for accessibility.
    * This property is ignored if you use a predefined icon or if you set your custom icon using the `svg` slot.
+   *
+   * @deprecated Use the `ariaLabel` property instead.
    */
   alt?: string;
 
+  /**
+   * Specifies alternate text for the icon. We recommend that you provide this for accessibility.
+   */
+  ariaLabel?: string;
+
   /**
    * Specifies the SVG of a custom icon.
    *

src/icon/internal.tsx

@@ -44,6 +44,7 @@ const InternalIcon = ({
   variant = 'normal',
   url,
   alt,
+  ariaLabel,
   svg,
   badge,
   __internalRootRef = null,
@@ -100,7 +101,7 @@ const InternalIcon = ({
   if (url) {
     return (
       <span {...baseProps} ref={mergedRef} style={inlineStyles}>
-        <img src={url} alt={alt} />
+        <img src={url} alt={ariaLabel ?? alt} />
       </span>
     );
   }
@@ -130,8 +131,10 @@ const InternalIcon = ({
     }
   }
 
+  const labelAttributes = ariaLabel ? { role: 'img', 'aria-label': ariaLabel } : {};
+
   return (
-    <span {...baseProps} ref={mergedRef} style={inlineStyles}>
+    <span {...baseProps} {...labelAttributes} ref={mergedRef} style={inlineStyles}>
       {validIcon ? iconMap(name) : undefined}
     </span>
   );

src/s3-resource-selector/interfaces.ts

@@ -267,6 +267,8 @@ export namespace S3ResourceSelectorProps {
     labelBreadcrumbs?: string;
     labelExpandBreadcrumbs?: string;
     labelClearFilter?: string;
+    labelIconFolder?: string;
+    labelIconFile?: string;
   }
 
   export interface ChangeDetail {