Skip to content

Improve Dev Tools accessibility#13496

Merged
timroes merged 4 commits intoelastic:masterfrom
timroes:devtools-a11y
Aug 18, 2017
Merged

Improve Dev Tools accessibility#13496
timroes merged 4 commits intoelastic:masterfrom
timroes:devtools-a11y

Conversation

@timroes
Copy link
Copy Markdown
Contributor

@timroes timroes commented Aug 14, 2017 •
edited
Loading

Release Note: Console no longer traps keyboard focus. You can quit editing with Escape.

This PR will make the console in the devtools more accessible and fix #11522

The console input will now have the same keyboard mode introduced #13339
Also the action buttons are now accessible via keyboard.

There are some issues still open on which I would like feedback:

  • If you press the "play" button, the editor is currently focused. This is done, so that someone pressing the button after typing, won't lose the focus on the textarea for the button, but it will automatically jump back to the textarea. This is in my opinion good usability. But therefor if a user, navigates to the button by Tab and then presses Enter the focus is also moved to the textarea. That way the user will never see the overlay screen, that she can press Escape to exit the typing mode again. It will of course still work, but we have given no hint to the user about that feature. I think since the "send request" button might not be the first element to interact with, the user already has used the code editor once, and is most likely aware how to exit it. I think we don't need to change that behavior, but would like your feedback.
  • The initial focus of the page is set to the editor. The same issue as above occurs. The user might never see the hint, that Escape will exit the editing mode. Since setting the initial focus to the input is in my opinion also good usability, I am neither sure, if we should change anything here. We could either not focus anything at all, or we could focus the overlay, so the page starts with the hint, which wouldn't also be ideal, since I think most users would otherwise never see this overlay, since they navigate by mouse.

Tim Roes added 3 commits August 14, 2017 08:46
Make console actions accessible
3f2351f 
Use a button isntead of a link will solve all accessibility issues, and
we just need to style the button the same way we style the links.
Create kbnUiAceKeyboardModeService
9531719 
This will be needed for situations in which the initialization need to
be started manually, and a simple directive won't be enough.
Make console input box accessible
d6375b9
@timroes timroes changed the title [WIP] Make devtools accessible Make devtools accessible Aug 14, 2017
@timroes timroes added the review label Aug 14, 2017
@timroes
Copy link
Copy Markdown
Contributor Author

timroes commented Aug 14, 2017

Jenkins, test this

@timroes timroes requested a review from spalger August 15, 2017 06:24
aphelionz
aphelionz approved these changes Aug 15, 2017
View reviewed changes
Copy link
Copy Markdown
Contributor

@aphelionz aphelionz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

cjcenizal
cjcenizal approved these changes Aug 16, 2017
View reviewed changes
Copy link
Copy Markdown
Contributor

@cjcenizal cjcenizal left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great @timroes! I did notice that I wasn't able to tab into the code editor under the "History" tab. Is this something you want to address as part of this PR?

src/core_plugins/console/public/index.html
@@ -27,10 +28,10 @@
aria-labelledby="consoleRequestOptions"
Copy link
Copy Markdown
Contributor

@cjcenizal cjcenizal Aug 16, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we change this element to a <button> too?

Copy link
Copy Markdown
Contributor Author

@timroes timroes Aug 17, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I assume, you doesn't mean the ul, but got confused with the lines (most likely because GitHub collapsed the code in the middle of the element :D) I anyway made both a.editor-action also into buttons.

Copy link
Copy Markdown
Contributor

@cjcenizal cjcenizal Aug 17, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oops yep that's what I meant! Thanks.

@timroes timroes changed the title Make devtools accessible Improve Dev Tools accessibility Aug 18, 2017
@timroes timroes merged commit f66c5db into elastic:master Aug 18, 2017
@timroes timroes deleted the devtools-a11y branch August 18, 2017 07:55
@timroes
Copy link
Copy Markdown
Contributor Author

timroes commented Aug 18, 2017

Backports:

timroes added a commit that referenced this pull request Aug 18, 2017
@timroes
Improve Dev Tools accessibility (#13496)
65768dd 
* Make console actions accessible

Use a button isntead of a link will solve all accessibility issues, and
we just need to style the button the same way we style the links.

* Create kbnUiAceKeyboardModeService

This will be needed for situations in which the initialization need to
be started manually, and a simple directive won't be enough.

* Make console input box accessible

* Make editor_actions buttons instead of links
@timroes timroes removed the review label Nov 17, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@lukasolson lukasolson Awaiting requested review from lukasolson

@spalger spalger Awaiting requested review from spalger

2 more reviewers

@cjcenizal cjcenizal cjcenizal approved these changes

@aphelionz aphelionz aphelionz approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

Feature:Dev Tools Project:Accessibility release_note:enhancement v6.1.0 v7.0.0

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Accessibility: Console keyboard focus is trapped

3 participants

@timroes @aphelionz @cjcenizal