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

focus management has been done for the save query and close button of dialog

Browse Source
This commit is contained in:
Sampath 2024-01-02 22:34:56 +05:30
parent c91ac39248
commit eba617f53f
2 changed files with 37 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/Explorer/Panes/PanelContainerComponent.tsx
View File

@ -76,7 +76,42 @@ export class PanelContainerComponent extends React.Component<PanelContainerProps
);
}
public isFocusable(element: HTMLElement) {
return (
element.tabIndex >= 0 ||
(element instanceof HTMLAnchorElement && element.href) ||
(element instanceof HTMLAreaElement && element.href) ||
(element instanceof HTMLInputElement && !element.disabled) ||
(element instanceof HTMLSelectElement && !element.disabled) ||
(element instanceof HTMLTextAreaElement && !element.disabled) ||
(element instanceof HTMLButtonElement && !element.disabled)
);
}
private findFocusableParent = (element: HTMLElement) => {
while (element) {
if (this.isFocusable(element)) {
return element;
}
element = element.parentNode as HTMLElement;
}
return null;
};
private onDissmiss = (ev?: KeyboardEvent | React.SyntheticEvent<HTMLElement>): void => {
let elementIdToFocus = sessionStorage.getItem("focusedElementId") || null;
if (elementIdToFocus) {
let targetElement = document.getElementById(elementIdToFocus);
if (targetElement) {
let focusableParent = this.findFocusableParent(targetElement);
if (focusableParent) {
setTimeout(() => {
focusableParent.focus();
}, 100);
sessionStorage.removeItem("focusedElementId");
}
}
}
if (ev && (ev.target as HTMLElement).id === "notificationConsoleHeader") {
ev.preventDefault();
} else {

2
src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx
View File

@ -224,6 +224,7 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
};
public onSaveQueryClick = (): void => {
sessionStorage.setItem("focusedElementId", "savequery");
useSidePanel.getState().openSidePanel("Save Query", <SaveQueryPane explorer={this.props.collection.container} />);
};
@ -394,6 +395,7 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
const label = "Save Query";
buttons.push({
iconSrc: SaveQueryIcon,
id: "savequery",
iconAlt: label,
onCommandClick: this.onSaveQueryClick,
commandButtonLabel: label,