From 471a03328b725bf350a07ecf7e67ee742e2b7a56 Mon Sep 17 00:00:00 2001
From: Virginia Cepeda <virginia.cepeda@grafana.com>
Date: Wed, 3 May 2023 09:37:42 -0300
Subject: [PATCH] Alerting: Allow to tab onto elements for a11y (#67684)

* Make search popover be tabbed onto

Co-Authored-By: Sonia Aguilar <33540275+soniaAguilarPeiron@users.noreply.github.com>

* Allow tokens in rule description to be tabbed onto

Co-Authored-By: Sonia Aguilar <33540275+soniaAguilarPeiron@users.noreply.github.com>

---------

Co-authored-by: Sonia Aguilar <33540275+soniaAguilarPeiron@users.noreply.github.com>
---
 public/app/features/alerting/unified/components/HoverCard.tsx | 4 ++++
 public/app/features/alerting/unified/components/Tokenize.tsx  | 4 ++--
 .../alerting/unified/components/rules/RulesFilter.tsx         | 2 +-
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/public/app/features/alerting/unified/components/HoverCard.tsx b/public/app/features/alerting/unified/components/HoverCard.tsx
index 9a8bd56c6e4..8239bd86426 100644
--- a/public/app/features/alerting/unified/components/HoverCard.tsx
+++ b/public/app/features/alerting/unified/components/HoverCard.tsx
@@ -57,6 +57,8 @@ export const HoverCard = ({
                 wrapperClassName={classnames(styles.popover(arrow ? 1.25 : 0), wrapperClassName)}
                 onMouseLeave={hidePopper}
                 onMouseEnter={showPopper}
+                onFocus={showPopper}
+                onBlur={hidePopper}
                 referenceElement={popoverRef.current}
                 renderArrow={
                   arrow
@@ -70,6 +72,8 @@ export const HoverCard = ({
               ref: popoverRef,
               onMouseEnter: showPopper,
               onMouseLeave: hidePopper,
+              onFocus: showPopper,
+              onBlur: hidePopper,
             })}
           </>
         );
diff --git a/public/app/features/alerting/unified/components/Tokenize.tsx b/public/app/features/alerting/unified/components/Tokenize.tsx
index 3866cc3a99a..12ca16617ff 100644
--- a/public/app/features/alerting/unified/components/Tokenize.tsx
+++ b/public/app/features/alerting/unified/components/Tokenize.tsx
@@ -88,12 +88,12 @@ function Token({ content, description, type }: TokenProps) {
       disabled={disableCard}
       content={
         <div className={styles.hoverTokenItem}>
-          <Badge text={<>{type}</>} color={'blue'} /> {description && <code>{description}</code>}
+          <Badge tabIndex={0} text={<>{type}</>} color={'blue'} /> {description && <code>{description}</code>}
         </div>
       }
     >
       <span>
-        <Badge className={styles.token} text={content} color={'blue'} />
+        <Badge tabIndex={0} className={styles.token} text={content} color={'blue'} />
       </span>
     </HoverCard>
   );
diff --git a/public/app/features/alerting/unified/components/rules/RulesFilter.tsx b/public/app/features/alerting/unified/components/rules/RulesFilter.tsx
index b38e4ac6218..9bdc54df798 100644
--- a/public/app/features/alerting/unified/components/rules/RulesFilter.tsx
+++ b/public/app/features/alerting/unified/components/rules/RulesFilter.tsx
@@ -203,7 +203,7 @@ const RulesFilter = ({ onFilterCleared = () => undefined }: RulesFilerProps) =>
                     <Stack gap={0.5}>
                       <span>Search</span>
                       <HoverCard content={<SearchQueryHelp />}>
-                        <Icon name="info-circle" size="sm" />
+                        <Icon name="info-circle" size="sm" tabIndex={0} />
                       </HoverCard>
                     </Stack>
                   </Label>