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: Improved keyboard accessibility in BigValue (#59830)

Browse Source 
use appropriate elements when rendering BigValue
This commit is contained in:
Leo 2022-12-14 14:28:44 +01:00 committed by GitHub
parent 3a5c3b517c
commit c75ed8fa69
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 23 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,9 +1,11 @@
import { cx } from '@emotion/css';
import React, { PureComponent } from 'react';
import { DisplayValue, DisplayValueAlignmentFactors, FieldSparkline, VizOrientation } from '@grafana/data';
import { VizTextDisplayOptions } from '@grafana/schema';
import { Themeable2 } from '../../types';
import { clearButtonStyles } from '../Button';
import { FormattedValueDisplay } from '../FormattedValueDisplay/FormattedValueDisplay';
import { buildLayout } from './BigValueLayout';
@ -79,7 +81,7 @@ export class BigValue extends PureComponent<Props> {
};
render() {
const { onClick, className, hasLinks } = this.props;
const { onClick, className, hasLinks, theme } = this.props;
const layout = buildLayout(this.props);
const panelStyles = layout.getPanelStyles();
const valueAndTitleContainerStyles = layout.getValueAndTitleContainerStyles();
@ -90,14 +92,32 @@ export class BigValue extends PureComponent<Props> {
// When there is an outer data link this tooltip will override the outer native tooltip
const tooltip = hasLinks ? undefined : textValues.tooltip;
if (!onClick) {
return (
<div className={className} style={panelStyles} title={tooltip}>
<div style={valueAndTitleContainerStyles}>
{textValues.title && <div style={titleStyles}>{textValues.title}</div>}
<FormattedValueDisplay value={textValues} style={valueStyles} />
</div>
{layout.renderChart()}
</div>
);
}
return (
<div className={className} style={panelStyles} onClick={onClick} title={tooltip}>
<button
type="button"
className={cx(clearButtonStyles(theme), className)}
style={panelStyles}
onClick={onClick}
title={tooltip}
>
<div style={valueAndTitleContainerStyles}>
{textValues.title && <div style={titleStyles}>{textValues.title}</div>}
<FormattedValueDisplay value={textValues} style={valueStyles} />
</div>
{layout.renderChart()}
</div>
</button>
);
}
}