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

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

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 => { 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") { if (ev && (ev.target as HTMLElement).id === "notificationConsoleHeader") {
ev.preventDefault(); ev.preventDefault();
} else { } else {

View File

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