Skip to content

Commit

Permalink
[EuiIconTip] Fix non-i18n'd aria-label
Browse files Browse the repository at this point in the history
  • Loading branch information
cee-chen committed Mar 20, 2024
1 parent 1d07b2d commit 6cbd299
Show file tree
Hide file tree
Showing 2 changed files with 22 additions and 13 deletions.
4 changes: 4 additions & 0 deletions changelogs/upcoming/7606.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
**Bug fixes**

- Fixed `EuiIconTip`'s default `aria-label` text to be i18n tokenizable

**Accessibility**

- `EuiIcons` no longer apply `aria-hidden` to empty icons, as long as a valid title or label is provided to the icon.. In particular, this is intended to improve the accessibility of loading `EuiIconTip`s.
31 changes: 18 additions & 13 deletions src/components/tool_tip/icon_tip.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
import React, { FunctionComponent } from 'react';

import { PropsOf } from '../common';
import { useEuiI18n } from '../i18n';
import { EuiIcon, IconSize, IconType } from '../icon';
import { EuiToolTip, EuiToolTipProps } from './tool_tip';

Expand Down Expand Up @@ -53,22 +54,26 @@ type Props = Omit<EuiToolTipProps, 'children' | 'delay' | 'position'> &

export const EuiIconTip: FunctionComponent<Props> = ({
type = 'questionInCircle',
'aria-label': ariaLabel = 'Info',
'aria-label': ariaLabel,
color,
size,
iconProps,
position = 'top',
delay = 'regular',
...rest
}) => (
<EuiToolTip position={position} delay={delay} {...rest}>
<EuiIcon
tabIndex={0}
type={type}
color={color}
size={size}
aria-label={ariaLabel}
{...iconProps}
/>
</EuiToolTip>
);
}) => {
const defaultAriaLabel = useEuiI18n('euiIconTip.defaultAriaLabel', 'Info');

return (
<EuiToolTip position={position} delay={delay} {...rest}>
<EuiIcon
tabIndex={0}
type={type}
color={color}
size={size}
aria-label={ariaLabel || defaultAriaLabel}
{...iconProps}
/>
</EuiToolTip>
);
};

0 comments on commit 6cbd299

Please sign in to comment.