Skip to content

Commit 33c1fcf

Browse files
avinashbotavinashbot
committed
Replace internal usages.
1 parent 4a66db6 commit 33c1fcf

File tree

9 files changed

+37
-41
lines changed

9 files changed

+37
-41
lines changed

‎src/alert/__tests__/alert.test.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ describe('Alert Component', () => {
8585
});
8686
it('status icon does not have a label by default', () => {
8787
const { wrapper } = renderAlert({});
88-
expect(wrapper.find('[role="img"]')!.getElement()).not.toHaveAttribute('aria-label');
88+
expect(wrapper.find('[role="img"]')).toBeNull();
8989
});
9090
it('status icon can have a label', () => {
9191
const { wrapper } = renderAlert({ i18nStrings });
@@ -215,7 +215,7 @@ describe('Alert Component', () => {
215215
</TestI18nProvider>
216216
);
217217
const wrapper = createWrapper(container)!.findAlert()!;
218-
const statusIcon = wrapper.findByClassName(styles.icon)!.getElement();
218+
const statusIcon = wrapper.findByClassName(styles.icon)!.findIcon()!.getElement();
219219
const dismissButton = wrapper.findDismissButton()!.getElement();
220220
return { statusIcon, dismissButton };
221221
}

‎src/alert/internal.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -132,8 +132,8 @@ const InternalAlert = React.forwardRef(
132132
)}
133133
>
134134
<div className={styles['alert-focus-wrapper']} tabIndex={-1} ref={focusRef}>
135-
<div className={clsx(styles.icon, styles.text)} role="img" aria-label={statusIconAriaLabel}>
136-
<InternalIcon name={typeToIcon[type]} size={size} />
135+
<div className={clsx(styles.icon, styles.text)}>
136+
<InternalIcon name={typeToIcon[type]} size={size} ariaLabel={statusIconAriaLabel} />
137137
</div>
138138
<div className={clsx(styles.message, styles.text)}>
139139
<div

‎src/button/internal.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -238,12 +238,11 @@ export const InternalButton = React.forwardRef(
238238
{external && (
239239
<>
240240
&nbsp;
241-
<span
242-
role="img"
243-
aria-label={i18n('i18nStrings.externalIconAriaLabel', i18nStrings?.externalIconAriaLabel)}
244-
>
245-
<Icon name="external" className={testUtilStyles['external-icon']} />
246-
</span>
241+
<Icon
242+
name="external"
243+
className={testUtilStyles['external-icon']}
244+
ariaLabel={i18n('i18nStrings.externalIconAriaLabel', i18nStrings?.externalIconAriaLabel)}
245+
/>
247246
</>
248247
)}
249248
</>

‎src/flashbar/collapsible-flashbar.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -372,10 +372,8 @@ const NotificationTypeCount = ({
372372
}) => {
373373
return (
374374
<span className={styles['type-count']}>
375-
<span aria-label={label} role="img">
376-
<span title={label} aria-hidden="true">
377-
<InternalIcon name={iconName} />
378-
</span>
375+
<span title={label}>
376+
<InternalIcon name={iconName} ariaLabel={label} />
379377
</span>
380378
<span className={styles['count-number']}>{count}</span>
381379
</span>

‎src/flashbar/flash.tsx‎

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -134,20 +134,25 @@ export const Flash = React.forwardRef(
134134
const headerRef = useMergeRefs(headerRefAction, headerRefContent, headerRefObject);
135135
const contentRef = useMergeRefs(contentRefAction, contentRefContent, contentRefObject);
136136

137-
const iconType = ICON_TYPES[type];
137+
const statusIconAriaLabel =
138+
props.statusIconAriaLabel ||
139+
i18nStrings?.[`${loading || type === 'in-progress' ? 'inProgress' : type}IconAriaLabel`];
138140

139-
const icon = loading ? <InternalSpinner /> : <InternalIcon name={iconType} />;
141+
const iconType = ICON_TYPES[type];
142+
const icon = loading ? (
143+
<span role="img" aria-label={statusIconAriaLabel}>
144+
<InternalSpinner />
145+
</span>
146+
) : (
147+
<InternalIcon name={iconType} ariaLabel={statusIconAriaLabel} />
148+
);
140149

141150
const effectiveType = loading ? 'info' : type;
142151

143152
const analyticsAttributes = {
144153
[DATA_ATTR_ANALYTICS_FLASHBAR]: effectiveType,
145154
};
146155

147-
const statusIconAriaLabel =
148-
props.statusIconAriaLabel ||
149-
i18nStrings?.[`${loading || type === 'in-progress' ? 'inProgress' : type}IconAriaLabel`];
150-
151156
return (
152157
// We're not using "polite" or "assertive" here, just turning default behavior off.
153158
// eslint-disable-next-line @cloudscape-design/prefer-live-region
@@ -175,13 +180,7 @@ export const Flash = React.forwardRef(
175180
>
176181
<div className={styles['flash-body']}>
177182
<div className={styles['flash-focus-container']} tabIndex={-1}>
178-
<div
179-
className={clsx(styles['flash-icon'], styles['flash-text'])}
180-
role="img"
181-
aria-label={statusIconAriaLabel}
182-
>
183-
{icon}
184-
</div>
183+
<div className={clsx(styles['flash-icon'], styles['flash-text'])}>{icon}</div>
185184
<div className={clsx(styles['flash-message'], styles['flash-text'])}>
186185
<div
187186
className={clsx(

‎src/form-field/internal.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -52,8 +52,8 @@ export function FormFieldError({ id, children, errorIconAriaLabel }: FormFieldEr
5252
<>
5353
<div id={id} className={styles.error}>
5454
<div className={styles['error-icon-shake-wrapper']}>
55-
<div role="img" aria-label={i18nErrorIconAriaLabel} className={styles['error-icon-scale-wrapper']}>
56-
<InternalIcon name="status-negative" size="small" />
55+
<div className={styles['error-icon-scale-wrapper']}>
56+
<InternalIcon name="status-negative" size="small" ariaLabel={i18nErrorIconAriaLabel} />
5757
</div>
5858
</div>
5959
<span className={styles.error__message} ref={contentRef}>
@@ -75,8 +75,8 @@ export function FormFieldWarning({ id, children, warningIconAriaLabel }: FormFie
7575
<>
7676
<div id={id} className={styles.warning}>
7777
<div className={styles['warning-icon-shake-wrapper']}>
78-
<div role="img" aria-label={i18nWarningIconAriaLabel} className={styles['warning-icon-scale-wrapper']}>
79-
<InternalIcon name="status-warning" size="small" />
78+
<div className={styles['warning-icon-scale-wrapper']}>
79+
<InternalIcon name="status-warning" size="small" ariaLabel={i18nWarningIconAriaLabel} />
8080
</div>
8181
</div>
8282
<span className={styles.warning__message} ref={contentRef}>

‎src/table/__tests__/header-cell.test.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,10 @@ describe('i18n', () => {
119119
</TableWrapper>
120120
</TestI18nProvider>
121121
);
122-
expect(container.querySelector(`.${styles['edit-icon']}`)).toHaveAttribute('aria-label', 'Custom editable');
122+
expect(container.querySelector(`.${styles['edit-icon']} [role=img]`)).toHaveAttribute(
123+
'aria-label',
124+
'Custom editable'
125+
);
123126
});
124127

125128
test('does not set tab index when negative', () => {

‎src/table/body-cell/index.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -104,15 +104,13 @@ function TableCellEditable<ItemType>({
104104
<>
105105
<span
106106
className={styles['body-cell-success']}
107-
aria-label={ariaLabels?.successfulEditLabel?.(column)}
108-
role="img"
109107
onMouseDown={e => {
110108
// Prevent the editor's Button blur event to be fired when clicking the success icon.
111109
// This prevents unfocusing the button and triggers the `TableTdElement` onClick event which initiates the edit mode.
112110
e.preventDefault();
113111
}}
114112
>
115-
<Icon name="status-positive" variant="success" />
113+
<Icon name="status-positive" variant="success" ariaLabel={ariaLabels?.successfulEditLabel?.(column)} />
116114
</span>
117115
<InternalLiveRegion tagName="span" hidden={true}>
118116
{i18n('ariaLabels.successfulEditLabel', ariaLabels?.successfulEditLabel?.(column))}

‎src/table/header-cell/index.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -182,12 +182,11 @@ export function TableHeaderCell<ItemType>({
182182
>
183183
{column.header}
184184
{isEditable ? (
185-
<span
186-
className={styles['edit-icon']}
187-
role="img"
188-
aria-label={i18n('columnDefinitions.editConfig.editIconAriaLabel', column.editConfig?.editIconAriaLabel)}
189-
>
190-
<InternalIcon name="edit" />
185+
<span className={styles['edit-icon']}>
186+
<InternalIcon
187+
name="edit"
188+
ariaLabel={i18n('columnDefinitions.editConfig.editIconAriaLabel', column.editConfig?.editIconAriaLabel)}
189+
/>
191190
</span>
192191
) : null}
193192
</div>

0 commit comments

Comments
 (0)