From f5f93ccd967bad422e519f461bf4342b4f2176a0 Mon Sep 17 00:00:00 2001
From: Laura Benz <48948963+L-M-K-B@users.noreply.github.com>
Date: Thu, 18 Aug 2022 17:16:37 +0200
Subject: [PATCH] A11y: Make tabs in query history + inspector accessible in
 Explore (#53773)

* refactor: make tabs accesible

* refactor: make content after slider accessible

* refactor: add a comment with todo
---
 packages/grafana-ui/src/components/Slider/RangeSlider.tsx | 2 ++
 packages/grafana-ui/src/components/Tabs/Tab.tsx           | 3 ++-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/grafana-ui/src/components/Slider/RangeSlider.tsx b/packages/grafana-ui/src/components/Slider/RangeSlider.tsx
index 6fbbd592022..4b32222692f 100644
--- a/packages/grafana-ui/src/components/Slider/RangeSlider.tsx
+++ b/packages/grafana-ui/src/components/Slider/RangeSlider.tsx
@@ -47,6 +47,8 @@ export const RangeSlider: FunctionComponent<RangeSliderProps> = ({
         onAfterChange={onAfterChange}
         vertical={!isHorizontal}
         reverse={reverse}
+        // TODO: The following is a temporary work around for making content after the slider accessible and it will be removed when fixing the slider in public/app/features/explore/RichHistory/RichHistoryQueriesTab.tsx.
+        tabIndex={[0, 1]}
       />
     </div>
   );
diff --git a/packages/grafana-ui/src/components/Tabs/Tab.tsx b/packages/grafana-ui/src/components/Tabs/Tab.tsx
index ffa743b861c..7d1309f9d95 100644
--- a/packages/grafana-ui/src/components/Tabs/Tab.tsx
+++ b/packages/grafana-ui/src/components/Tabs/Tab.tsx
@@ -42,7 +42,8 @@ export const Tab = React.forwardRef<HTMLAnchorElement, TabProps>(
     return (
       <div className={tabsStyles.item}>
         <a
-          href={href}
+          // in case there is no href '#' is set in order to maintain a11y
+          href={href ? href : '#'}
           className={linkClass}
           {...otherProps}
           onClick={onChangeTab}