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

Co-authored-by: Laura Benz <48948963+L-M-K-B@users.noreply.github.com>

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

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}