Compare commits

...

4 Commits

Author SHA1 Message Date
Sampath
b38f558248 fixes for lint and compilation errors 2024-01-02 23:05:06 +05:30
Sampath
3c9325ecbc fixes for lint and compilation errors 2024-01-02 23:00:35 +05:30
MokireddySampath
309fcd112e Update PanelContainerComponent.tsx 2024-01-02 22:52:22 +05:30
Sampath
eba617f53f focus management has been done for the save query and close button of dialog 2024-01-02 22:34:56 +05:30
2 changed files with 39 additions and 0 deletions

View File

@@ -76,7 +76,44 @@ 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 => {
const elementIdToFocus = sessionStorage.getItem("focusedElementId") || null;
if (elementIdToFocus) {
const targetElement = document.getElementById(elementIdToFocus);
if (targetElement) {
const focusableParent = this.findFocusableParent(targetElement);
if (focusableParent) {
setTimeout(() => {
if (focusableParent) {
focusableParent.focus();
}
}, 100);
sessionStorage.removeItem("focusedElementId");
}
}
}
if (ev && (ev.target as HTMLElement).id === "notificationConsoleHeader") {
ev.preventDefault();
} else {

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,