Skip to content

Commit

Permalink
Use EuiIconTip instead of EuiToolTip + EuiIcon (elastic#171273)
Browse files Browse the repository at this point in the history
## Summary

Fix elastic#154421

Using the component suggested by EUI team effectively makes the icon
focusable with the keyboard.
I verified that the tooltip appears automatically when focussing it:

<img width="372" alt="image"
src="https://github.com/elastic/kibana/assets/25349407/c4c91a2a-f045-4f77-870d-9a1132c8dbee">
  • Loading branch information
gsoldevila authored Nov 16, 2023
1 parent 5557348 commit fd4fdb0
Showing 1 changed file with 8 additions and 9 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import {
EuiSearchBar,
EuiBasicTable,
EuiButton,
EuiIcon,
EuiIconTip,
EuiLink,
EuiSpacer,
EuiToolTip,
Expand Down Expand Up @@ -245,14 +245,13 @@ export class Table extends PureComponent<TableProps, TableState> {
render: (type: string, object: SavedObjectWithMetadata) => {
const typeLabel = getSavedObjectLabel(type, allowedTypes);
return (
<EuiToolTip position="top" content={typeLabel}>
<EuiIcon
aria-label={typeLabel}
type={object.meta.icon || 'apps'}
size="s"
data-test-subj="objectType"
/>
</EuiToolTip>
<EuiIconTip
aria-label={typeLabel}
type={object.meta.icon || 'apps'}
size="s"
content={typeLabel}
iconProps={{ 'data-test-subj': 'objectType' }}
/>
);
},
} as EuiTableFieldDataColumnType<SavedObjectWithMetadata<any>>,
Expand Down

0 comments on commit fd4fdb0

Please sign in to comment.