From 000de83eb4c5dacb21d4dcf1b2c3aa446b7a5314 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Wed, 30 Nov 2022 15:58:10 +0000
Subject: [PATCH] Accessibility: Improve a11y in `DataLinkSuggestions` (#59569)

DataLinkSuggestions: Add role + ignore keyboard lint rule
---
 .../src/components/DataLinks/DataLinkSuggestions.tsx        | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/grafana-ui/src/components/DataLinks/DataLinkSuggestions.tsx b/packages/grafana-ui/src/components/DataLinks/DataLinkSuggestions.tsx
index fe493efe315..841d4c492bd 100644
--- a/packages/grafana-ui/src/components/DataLinks/DataLinkSuggestions.tsx
+++ b/packages/grafana-ui/src/components/DataLinks/DataLinkSuggestions.tsx
@@ -69,7 +69,7 @@ export const DataLinkSuggestions: React.FC<DataLinkSuggestionsProps> = ({ sugges
   const styles = useStyles2(getStyles);
 
   return (
-    <div ref={ref} className={styles.wrapper}>
+    <div role="menu" ref={ref} className={styles.wrapper}>
       {Object.keys(groupedSuggestions).map((key, i) => {
         const indexOffset =
           i === 0
@@ -116,7 +116,11 @@ const DataLinkSuggestionsList: React.FC<DataLinkSuggestionsListProps> = React.me
           renderItem={(item, index) => {
             const isActive = index + activeIndexOffset === activeIndex;
             return (
+              // key events are handled by DataLinkInput
+              // eslint-disable-next-line jsx-a11y/click-events-have-key-events
               <div
+                role="menuitem"
+                tabIndex={0}
                 className={cx(styles.item, isActive && styles.activeItem)}
                 ref={isActive ? selectedRef : undefined}
                 onClick={() => {