From 80f938e174b1e6efce784bd3e44d477b2b512c3a 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/)) --- 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 b4d169f278a0e..244abba93a5f9 100644 --- a/packages/kbn-esql-editor/src/esql_editor.tsx +++ b/packages/kbn-esql-editor/src/esql_editor.tsx @@ -719,6 +719,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 }); }} />