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:
Nathan L Smith 2024-09-24 01:29:46 -05:00 committed by GitHub
parent 04a4942fc7
commit 80f938e174
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -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>