Skip to content

Commit

Permalink
Auto-focus ES|QL editor on mount (elastic#193800)
Browse files Browse the repository at this point in the history
## 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 80f938e)
  • Loading branch information
smith committed Sep 24, 2024
1 parent 64e4646 commit 70abb72
Showing 1 changed file with 4 additions and 0 deletions.
4 changes: 4 additions & 0 deletions packages/kbn-esql-editor/src/esql_editor.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 });
}}
/>
</div>
Expand Down

0 comments on commit 70abb72

Please sign in to comment.