feat: Add gutter controls to keyboard accessibility mode #5146
Conversation
…o keyboard_gutter
akoreman
changed the title
Codecov ReportPatch coverage:
Additional details and impacted files@@ Coverage Diff @@
## master #5146 +/- ##
==========================================
+ Coverage 86.84% 86.94% +0.09%
==========================================
Files 558 560 +2
Lines 43734 44220 +486
Branches 6793 6854 +61
==========================================
+ Hits 37980 38446 +466
- Misses 5754 5774 +20
Flags with carried forward coverage won't be shown. Click here to find out more.
☔ View full report in Codecov by Sentry. |
akoreman
changed the title
src/editor.js
Outdated
|
|
||
| this.renderer.$gutter.setAttribute("tabindex", -1); | ||
| this.renderer.$gutter.setAttribute("aria-hidden", true); | ||
| this.renderer.content.setAttribute("role", ""); |
There was a problem hiding this comment.
What is a best approach for removing the aria attributes, is it set them to empty value or remove them completely. I guess I followed a different approach and asking to be consistent.
There was a problem hiding this comment.
I don't think there are differences between how assistive tech interpret it but it probably makes more sense to just remove the attributes. I'll update the PR.
| } | ||
| } | ||
| }; | ||
| this.setAriaLabel = function() { |
There was a problem hiding this comment.
can we maybe merge two functions here: setAriaOptions and setAriaLabel? They seem serving similar purposes.
There was a problem hiding this comment.
If we merge the functions, we'd need to make sure that whenever we call setAriaLabel we pass the same options as the last time we called setAriaOptions which I think would be a hassle given that e.g. autocomplete extensions also call this function.
| return; | ||
| } | ||
|
|
||
| if (Math.abs(nearestAnnotationIndex - index) < Math.abs(nearestFoldIndex - index)){ |
There was a problem hiding this comment.
if they are the same, nearestFoldIndex will get the keyboard focus, isn't it?
There was a problem hiding this comment.
yes, if there is both a fold widget and and an annotation on the nearest line, it defaults to the fold widget.
Issue: #5125, #5145
Adds operating the fold controls and annotations in the gutter to the keyboard accessibility mode. When tabbing through the page, you can focus on the gutter div. When pressing enter, you enter the gutter and can use the arrow keys to navigate through the controls in the gutter. Press enter to interact with the controls. Press escape to set focus back to the gutter div and be able to TAB through the page again.
Only iterates over gutter controls in current viewbox to prevent potentially scrolling the cursor outside of the current view (which can cause a11y problems).
Screen.Recording.2023-05-03.at.14.03.50.mov
Additionally adds title attribute to folding buttons:
Changes to
src/mouse/default_gutter_handler.jsare moving things around to to it easier to useGutterTooltipoutside ofGutterMouseHandler.By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.