mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 17:59:23 -04:00
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/))
This commit is contained in:
parent
04a4942fc7
commit
80f938e174
1 changed files with 4 additions and 0 deletions
|
@ -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>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue