[Dashboard] focus on panel title #170786
Assignees
Labels
enhancement
New value added to drive a business result
Feature:Dashboard
Dashboard related features
impact:medium
Addressing this issue will have a medium level of impact on the quality/strength of our product.
loe:small
Small Level of Effort
Team:Presentation
Presentation Team for Dashboard, Input Controls, and Canvas
usability
Comments
drewdaemon
added
enhancement
|
Pinging @elastic/kibana-presentation (Team:Presentation) |
ThomThomson
added
Feature:Dashboard
Merged
5 tasks
Heenawter
added a commit
that referenced
this issue
Jan 4, 2024
…l settings flyout (#173777) Closes #170786 ## Summary Currently, in order to change a panel title, the most efficient way to do this (assuming the dashboard is already in edit mode) is to click on the panel title -> click on the title input in the flyout -> click save at the bottom of the flyout. Notice that this process currently takes **three** clicks, which can start to add up if you need to change multiple titles in one session - so, in order to remove one click from this process, I've made it so that the title input is **auto focused** on when opening the settings flyout through the panel title (and not when it is opened from the context menu). > [!NOTE] > I chose to make this auto-focus behaviour conditional on how the flyout was opened because, from an a11y perspective, it can be jarring to have your focus taken out of the natural element order (as noted in the [EUI docs](https://eui.elastic.co/#/layout/popover#setting-an-initial-focus)). It feels natural that, in order to change the panel title, you click on it - so, auto focusing on the title input makes sense, even when using keyboard controls. However, if you are opening the settings flyout via the context menu, it is **less likely** that the goal is to change the title - so, forcing the focus could feel unnatural in this case. I added tests for this new auto focus behaviour and, since I was interested in learning a bit more about RTL, I also added a few other tests for the dashboard panel components. As part of this, I migrated a few functional tests to unit tests, since this is a faster and more reliable way to test certain rendering conditionals. ### Video https://github.com/elastic/kibana/assets/8698078/229c1303-c81d-46b8-a567-76885361d9fa ### Checklist - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [x] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [x] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)) - [x] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) ### For maintainers - [ ] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) --------- Co-authored-by: kibanamachine <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Describe the feature:
When I click the title of a panel, panel settings opens. Then, I have to click into the title field to actually change the title.
Instead, it would be nice to have my cursor just go straight to the right place since I've already expressed my desire to edit the title in particular.
I especially feel the pain when I'm changing two or three titles which isn't uncommon.
How it works today:
Screen.Recording.2023-11-07.at.11.46.26.AM.mov
The text was updated successfully, but these errors were encountered: