Add option to prevent keyboard focus trapping #5114
Conversation
Codecov ReportPatch coverage:
Additional details and impacted files@@ Coverage Diff @@
## master #5114 +/- ##
=======================================
Coverage 86.64% 86.64%
=======================================
Files 555 555
Lines 43149 43192 +43
Branches 6714 6716 +2
=======================================
+ Hits 37385 37424 +39
- Misses 5764 5768 +4
Flags with carried forward coverage won't be shown. Click here to find out more.
Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here. ☔ View full report in Codecov by Sentry. |
ace.d.ts
Outdated
| @@ -227,6 +227,7 @@ export namespace Ace { | |||
| value: string; | |||
| session: EditSession; | |||
| relativeLineNumbers: boolean; | |||
| keyboardAccessibilityMode: 'content' | 'off'; | |||
There was a problem hiding this comment.
maybe keyboardFocusMode? since the options reflect how the focus would behave more. and maybe not off but default, or trap, or something that would reflect how existing behaviour works?
if you'd really like to stick to keyboardAccessibilityMode, I'd suggest just on and off with proper explanation in wiki/docs/jsdoc (or all at once). but I like keyboardFocusMode more since it's more self-descriptive
There was a problem hiding this comment.
Changed to use a single, boolean, prop.
|
Hey @akoreman - hope all is well! Don't mean to be a bothersome but this is what I was looking for - tho it seems I can not leave / escape ace editor using the ESC key as instructed. |
See ajaxorg/ace#5114 When the text cursor is in the editor, the user can now press the Esc key to exit the editor. Pressing the Enter key when the focus ring is visible around the editor will enter the editor again.
Description ----------- ### Description Whilst tabbing through the layout, I realized that the ace editor acts as a keyboard trap where you'd be trapped forever. This PR fixes it by focusing into the editor with Enter and being able to leave it with ESC. ajaxorg/ace#5114 Old behavior: https://github.com/user-attachments/assets/f657c050-7a27-4b99-baae-ff30b1dc88fb New: https://github.com/user-attachments/assets/3ed41c7e-54db-4b71-ac68-04d8c6fca846 Commits ------- 40ba596 Enable `enableKeyboardAccessibility` for the ace editor
Description ----------- ### Description Whilst tabbing through the layout, I realized that the ace editor acts as a keyboard trap where you'd be trapped forever. This PR fixes it by focusing into the editor with Enter and being able to leave it with ESC. ajaxorg/ace#5114 Old behavior: https://github.com/user-attachments/assets/f657c050-7a27-4b99-baae-ff30b1dc88fb New: https://github.com/user-attachments/assets/3ed41c7e-54db-4b71-ac68-04d8c6fca846 Commits ------- 40ba5963 Enable `enableKeyboardAccessibility` for the ace editor
Issue #3149
When keyboard navigating through a page containing Ace, Ace will capture focus and prevent from leaving using the keyboard. This prevents users who use keyboard navigation to navigate a page with Ace present which present an accessibility concern.
When
preventKeyboardTrapping = truefocus will be set to the div containing the Ace content (instead of given immediately to Ace itself), the user then needs to press theEnterkey to enter Ace. After pressingEscthey can freely tab/shift-tab though the page again.By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.