From 3f0df997bca573663c973d8ee56bf2685dd00ec9 Mon Sep 17 00:00:00 2001
From: sidverma <siddharth.verma@bigbasket.com>
Date: Wed, 19 May 2021 22:42:06 +0530
Subject: [PATCH] Accessibility: Style now has focus state (#34422)

---
 packages/grafana-ui/src/components/Tabs/Tab.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/grafana-ui/src/components/Tabs/Tab.tsx b/packages/grafana-ui/src/components/Tabs/Tab.tsx
index bd5690b6812..1bdeed1a797 100644
--- a/packages/grafana-ui/src/components/Tabs/Tab.tsx
+++ b/packages/grafana-ui/src/components/Tabs/Tab.tsx
@@ -7,6 +7,7 @@ import { Icon } from '../Icon/Icon';
 import { IconName } from '../../types';
 import { stylesFactory, useTheme2 } from '../../themes';
 import { Counter } from './Counter';
+import { getFocusStyles } from '../../themes/mixins';
 
 export interface TabProps extends HTMLProps<HTMLAnchorElement> {
   label: string;
@@ -62,15 +63,14 @@ const getTabStyles = stylesFactory((theme: GrafanaTheme2) => {
     link: css`
       color: ${theme.colors.text.secondary};
       padding: ${theme.spacing(1.5, 2, 1)};
-
+      display: block;
+      height: 100%;
       svg {
         margin-right: ${theme.spacing(1)};
       }
 
-      a {
-        display: block;
-        height: 100%;
-        color: ${theme.colors.text.secondary};
+      &:focus-visible {
++        ${getFocusStyles(theme)}
       }
     `,
     notActive: css`