trap keyboard navigation (#15134)

src/sql/base/browser/dom.ts

@@ -3,7 +3,11 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
+import { addDisposableListener, EventType } from 'vs/base/browser/dom';
 import * as types from 'vs/base/common/types';
+import { IDisposable } from 'vs/base/common/lifecycle';
+import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
+import { KeyCode, KeyMod } from 'vs/base/common/keyCodes';
 
 export function isHidden(element: HTMLElement): boolean {
 	return element.style.display === 'none';
@@ -64,3 +68,33 @@ export function getFocusableElements(container: HTMLElement): HTMLElement[] {
 	});
 	return elements;
 }
+
+/**
+ * Trap the keyboard navigation (Tab/Shift+Tab) inside the specified container
+ * @param container The container element to trap the keyboard focus in
+ * @returns The object to be disposed when the trap should be removed.
+ */
+export function trapKeyboardNavigation(container: HTMLElement): IDisposable {
+	return addDisposableListener(container, EventType.KEY_DOWN, (e) => {
+		const focusableElements = getFocusableElements(container);
+		if (focusableElements.length === 0) {
+			return;
+		}
+		const firstFocusable = focusableElements[0];
+		const lastFocusable = focusableElements[focusableElements.length - 1];
+		const event = new StandardKeyboardEvent(e);
+		let elementToFocus = undefined;
+		if (event.equals(KeyMod.Shift | KeyCode.Tab) && firstFocusable === document.activeElement) {
+			// Backward navigation
+			elementToFocus = lastFocusable;
+		} else if (event.equals(KeyCode.Tab) && lastFocusable === document.activeElement) {
+			// Forward navigation
+			elementToFocus = firstFocusable;
+		}
+
+		if (elementToFocus) {
+			e.preventDefault();
+			elementToFocus.focus();
+		}
+	});
+}

src/sql/base/browser/ui/table/plugins/headerFilter.plugin.ts

@@ -13,6 +13,7 @@ import { withNullAsUndefined } from 'vs/base/common/types';
 import { IDisposableDataProvider } from 'sql/base/common/dataProvider';
 import { IContextViewProvider } from 'vs/base/browser/ui/contextview/contextview';
 import { IInputBoxStyles, InputBox } from 'sql/base/browser/ui/inputBox/inputBox';
+import { trapKeyboardNavigation } from 'sql/base/browser/dom';
 
 export type HeaderFilterCommands = 'sort-asc' | 'sort-desc';
 
@@ -307,6 +308,9 @@ export class HeaderFilter<T extends Slick.SlickData> {
 		jQuery(':checkbox', $filter).bind('click', (e) => {
 			this.workingFilters = this.changeWorkingFilter(filterItems, this.workingFilters, jQuery(e.target));
 		});
+
+		// No need to add this to disposable store, it will be disposed when the menu is closed.
+		trapKeyboardNavigation(this.$menu[0]);
 	}
 
 	public style(styles: ITableFilterStyle): void {