opensource/grafana
1
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-08-02 06:32:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

Table panel: Use link elements instead of div elements with on click events to aid with keyboard accessibility (#59393)

Browse Source 
* TablePanel: fix image of image cell overflowing table cell when a data link is added
This commit is contained in:
Oscar Kilhed
2023-01-24 12:42:40 +01:00
committed by GitHub
parent 81c35560a8
commit 6c9d9a2db5
5 changed files with 55 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
packages/grafana-ui/src/components/Table/DefaultCell.tsx
View File

@ -5,7 +5,9 @@ import tinycolor from 'tinycolor2';
import { DisplayValue, formattedValueToString } from '@grafana/data';
import { TableCellBackgroundDisplayMode, TableCellOptions } from '@grafana/schema';
import { useStyles2 } from '../../themes';
import { getCellLinks, getTextColorForAlphaBackground } from '../../utils';
import { Button, clearLinkButtonStyles } from '../Button';
import { DataLinksContextMenu } from '../DataLinks/DataLinksContextMenu';
import { CellActions } from './CellActions';
@ -31,6 +33,7 @@ export const DefaultCell: FC<TableCellProps> = (props) => {
const cellOptions = getCellOptions(field);
const cellStyle = getCellStyle(tableStyles, cellOptions, displayValue, inspectEnabled);
const hasLinks = Boolean(getCellLinks(field, row)?.length);
const clearButtonStyle = useStyles2(clearLinkButtonStyles);
return (
<div {...cellProps} className={cellStyle}>
@ -39,11 +42,16 @@ export const DefaultCell: FC<TableCellProps> = (props) => {
{hasLinks && (
<DataLinksContextMenu links={() => getCellLinks(field, row) || []}>
{(api) => {
return (
<div onClick={api.openMenu} className={getLinkStyle(tableStyles, cellOptions, api.targetClassName)}>
{value}
</div>
);
const content = <div className={getLinkStyle(tableStyles, cellOptions, api.targetClassName)}>{value}</div>;
if (api.openMenu) {
return (
<Button className={cx(clearButtonStyle)} onClick={api.openMenu}>
{content}
</Button>
);
} else {
return content;
}
}}
</DataLinksContextMenu>
)}