From d04f3fb2f1482ffa52071436997e8c92b1dae407 Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Mon, 5 Sep 2022 16:22:50 +0200
Subject: [PATCH] A11y: Make tabs in query history + inspector accessible in
 Explore (#53773) (#53902)

* refactor: make tabs accesible

* refactor: make content after slider accessible

* refactor: add a comment with todo

(cherry picked from commit f5f93ccd967bad422e519f461bf4342b4f2176a0)

Co-authored-by: Laura Benz <48948963+L-M-K-B@users.noreply.github.com>
---
 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}