random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2024-11-25 06:56:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

[accessibility-1217621]:[Usable - Azure Cosmos DB - Data Explorer]: Keyboard focus gets lost on the page which opens after activating "Data Explorer" menu item present under 'Overview' page.

Browse Source
This commit is contained in:
Satyapriya Bai 2024-08-12 12:36:09 +05:30
parent 62c76cc264
commit e3503d2b9c
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/Sidebar.tsx
View File

@ -208,7 +208,7 @@ export const SidebarContainer: React.FC<SidebarProps> = ({ explorer }) => {
const [expandedSize, setExpandedSize] = React.useState(300); const [expandedSize, setExpandedSize] = React.useState(300);
const hasSidebar = userContext.apiType !== "Postgres" && userContext.apiType !== "VCoreMongo"; const hasSidebar = userContext.apiType !== "Postgres" && userContext.apiType !== "VCoreMongo";
const allotment = useRef<AllotmentHandle>(null); const allotment = useRef<AllotmentHandle>(null);
const firstFocusableElementRef = useRef<HTMLButtonElement>(null);
const expand = useCallback(() => { const expand = useCallback(() => {
if (!expanded) { if (!expanded) {
allotment.current.resize([expandedSize, Infinity]); allotment.current.resize([expandedSize, Infinity]);
@ -255,6 +255,12 @@ export const SidebarContainer: React.FC<SidebarProps> = ({ explorer }) => {
userContext.apiType === "VCoreMongo" userContext.apiType === "VCoreMongo"
); );
useEffect(() => {
if (expanded && firstFocusableElementRef.current) {
firstFocusableElementRef.current.focus();
}
}, [expanded]);
return ( return (
<Allotment ref={allotment} onChange={onChange} onDragEnd={onDragEnd} className="resourceTreeAndTabs"> <Allotment ref={allotment} onChange={onChange} onDragEnd={onDragEnd} className="resourceTreeAndTabs">
{/* Collections Tree - Start */} {/* Collections Tree - Start */}
@ -278,6 +284,7 @@ export const SidebarContainer: React.FC<SidebarProps> = ({ explorer }) => {
disabled={loading} disabled={loading}
title="Refresh" title="Refresh"
onClick={onRefreshClick} onClick={onRefreshClick}
ref={firstFocusableElementRef}
> >
<ArrowSync12Regular /> <ArrowSync12Regular />
</button> </button>