add tab navigation option for slickgrid (#21947)

* profiler a11y bug fixes * add new option * replace old implementation * update slickgrid
2026-01-13 17:22:15 -05:00 · 2023-02-15 21:37:01 -08:00
parent 8690c350d2
commit 32c7a4aeec
10 changed files with 26 additions and 31 deletions
--- a/package.json
+++ b/package.json
@@ -104,7 +104,7 @@
    "rxjs": "5.4.0",
    "sanitize-html": "1.19.1",
    "semver-umd": "^5.5.7",
-    "slickgrid": "github:Microsoft/SlickGrid.ADS#2.3.41",
+    "slickgrid": "github:Microsoft/SlickGrid.ADS#2.3.42",
    "spdlog": "^0.13.0",
    "tas-client-umd": "0.1.4",
    "turndown": "^7.0.0",
--- a/remote/package.json
+++ b/remote/package.json
@@ -44,7 +44,7 @@
    "sanitize-html": "1.19.1",
    "semver-umd": "^5.5.7",
    "spdlog": "^0.13.0",
-    "slickgrid": "github:Microsoft/SlickGrid.ADS#2.3.41",
+    "slickgrid": "github:Microsoft/SlickGrid.ADS#2.3.42",
    "turndown": "^7.0.0",
    "turndown-plugin-gfm": "^1.0.2",
    "tas-client-umd": "0.1.4",
--- a/remote/web/package.json
+++ b/remote/web/package.json
@@ -32,7 +32,7 @@
 		"rxjs": "5.4.0",
 		"sanitize-html": "1.19.1",
 		"semver-umd": "^5.5.7",
-		"slickgrid": "github:Microsoft/SlickGrid.ADS#2.3.41",
+		"slickgrid": "github:Microsoft/SlickGrid.ADS#2.3.42",
 		"turndown": "^7.0.0",
 		"turndown-plugin-gfm": "^1.0.2",
 		"tas-client-umd": "0.1.4",
--- a/remote/web/yarn.lock
+++ b/remote/web/yarn.lock
@@ -442,9 +442,9 @@ semver-umd@^5.5.7:
  resolved "https://registry.yarnpkg.com/semver-umd/-/semver-umd-5.5.7.tgz#966beb5e96c7da6fbf09c3da14c2872d6836c528"
  integrity sha512-XgjPNlD0J6aIc8xoTN6GQGwWc2Xg0kq8NzrqMVuKG/4Arl6ab1F8+Am5Y/XKKCR+FceFr2yN/Uv5ZJBhRyRqKg==

-"slickgrid@github:Microsoft/SlickGrid.ADS#2.3.41":
-  version "2.3.41"
-  resolved "https://codeload.github.com/Microsoft/SlickGrid.ADS/tar.gz/6e20c859bf5a1b6956b74fd133138224a62fca60"
+"slickgrid@github:Microsoft/SlickGrid.ADS#2.3.42":
+  version "2.3.42"
+  resolved "https://codeload.github.com/Microsoft/SlickGrid.ADS/tar.gz/29021c4410512d0d644a3b8eb5115bc84ed277e9"

 source-map@^0.6.1:
  version "0.6.1"
--- a/remote/yarn.lock
+++ b/remote/yarn.lock
@@ -904,9 +904,9 @@ simple-get@^4.0.0:
    once "^1.3.1"
    simple-concat "^1.0.0"

-"slickgrid@github:Microsoft/SlickGrid.ADS#2.3.41":
-  version "2.3.41"
-  resolved "https://codeload.github.com/Microsoft/SlickGrid.ADS/tar.gz/6e20c859bf5a1b6956b74fd133138224a62fca60"
+"slickgrid@github:Microsoft/SlickGrid.ADS#2.3.42":
+  version "2.3.42"
+  resolved "https://codeload.github.com/Microsoft/SlickGrid.ADS/tar.gz/29021c4410512d0d644a3b8eb5115bc84ed277e9"

 smart-buffer@^4.2.0:
  version "4.2.0"
--- a/src/sql/workbench/browser/modelComponents/table.component.ts
+++ b/src/sql/workbench/browser/modelComponents/table.component.ts
@@ -21,8 +21,6 @@ import { getContentHeight, getContentWidth, Dimension, isAncestor } from 'vs/bas
 import { RowSelectionModel } from 'sql/base/browser/ui/table/plugins/rowSelectionModel.plugin';
 import { ActionOnCheck, CheckboxSelectColumn, ICheckboxCellActionEventArgs } from 'sql/base/browser/ui/table/plugins/checkboxSelectColumn.plugin';
 import { Emitter, Event as vsEvent } from 'vs/base/common/event';
-import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
-import { KeyMod, KeyCode } from 'vs/base/common/keyCodes';
 import { slickGridDataItemColumnValueWithNoData, textFormatter, iconCssFormatter, CssIconCellValue } from 'sql/base/browser/ui/table/formatters';
 import { isUndefinedOrNull } from 'vs/base/common/types';
 import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType, ModelViewAction } from 'sql/platform/dashboard/browser/interfaces';
