From ab587b68848dc606f11a8a117a997c1044a6ca25 Mon Sep 17 00:00:00 2001
From: Ihor Yeromin <yeryomin.igor@gmail.com>
Date: Mon, 21 Aug 2023 12:26:12 +0200
Subject: [PATCH] A11y: Fix resource cards accessibility (#73487)

fix(a11y): resource cards
---
 public/app/features/dimensions/editors/ResourceCards.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/public/app/features/dimensions/editors/ResourceCards.tsx b/public/app/features/dimensions/editors/ResourceCards.tsx
index cd264712c7f..156153a2dfe 100644
--- a/public/app/features/dimensions/editors/ResourceCards.tsx
+++ b/public/app/features/dimensions/editors/ResourceCards.tsx
@@ -32,12 +32,17 @@ const MemoizedCell = memo(function Cell(props: CellProps) {
   return (
     <div style={style}>
       {card && (
-        // TODO: fix keyboard a11y
-        // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
         <div
           key={card.value}
           className={selected === card.value ? cx(styles.card, styles.selected) : styles.card}
           onClick={() => onChange(card.value)}
+          onKeyDown={(e: React.KeyboardEvent) => {
+            if (e.key === 'Enter') {
+              onChange(card.value);
+            }
+          }}
+          role="button"
+          tabIndex={0}
         >
           {card.imgUrl.endsWith('.svg') ? (
             <SanitizedSVG src={card.imgUrl} className={styles.img} />