IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-11 16:15:42 -06:00
Code Issues Packages Projects Releases Wiki Activity

A11y: Fix exemplar marker accessibility (#73493)

Browse Source 
* fix(a11y): exemplar marker
This commit is contained in:
Ihor Yeromin 2023-08-22 18:59:36 +02:00 committed by GitHub
parent bf5f2c8fb1
commit 6db5ef2b82
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 12 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
public/app/plugins/panel/timeseries/plugins/ExemplarMarker.tsx
View File

@ -202,20 +202,27 @@ export const ExemplarMarker = ({
.getSeries()
.find((s) => s.props.dataFrameFieldIndex?.frameIndex === dataFrameFieldIndex.frameIndex)?.props.lineColor;
const onExemplarClick = () => {
setClickedExemplarFieldIndex(dataFrameFieldIndex);
lockExemplarModal();
};
return (
<>
{/* TODO: fix keyboard a11y */}
{/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
<div
ref={setMarkerElement}
onClick={() => {
setClickedExemplarFieldIndex(dataFrameFieldIndex);
lockExemplarModal();
onClick={onExemplarClick}
onKeyDown={(e: React.KeyboardEvent) => {
if (e.key === 'Enter') {
onExemplarClick();
}
}}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
className={styles.markerWrapper}
aria-label={selectors.components.DataSource.Prometheus.exemplarMarker}
role="button"
tabIndex={0}
>
<svg
viewBox="0 0 7 7"