@@ -276,7 +274,8 @@ export default class TableComponent extends ComponentBase<azdata.TableComponentP
 				enableColumnReorder: false,
 				enableCellNavigation: true,
 				forceFitColumns: true, // default to true during init, actual value will be updated when setProperties() is called
-				dataItemColumnValueExtractor: slickGridDataItemColumnValueWithNoData // must change formatter if you are changing explicit column value extractor
+				dataItemColumnValueExtractor: slickGridDataItemColumnValueWithNoData, // must change formatter if you are changing explicit column value extractor,
+				enableInGridTabNavigation: this.moveFocusOutWithTab
 			};

 			this._table = new Table<Slick.SlickData>(this._inputContainer.nativeElement, this.accessibilityService, this.quickInputService, { dataProvider: this._tableData, columns: this._tableColumns }, options);
@@ -295,20 +294,6 @@ export default class TableComponent extends ComponentBase<azdata.TableComponentP
 					args: e
 				});
 			}));
-
-			this._table.grid.onKeyDown.subscribe((e: DOMEvent) => {
-				if (this.moveFocusOutWithTab) {
-					let event = new StandardKeyboardEvent(e as KeyboardEvent);
-					if (event.equals(KeyMod.Shift | KeyCode.Tab)) {
-						e.stopImmediatePropagation();
-						(<HTMLElement>(<HTMLElement>this._inputContainer.nativeElement).previousElementSibling).focus();
-
-					} else if (event.equals(KeyCode.Tab)) {
-						e.stopImmediatePropagation();
-						(<HTMLElement>(<HTMLElement>this._inputContainer.nativeElement).nextElementSibling).focus();
-					}
-				}
-			});
 		}
 		this.baseInit();
 	}
--- a/src/sql/workbench/contrib/profiler/browser/profilerEditor.ts
+++ b/src/sql/workbench/contrib/profiler/browser/profilerEditor.ts
@@ -408,7 +408,8 @@ export class ProfilerEditor extends EditorPane {
 			]
 		}, {
 			forceFitColumns: true,
-			dataItemColumnValueExtractor: slickGridDataItemColumnValueExtractor
+			dataItemColumnValueExtractor: slickGridDataItemColumnValueExtractor,
+			enableInGridTabNavigation: false
 		});

 		this._detailTableData.onRowCountChange(() => {
--- a/src/sql/workbench/contrib/profiler/browser/profilerTableEditor.ts
+++ b/src/sql/workbench/contrib/profiler/browser/profilerTableEditor.ts
@@ -96,7 +96,11 @@ export class ProfilerTableEditor extends EditorPane implements IProfilerControll
 				}
 			}
 		}, {
-			dataItemColumnValueExtractor: slickGridDataItemColumnValueExtractor
+			dataItemColumnValueExtractor: slickGridDataItemColumnValueExtractor,
+			// The details component in profiler UI is refreshed based on the selected row in this table.
+			// If in grid tab navigation is enabled, keyboard-only users will never be able to reach the details component
+			// when a particular row is selected.
+			enableInGridTabNavigation: false
 		});
 		this._profilerTable.setSelectionModel(new RowSelectionModel());
 		const copyKeybind = new CopyKeybind();
--- a/src/typings/slickgrid.d.ts
+++ b/src/typings/slickgrid.d.ts
@@ -680,6 +680,11 @@ declare namespace Slick {
 		 * Link to the accessibility issue: https://github.com/microsoft/azuredatastudio/issues/20784
 		 */
 		disableColumnBasedCellVirtualization?: boolean;
+
+		/**
+		 * Whether tab/shift+tab can be used to navigate within the grid, if disabled, the focus will move out of the grid. The default value is true.
+		 */
+		enableInGridTabNavigation?: boolean;
 	}

 	export interface DataProvider<T extends SlickData> {
--- a/yarn.lock
+++ b/yarn.lock
@@ -9521,9 +9521,9 @@ slice-ansi@^2.1.0:
    astral-regex "^1.0.0"
    is-fullwidth-code-point "^2.0.0"

-"slickgrid@github:Microsoft/SlickGrid.ADS#2.3.41":
-  version "2.3.41"
-  resolved "https://codeload.github.com/Microsoft/SlickGrid.ADS/tar.gz/6e20c859bf5a1b6956b74fd133138224a62fca60"
+"slickgrid@github:Microsoft/SlickGrid.ADS#2.3.42":
+  version "2.3.42"
+  resolved "https://codeload.github.com/Microsoft/SlickGrid.ADS/tar.gz/29021c4410512d0d644a3b8eb5115bc84ed277e9"

 smart-buffer@^4.2.0:
  version "4.2.0"