mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2024-11-25 23:16:56 +00:00
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 => {
|
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 {
|
||||||
|
@ -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,
|
||||||
|
Loading…
Reference in New Issue
Block a user