diff --git a/packages/grafana-e2e-selectors/src/selectors/pages.ts b/packages/grafana-e2e-selectors/src/selectors/pages.ts index 95d4ec5dd77..4dc2a1a5fc7 100644 --- a/packages/grafana-e2e-selectors/src/selectors/pages.ts +++ b/packages/grafana-e2e-selectors/src/selectors/pages.ts @@ -125,7 +125,9 @@ export const Pages = { url: '/explore', General: { container: 'Explore', + graph: 'Explore Graph', runButton: 'Run button', + table: 'Explore Table', }, Toolbar: { navBar: '.explore-toolbar', diff --git a/packages/grafana-ui/src/components/Graph/Graph.tsx b/packages/grafana-ui/src/components/Graph/Graph.tsx index 7c50ec58888..0e83e4dcf0e 100644 --- a/packages/grafana-ui/src/components/Graph/Graph.tsx +++ b/packages/grafana-ui/src/components/Graph/Graph.tsx @@ -13,6 +13,7 @@ import { GraphDimensions } from './GraphTooltip/types'; import { graphTimeFormat, graphTickFormatter } from './utils'; export interface GraphProps { + ariaLabel?: string; children?: JSX.Element | JSX.Element[]; series: GraphSeriesXY[]; timeRange: TimeRange; // NOTE: we should aim to make `time` a property of the axis, not force it for all graphs @@ -361,12 +362,12 @@ export class Graph extends PureComponent { } render() { - const { height, width, series } = this.props; + const { ariaLabel, height, width, series } = this.props; const noDataToBeDisplayed = series.length === 0; const tooltip = this.renderTooltip(); const context = this.renderContextMenu(); return ( -
+
(this.element = e)} diff --git a/packages/grafana-ui/src/components/Graph/GraphWithLegend.tsx b/packages/grafana-ui/src/components/Graph/GraphWithLegend.tsx index 4dfc924eb44..21daebc758b 100644 --- a/packages/grafana-ui/src/components/Graph/GraphWithLegend.tsx +++ b/packages/grafana-ui/src/components/Graph/GraphWithLegend.tsx @@ -73,6 +73,7 @@ export const GraphWithLegend: React.FunctionComponent = (p onHorizontalRegionSelected, timeZone, children, + ariaLabel, } = props; const { graphContainer, wrapper, legendContainer } = getGraphWithLegendStyles(props); @@ -91,7 +92,7 @@ export const GraphWithLegend: React.FunctionComponent = (p }, []); return ( -
+
= memo((props: Props) => { const { + ariaLabel, data, height, onCellFilterAdded, @@ -182,7 +184,7 @@ export const Table: FC = memo((props: Props) => { const headerHeight = noHeader ? 0 : tableStyles.cellHeight; return ( -
+
{!noHeader && ( diff --git a/public/app/features/explore/Explore.tsx b/public/app/features/explore/Explore.tsx index a10126955fd..6f4cc1b8f42 100644 --- a/public/app/features/explore/Explore.tsx +++ b/public/app/features/explore/Explore.tsx @@ -389,6 +389,7 @@ export class Explore extends React.PureComponent { <> {showMetrics && ( { )} {showTable && ( ({ }); interface Props extends Themeable { + ariaLabel?: string; series?: GraphSeriesXY[] | null; width: number; absoluteRange: AbsoluteTimeRange; @@ -87,6 +88,7 @@ class UnThemedExploreGraphPanel extends PureComponent { renderGraph = () => { const { + ariaLabel, width, series, onHiddenSeriesChanged, @@ -123,6 +125,7 @@ class UnThemedExploreGraphPanel extends PureComponent { {({ onSeriesToggle, toggledSeries }: GraphSeriesTogglerAPI) => { return ( { } render() { - const { loading, onCellFilterAdded, showingTable, tableResult, width, splitOpen, range } = this.props; + const { loading, onCellFilterAdded, showingTable, tableResult, width, splitOpen, range, ariaLabel } = this.props; const height = this.getTableHeight(); const tableWidth = width - config.theme.panelPadding * 2 - PANEL_BORDER; @@ -61,7 +62,13 @@ export class TableContainer extends PureComponent { return ( {hasTableResult ? ( - +
) : ( )}