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 canvas element accessibility (#73483)

Browse Source 
* fix(a11y): canvas tooltip element

* fix(a11y): canvas element selection
This commit is contained in:
Ihor Yeromin 2023-08-21 21:34:47 +02:00 committed by GitHub
parent d913723451
commit 9e1f528919
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 17 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
public/app/features/canvas/runtime/element.tsx
View File

@ -486,6 +486,20 @@ export class ElementState implements LayerElement {
};
onElementClick = (event: React.MouseEvent) => {
this.onTooltipCallback();
};
onElementKeyDown = (event: React.KeyboardEvent) => {
if (
event.key === 'Enter' &&
(event.currentTarget instanceof HTMLElement || event.currentTarget instanceof SVGElement)
) {
const scene = this.getScene();
scene?.select({ targets: [event.currentTarget] });
}
};
onTooltipCallback = () => {
const scene = this.getScene();
if (scene?.tooltipCallback && scene.tooltip?.anchorPoint) {
scene.tooltipCallback({
@ -503,14 +517,15 @@ export class ElementState implements LayerElement {
const isSelected = div && scene && scene.selecto && scene.selecto.getSelectedTargets().includes(div);
return (
// TODO: fix keyboard a11y
// eslint-disable-next-line jsx-a11y/click-events-have-key-events
<div
key={this.UID}
ref={this.initElement}
onMouseEnter={(e: React.MouseEvent) => this.handleMouseEnter(e, isSelected)}
onMouseLeave={!scene?.isEditingEnabled ? this.handleMouseLeave : undefined}
onClick={!scene?.isEditingEnabled ? this.onElementClick : undefined}
onKeyDown={!scene?.isEditingEnabled ? this.onElementKeyDown : undefined}
role="button"
tabIndex={0}
>
<item.display
key={`${this.UID}/${this.revId}`}