From 6b9fbf8ce5463b78c8289f2694a0ac7c2d8f238f Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Tue, 24 Sep 2024 18:05:44 +1000
Subject: [PATCH] [8.x] Auto-focus ES|QL editor on mount (#193800) (#193818)

# Backport

This will backport the following commits from `main` to `8.x`:
- [Auto-focus ES|QL editor on mount
(#193800)](https://github.com/elastic/kibana/pull/193800)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Nathan L
Smith","email":"nathan.smith@elastic.co"},"sourceCommit":{"committedDate":"2024-09-24T06:29:46Z","message":"Auto-focus
ES|QL editor on mount (#193800)\n\n## Summary\r\n\r\nCurrently, when the
page loads, in order to start interacting with the\r\nES|QL editor using
keyboard navigation, you must:\r\n\r\n* Tab to the \"Skip to main
content\" link\r\n* Follow that link\r\n* Tab through the tab and
toolbar elements until you get to the editor\r\n* Press END or CTRL-E or
down-down-down-down, depending on what's in the\r\neditor text box\r\n*
Type my query\r\n\r\nThis change auto-focuses the editor and moves the
cursor to the end when\r\nthe editor is mounted.\r\n\r\nThe [ARIA
Authoring Practices Guide (APG) for Developing a
Keyboard\r\nInterface](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/)\r\nsays:\r\n\r\n>
* Do not set initial focus when the page loads except in cases
where:\r\n> ** The page offers a single, primary function that nearly
all users\r\nemploy immediately after page load.\r\n> ** Any given user
is likely to use the page often.\r\n\r\nWhen using ES|QL in discover you
almost always want to initially focus\r\non the query, look at the
results, and further refine the query.\r\n\r\n### Checklist\r\n\r\n- [x]
Any UI touched in this PR is usable by keyboard only (learn
more\r\nabout [keyboard
accessibility](https://webaim.org/techniques/keyboard/))","sha":"80f938e174b1e6efce784bd3e44d477b2b512c3a","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:enhancement","v9.0.0","backport:prev-minor","Feature:ES|QL","Team:ESQL","v8.16.0"],"title":"Auto-focus
ES|QL editor on
mount","number":193800,"url":"https://github.com/elastic/kibana/pull/193800","mergeCommit":{"message":"Auto-focus
ES|QL editor on mount (#193800)\n\n## Summary\r\n\r\nCurrently, when the
page loads, in order to start interacting with the\r\nES|QL editor using
keyboard navigation, you must:\r\n\r\n* Tab to the \"Skip to main
content\" link\r\n* Follow that link\r\n* Tab through the tab and
toolbar elements until you get to the editor\r\n* Press END or CTRL-E or
down-down-down-down, depending on what's in the\r\neditor text box\r\n*
Type my query\r\n\r\nThis change auto-focuses the editor and moves the
cursor to the end when\r\nthe editor is mounted.\r\n\r\nThe [ARIA
Authoring Practices Guide (APG) for Developing a
Keyboard\r\nInterface](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/)\r\nsays:\r\n\r\n>
* Do not set initial focus when the page loads except in cases
where:\r\n> ** The page offers a single, primary function that nearly
all users\r\nemploy immediately after page load.\r\n> ** Any given user
is likely to use the page often.\r\n\r\nWhen using ES|QL in discover you
almost always want to initially focus\r\non the query, look at the
results, and further refine the query.\r\n\r\n### Checklist\r\n\r\n- [x]
Any UI touched in this PR is usable by keyboard only (learn
more\r\nabout [keyboard
accessibility](https://webaim.org/techniques/keyboard/))","sha":"80f938e174b1e6efce784bd3e44d477b2b512c3a"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/193800","number":193800,"mergeCommit":{"message":"Auto-focus
ES|QL editor on mount (#193800)\n\n## Summary\r\n\r\nCurrently, when the
page loads, in order to start interacting with the\r\nES|QL editor using
keyboard navigation, you must:\r\n\r\n* Tab to the \"Skip to main
content\" link\r\n* Follow that link\r\n* Tab through the tab and
toolbar elements until you get to the editor\r\n* Press END or CTRL-E or
down-down-down-down, depending on what's in the\r\neditor text box\r\n*
Type my query\r\n\r\nThis change auto-focuses the editor and moves the
cursor to the end when\r\nthe editor is mounted.\r\n\r\nThe [ARIA
Authoring Practices Guide (APG) for Developing a
Keyboard\r\nInterface](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/)\r\nsays:\r\n\r\n>
* Do not set initial focus when the page loads except in cases
where:\r\n> ** The page offers a single, primary function that nearly
all users\r\nemploy immediately after page load.\r\n> ** Any given user
is likely to use the page often.\r\n\r\nWhen using ES|QL in discover you
almost always want to initially focus\r\non the query, look at the
results, and further refine the query.\r\n\r\n### Checklist\r\n\r\n- [x]
Any UI touched in this PR is usable by keyboard only (learn
more\r\nabout [keyboard
accessibility](https://webaim.org/techniques/keyboard/))","sha":"80f938e174b1e6efce784bd3e44d477b2b512c3a"}},{"branch":"8.x","label":"v8.16.0","branchLabelMappingKey":"^v8.16.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Nathan L Smith <nathan.smith@elastic.co>
---
 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 });
                   }}
                 />
               </div>