random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-06-05 15:12:04 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix a11y QueryTab focus and close button issue using keyboard (#1069)

Browse Source
This commit is contained in:
vaidankarswapnil 2021-09-17 02:53:55 +05:30 committed by GitHub
parent 38c3761260
commit 300c952a9b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 8 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/Explorer/Tabs/Tabs.tsx
View File

@ -1,5 +1,5 @@
import ko from "knockout"; import ko from "knockout";
import React, { useEffect, useRef, useState } from "react"; import React, { MutableRefObject, useEffect, useRef, useState } from "react";
import loadingIcon from "../../../images/circular_loader_black_16x16.gif"; import loadingIcon from "../../../images/circular_loader_black_16x16.gif";
import errorIcon from "../../../images/close-black.svg"; import errorIcon from "../../../images/close-black.svg";
import { useObservable } from "../../hooks/useObservable"; import { useObservable } from "../../hooks/useObservable";
@ -32,7 +32,13 @@ export const Tabs = (): JSX.Element => {
function TabNav({ tab, active }: { tab: Tab; active: boolean }) { function TabNav({ tab, active }: { tab: Tab; active: boolean }) {
const [hovering, setHovering] = useState(false); const [hovering, setHovering] = useState(false);
const focusTab = useRef<HTMLLIElement>() as MutableRefObject<HTMLLIElement>;
useEffect(() => {
if (active && focusTab.current) {
focusTab.current.focus();
}
});
return ( return (
<li <li
onMouseOver={() => setHovering(true)} onMouseOver={() => setHovering(true)}
@ -46,6 +52,7 @@ function TabNav({ tab, active }: { tab: Tab; active: boolean }) {
aria-controls={tab.tabId} aria-controls={tab.tabId}
tabIndex={0} tabIndex={0}
role="tab" role="tab"
ref={focusTab}
> >
<span className="tabNavContentContainer"> <span className="tabNavContentContainer">
<a data-toggle="tab" href={"#" + tab.tabId} tabIndex={-1}> <a data-toggle="tab" href={"#" + tab.tabId} tabIndex={-1}>