focus management has been done for the save query and close button of dialog
This commit is contained in:
parent
c91ac39248
commit
eba617f53f
|
@ -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 {
|
||||
|
|
|
@ -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,
|
||||
|
|
Loading…
Reference in New Issue