From 33c1fcf044e31ed80fdc4746a7f092e9fe33011c Mon Sep 17 00:00:00 2001
From: Avinash Dwarapu <dwaraa@amazon.com>
Date: Tue, 4 Feb 2025 17:04:57 +0100
Subject: [PATCH] Replace internal usages.

---
 src/alert/__tests__/alert.test.tsx       |  4 ++--
 src/alert/internal.tsx                   |  4 ++--
 src/button/internal.tsx                  | 11 +++++------
 src/flashbar/collapsible-flashbar.tsx    |  6 ++----
 src/flashbar/flash.tsx                   | 25 ++++++++++++------------
 src/form-field/internal.tsx              |  8 ++++----
 src/table/__tests__/header-cell.test.tsx |  5 ++++-
 src/table/body-cell/index.tsx            |  4 +---
 src/table/header-cell/index.tsx          | 11 +++++------
 9 files changed, 37 insertions(+), 41 deletions(-)

diff --git a/src/alert/__tests__/alert.test.tsx b/src/alert/__tests__/alert.test.tsx
index 6762b284a7..ff89b3b9d8 100644
--- a/src/alert/__tests__/alert.test.tsx
+++ b/src/alert/__tests__/alert.test.tsx
@@ -85,7 +85,7 @@ describe('Alert Component', () => {
     });
     it('status icon does not have a label by default', () => {
       const { wrapper } = renderAlert({});
-      expect(wrapper.find('[role="img"]')!.getElement()).not.toHaveAttribute('aria-label');
+      expect(wrapper.find('[role="img"]')).toBeNull();
     });
     it('status icon can have a label', () => {
       const { wrapper } = renderAlert({ i18nStrings });
@@ -215,7 +215,7 @@ describe('Alert Component', () => {
         </TestI18nProvider>
       );
       const wrapper = createWrapper(container)!.findAlert()!;
-      const statusIcon = wrapper.findByClassName(styles.icon)!.getElement();
+      const statusIcon = wrapper.findByClassName(styles.icon)!.findIcon()!.getElement();
       const dismissButton = wrapper.findDismissButton()!.getElement();
       return { statusIcon, dismissButton };
     }
diff --git a/src/alert/internal.tsx b/src/alert/internal.tsx
index bd60f29f26..4a62ddadbf 100644
--- a/src/alert/internal.tsx
+++ b/src/alert/internal.tsx
@@ -132,8 +132,8 @@ const InternalAlert = React.forwardRef(
               )}
             >
               <div className={styles['alert-focus-wrapper']} tabIndex={-1} ref={focusRef}>
-                <div className={clsx(styles.icon, styles.text)} role="img" aria-label={statusIconAriaLabel}>
-                  <InternalIcon name={typeToIcon[type]} size={size} />
+                <div className={clsx(styles.icon, styles.text)}>
+                  <InternalIcon name={typeToIcon[type]} size={size} ariaLabel={statusIconAriaLabel} />
                 </div>
                 <div className={clsx(styles.message, styles.text)}>
                   <div
diff --git a/src/button/internal.tsx b/src/button/internal.tsx
index 0a74afe51d..e8644c472c 100644
--- a/src/button/internal.tsx
+++ b/src/button/internal.tsx
@@ -238,12 +238,11 @@ export const InternalButton = React.forwardRef(
             {external && (
               <>
                 &nbsp;
-                <span
-                  role="img"
-                  aria-label={i18n('i18nStrings.externalIconAriaLabel', i18nStrings?.externalIconAriaLabel)}
-                >
-                  <Icon name="external" className={testUtilStyles['external-icon']} />
-                </span>
+                <Icon
+                  name="external"
+                  className={testUtilStyles['external-icon']}
+                  ariaLabel={i18n('i18nStrings.externalIconAriaLabel', i18nStrings?.externalIconAriaLabel)}
+                />
               </>
             )}
           </>
diff --git a/src/flashbar/collapsible-flashbar.tsx b/src/flashbar/collapsible-flashbar.tsx
index 68dc1a18b4..59e0d075a3 100644
--- a/src/flashbar/collapsible-flashbar.tsx
+++ b/src/flashbar/collapsible-flashbar.tsx
@@ -372,10 +372,8 @@ const NotificationTypeCount = ({
 }) => {
   return (
     <span className={styles['type-count']}>
-      <span aria-label={label} role="img">
-        <span title={label} aria-hidden="true">
-          <InternalIcon name={iconName} />
-        </span>
+      <span title={label}>
+        <InternalIcon name={iconName} ariaLabel={label} />
       </span>
       <span className={styles['count-number']}>{count}</span>
     </span>
diff --git a/src/flashbar/flash.tsx b/src/flashbar/flash.tsx
index f84d20fa26..813c9692b9 100644
--- a/src/flashbar/flash.tsx
+++ b/src/flashbar/flash.tsx
@@ -134,9 +134,18 @@ export const Flash = React.forwardRef(
     const headerRef = useMergeRefs(headerRefAction, headerRefContent, headerRefObject);
     const contentRef = useMergeRefs(contentRefAction, contentRefContent, contentRefObject);
 
-    const iconType = ICON_TYPES[type];
+    const statusIconAriaLabel =
+      props.statusIconAriaLabel ||
+      i18nStrings?.[`${loading || type === 'in-progress' ? 'inProgress' : type}IconAriaLabel`];
 
-    const icon = loading ? <InternalSpinner /> : <InternalIcon name={iconType} />;
+    const iconType = ICON_TYPES[type];
+    const icon = loading ? (
+      <span role="img" aria-label={statusIconAriaLabel}>
+        <InternalSpinner />
+      </span>
+    ) : (
+      <InternalIcon name={iconType} ariaLabel={statusIconAriaLabel} />
+    );
 
     const effectiveType = loading ? 'info' : type;
 
@@ -144,10 +153,6 @@ export const Flash = React.forwardRef(
       [DATA_ATTR_ANALYTICS_FLASHBAR]: effectiveType,
     };
 
-    const statusIconAriaLabel =
-      props.statusIconAriaLabel ||
-      i18nStrings?.[`${loading || type === 'in-progress' ? 'inProgress' : type}IconAriaLabel`];
-
     return (
       // We're not using "polite" or "assertive" here, just turning default behavior off.
       // eslint-disable-next-line @cloudscape-design/prefer-live-region
@@ -175,13 +180,7 @@ export const Flash = React.forwardRef(
       >
         <div className={styles['flash-body']}>
           <div className={styles['flash-focus-container']} tabIndex={-1}>
-            <div
-              className={clsx(styles['flash-icon'], styles['flash-text'])}
-              role="img"
-              aria-label={statusIconAriaLabel}
-            >
-              {icon}
-            </div>
+            <div className={clsx(styles['flash-icon'], styles['flash-text'])}>{icon}</div>
             <div className={clsx(styles['flash-message'], styles['flash-text'])}>
               <div
                 className={clsx(
diff --git a/src/form-field/internal.tsx b/src/form-field/internal.tsx
index ec9e8a08f6..6bfc1cdbea 100644
--- a/src/form-field/internal.tsx
+++ b/src/form-field/internal.tsx
@@ -52,8 +52,8 @@ export function FormFieldError({ id, children, errorIconAriaLabel }: FormFieldEr
     <>
       <div id={id} className={styles.error}>
         <div className={styles['error-icon-shake-wrapper']}>
-          <div role="img" aria-label={i18nErrorIconAriaLabel} className={styles['error-icon-scale-wrapper']}>
-            <InternalIcon name="status-negative" size="small" />
+          <div className={styles['error-icon-scale-wrapper']}>
+            <InternalIcon name="status-negative" size="small" ariaLabel={i18nErrorIconAriaLabel} />
           </div>
         </div>
         <span className={styles.error__message} ref={contentRef}>
@@ -75,8 +75,8 @@ export function FormFieldWarning({ id, children, warningIconAriaLabel }: FormFie
     <>
       <div id={id} className={styles.warning}>
         <div className={styles['warning-icon-shake-wrapper']}>
-          <div role="img" aria-label={i18nWarningIconAriaLabel} className={styles['warning-icon-scale-wrapper']}>
-            <InternalIcon name="status-warning" size="small" />
+          <div className={styles['warning-icon-scale-wrapper']}>
+            <InternalIcon name="status-warning" size="small" ariaLabel={i18nWarningIconAriaLabel} />
           </div>
         </div>
         <span className={styles.warning__message} ref={contentRef}>
diff --git a/src/table/__tests__/header-cell.test.tsx b/src/table/__tests__/header-cell.test.tsx
index 8056b17384..fe80872a06 100644
--- a/src/table/__tests__/header-cell.test.tsx
+++ b/src/table/__tests__/header-cell.test.tsx
@@ -119,7 +119,10 @@ describe('i18n', () => {
         </TableWrapper>
       </TestI18nProvider>
     );
-    expect(container.querySelector(`.${styles['edit-icon']}`)).toHaveAttribute('aria-label', 'Custom editable');
+    expect(container.querySelector(`.${styles['edit-icon']} [role=img]`)).toHaveAttribute(
+      'aria-label',
+      'Custom editable'
+    );
   });
 
   test('does not set tab index when negative', () => {
diff --git a/src/table/body-cell/index.tsx b/src/table/body-cell/index.tsx
index d45f2c3fdc..2c8d2f17db 100644
--- a/src/table/body-cell/index.tsx
+++ b/src/table/body-cell/index.tsx
@@ -104,15 +104,13 @@ function TableCellEditable<ItemType>({
             <>
               <span
                 className={styles['body-cell-success']}
-                aria-label={ariaLabels?.successfulEditLabel?.(column)}
-                role="img"
                 onMouseDown={e => {
                   // Prevent the editor's Button blur event to be fired when clicking the success icon.
                   // This prevents unfocusing the button and triggers the `TableTdElement` onClick event which initiates the edit mode.
                   e.preventDefault();
                 }}
               >
-                <Icon name="status-positive" variant="success" />
+                <Icon name="status-positive" variant="success" ariaLabel={ariaLabels?.successfulEditLabel?.(column)} />
               </span>
               <InternalLiveRegion tagName="span" hidden={true}>
                 {i18n('ariaLabels.successfulEditLabel', ariaLabels?.successfulEditLabel?.(column))}
diff --git a/src/table/header-cell/index.tsx b/src/table/header-cell/index.tsx
index aaef4e9f92..9223a9800b 100644
--- a/src/table/header-cell/index.tsx
+++ b/src/table/header-cell/index.tsx
@@ -182,12 +182,11 @@ export function TableHeaderCell<ItemType>({
         >
           {column.header}
           {isEditable ? (
-            <span
-              className={styles['edit-icon']}
-              role="img"
-              aria-label={i18n('columnDefinitions.editConfig.editIconAriaLabel', column.editConfig?.editIconAriaLabel)}
-            >
-              <InternalIcon name="edit" />
+            <span className={styles['edit-icon']}>
+              <InternalIcon
+                name="edit"
+                ariaLabel={i18n('columnDefinitions.editConfig.editIconAriaLabel', column.editConfig?.editIconAriaLabel)}
+              />
             </span>
           ) : null}
         </div>