IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-12-02 13:39:19 -06: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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 55 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
packages/grafana-ui/src/components/Button/Button.tsx
View File

@ -311,3 +311,18 @@ export const clearButtonStyles = (theme: GrafanaTheme2) => {
padding: 0;
`;
};
export const clearLinkButtonStyles = (theme: GrafanaTheme2) => {
return css`
background: transparent;
border: none;
padding: 0;
font-family: inherit;
color: inherit;
height: 100%;
&:hover {
background: transparent;
color: inherit;
}
`;
};

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>
)}

2
packages/grafana-ui/src/components/Table/FilterPopup.tsx
View File

@ -50,6 +50,8 @@ export const FilterPopup: FC<Props> = ({ column: { preFilteredRows, filterValue,
return (
<ClickOutsideWrapper onClick={onCancel} useCapture={true}>
{/* This is just blocking click events from bubbeling and should not have a keyboard interaction. */}
{/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
<div className={cx(styles.filterContainer)} onClick={stopPropagation}>
<VerticalGroup spacing="lg">
<VerticalGroup spacing="xs">

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

@ -1,7 +1,9 @@
import { cx } from '@emotion/css';
import React, { FC } from 'react';
import { useStyles2 } from '../../themes';
import { getCellLinks } from '../../utils';
import { Button, clearLinkButtonStyles } from '../Button';
import { DataLinksContextMenu } from '../DataLinks/DataLinksContextMenu';
import { TableCellProps } from './types';
@ -12,6 +14,7 @@ export const ImageCell: FC<TableCellProps> = (props) => {
const displayValue = field.display!(cell.value);
const hasLinks = Boolean(getCellLinks(field, row)?.length);
const clearButtonStyle = useStyles2(clearLinkButtonStyles);
return (
<div {...cellProps} className={tableStyles.cellContainer}>
@ -19,11 +22,16 @@ export const ImageCell: FC<TableCellProps> = (props) => {
{hasLinks && (
<DataLinksContextMenu style={{ height: '100%' }} links={() => getCellLinks(field, row) || []}>
{(api) => {
return (
<div onClick={api.openMenu} className={cx(tableStyles.imageCellLink, api.targetClassName)}>
<img src={displayValue.text} className={tableStyles.imageCell} alt="" />
</div>
);
const img = <img src={displayValue.text} className={tableStyles.imageCell} alt="" />;
if (api.openMenu) {
return (
<Button className={cx(clearButtonStyle)} onClick={api.openMenu}>
{img}
</Button>
);
} else {
return img;
}
}}
</DataLinksContextMenu>
)}

17
packages/grafana-ui/src/components/Table/JSONViewCell.tsx
View File

@ -2,7 +2,9 @@ import { css, cx } from '@emotion/css';
import { isString } from 'lodash';
import React from 'react';
import { useStyles2 } from '../../themes';
import { getCellLinks } from '../../utils';
import { Button, clearLinkButtonStyles } from '../Button';
import { DataLinksContextMenu } from '../DataLinks/DataLinksContextMenu';
import { CellActions } from './CellActions';
@ -28,6 +30,7 @@ export function JSONViewCell(props: TableCellProps): JSX.Element {
}
const hasLinks = Boolean(getCellLinks(field, row)?.length);
const clearButtonStyle = useStyles2(clearLinkButtonStyles);
return (
<div {...cellProps} className={inspectEnabled ? tableStyles.cellContainerNoOverflow : tableStyles.cellContainer}>
@ -36,11 +39,15 @@ export function JSONViewCell(props: TableCellProps): JSX.Element {
{hasLinks && (
<DataLinksContextMenu links={() => getCellLinks(field, row) || []}>
{(api) => {
return (
<div onClick={api.openMenu} className={api.targetClassName}>
{displayValue}
</div>
);
if (api.openMenu) {
return (
<Button className={cx(clearButtonStyle)} onClick={api.openMenu}>
{displayValue}
</Button>
);
} else {
return <>{displayValue}</>;
}
}}
</DataLinksContextMenu>
)}