IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Accessibility: Render gauge as a button when onClick is provided (#60396)

Browse Source 
render gauge as a button when onClick is provided
This commit is contained in:
Ashley Harrison 2022-12-19 09:40:45 +00:00 committed by GitHub
parent b1ef5ab320
commit 3c399ed943
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 28 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/grafana-ui/src/components/Gauge/Gauge.test.tsx
View File

@ -1,4 +1,5 @@
import { render } from '@testing-library/react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React from 'react';
import { ThresholdsMode, FieldConfig, FieldColorModeId, createTheme } from '@grafana/data';
@ -41,4 +42,13 @@ describe('Gauge', () => {
it('should render without blowing up', () => {
expect(() => render(<Gauge {...props} />)).not.toThrow();
});
it('should render as a button when an onClick is provided', async () => {
const mockOnClick = jest.fn();
render(<Gauge {...props} onClick={mockOnClick} />);
const gaugeButton = screen.getByRole('button');
expect(gaugeButton).toBeInTheDocument();
await userEvent.click(gaugeButton);
expect(mockOnClick).toHaveBeenCalledTimes(1);
});
});

26
packages/grafana-ui/src/components/Gauge/Gauge.tsx
View File

@ -8,12 +8,12 @@ import {
ThresholdsMode,
GAUGE_DEFAULT_MAXIMUM,
GAUGE_DEFAULT_MINIMUM,
GrafanaTheme,
GrafanaTheme2,
} from '@grafana/data';
import { VizTextDisplayOptions } from '@grafana/schema';
import { calculateFontSize } from '../../utils/measureText';
import { clearButtonStyles } from '../Button';
import { calculateGaugeAutoProps, DEFAULT_THRESHOLDS, getFormattedThresholds } from './utils';
@ -27,7 +27,7 @@ export interface Props {
text?: VizTextDisplayOptions;
onClick?: React.MouseEventHandler<HTMLElement>;
className?: string;
theme: GrafanaTheme | GrafanaTheme2;
theme: GrafanaTheme2;
}
export class Gauge extends PureComponent<Props> {
@ -56,7 +56,7 @@ export class Gauge extends PureComponent<Props> {
const autoProps = calculateGaugeAutoProps(width, height, value.title);
const dimension = Math.min(width, autoProps.gaugeHeight);
const backgroundColor = 'v1' in theme ? theme.colors.background.secondary : theme.colors.bg2;
const backgroundColor = theme.colors.background.secondary;
const gaugeWidthReduceRatio = showThresholdLabels ? 1.5 : 1;
const gaugeWidth = Math.min(dimension / 5.5, 40) / gaugeWidthReduceRatio;
const thresholdMarkersWidth = gaugeWidth / 5;
@ -145,16 +145,24 @@ export class Gauge extends PureComponent<Props> {
}
renderVisualization = () => {
const { width, value, height, onClick, text } = this.props;
const { width, value, height, onClick, text, theme } = this.props;
const autoProps = calculateGaugeAutoProps(width, height, value.title);
const gaugeElement = (
<div
style={{ height: `${autoProps.gaugeHeight}px`, width: '100%' }}
ref={(element) => (this.canvasElement = element)}
/>
);
return (
<>
<div
style={{ height: `${autoProps.gaugeHeight}px`, width: '100%' }}
ref={(element) => (this.canvasElement = element)}
onClick={onClick}
/>
{onClick ? (
<button className={clearButtonStyles(theme)} type="button" onClick={onClick}>
{gaugeElement}
</button>
) : (
gaugeElement
)}
{autoProps.showLabel && (
<div
style={{