Replace internal usages.

cloudscape-design · Feb 4, 2025 · 33c1fcf · 33c1fcf
1 parent 4a66db6
commit 33c1fcf
Show file tree

Hide file tree

Showing 9 changed files with 37 additions and 41 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -134,20 +134,25 @@ 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;
 
     const analyticsAttributes = {
       [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
@@ -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
@@ -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
@@ -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
@@ -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>