From 70abb72df2a624c24f5fe05adb435afa85729967 Mon Sep 17 00:00:00 2001 From: Nathan L Smith Date: Tue, 24 Sep 2024 01:29:46 -0500 Subject: [PATCH] Auto-focus ES|QL editor on mount (#193800) ## Summary Currently, when the page loads, in order to start interacting with the ES|QL editor using keyboard navigation, you must: * Tab to the "Skip to main content" link * Follow that link * Tab through the tab and toolbar elements until you get to the editor * Press END or CTRL-E or down-down-down-down, depending on what's in the editor text box * Type my query This change auto-focuses the editor and moves the cursor to the end when the editor is mounted. The [ARIA Authoring Practices Guide (APG) for Developing a Keyboard Interface](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/) says: > * Do not set initial focus when the page loads except in cases where: > ** The page offers a single, primary function that nearly all users employ immediately after page load. > ** Any given user is likely to use the page often. When using ES|QL in discover you almost always want to initially focus on the query, look at the results, and further refine the query. ### Checklist - [x] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) (cherry picked from commit 80f938e174b1e6efce784bd3e44d477b2b512c3a) --- packages/kbn-esql-editor/src/esql_editor.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/kbn-esql-editor/src/esql_editor.tsx b/packages/kbn-esql-editor/src/esql_editor.tsx index 337c0133e7d20..1e8312e5d6a7e 100644 --- a/packages/kbn-esql-editor/src/esql_editor.tsx +++ b/packages/kbn-esql-editor/src/esql_editor.tsx @@ -711,6 +711,10 @@ export const ESQLEditor = memo(function ESQLEditor({ }); editor.onDidChangeModelContent(showSuggestionsIfEmptyQuery); + + // Auto-focus the editor and move the cursor to the end. + editor.focus(); + editor.setPosition({ column: Infinity, lineNumber: Infinity }); }} />