From 546b2deb13ae5d86c03dbd5e639cf0c90296ce42 Mon Sep 17 00:00:00 2001
From: Ihor Yeromin <yeryomin.igor@gmail.com>
Date: Mon, 21 Aug 2023 21:35:18 +0200
Subject: [PATCH] A11y: Fix resource picker accessibility (#73488)

* fix(a11y): resource picker
---
 .../dimensions/editors/ResourcePicker.tsx         | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/public/app/features/dimensions/editors/ResourcePicker.tsx b/public/app/features/dimensions/editors/ResourcePicker.tsx
index 209403bd3ff..488c32c8970 100644
--- a/public/app/features/dimensions/editors/ResourcePicker.tsx
+++ b/public/app/features/dimensions/editors/ResourcePicker.tsx
@@ -96,9 +96,18 @@ export const ResourcePicker = (props: Props) => {
               />
             )}
 
-            {/* TODO: fix keyboard a11y */}
-            {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
-            <div ref={pickerTriggerRef} onClick={showPopper} className={styles.pointer}>
+            <div
+              ref={pickerTriggerRef}
+              className={styles.pointer}
+              onClick={showPopper}
+              onKeyDown={(e: React.KeyboardEvent) => {
+                if (e.key === 'Enter') {
+                  showPopper();
+                }
+              }}
+              role="button"
+              tabIndex={0}
+            >
               {size === ResourcePickerSize.SMALL && renderSmallResourcePicker()}
               {size === ResourcePickerSize.NORMAL && renderNormalResourcePicker()}
             </div>