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

@@ -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,
             })}
           </>
         );

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>
   );

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>