Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add option to prevent keyboard focus trapping #5114

Merged
merged 16 commits into from
Apr 12, 2023

Conversation

akoreman
Copy link
Contributor

@akoreman akoreman commented Apr 4, 2023

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 = true focus will be set to the div containing the Ace content (instead of given immediately to Ace itself), the user then needs to press the Enter key to enter Ace. After pressing Esc they 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.

@codecov
Copy link

codecov bot commented Apr 4, 2023

Codecov Report

Patch coverage: 90.69% and no project coverage change.

Comparison is base (26029ef) 86.64% compared to head (86fbb46) 86.64%.

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     
Flag Coverage Δ
unittests 86.64% <90.69%> (+<0.01%) ⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files Coverage Δ
src/css/editor.css.js 100.00% <ø> (ø)
src/editor.js 79.71% <84.00%> (+0.07%) ⬆️
src/editor_navigation_test.js 99.22% <100.00%> (+0.12%) ⬆️

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.
📢 Do you have feedback about the report comment? Let us know in this issue.

@akoreman akoreman marked this pull request as ready for review April 6, 2023 20:39
src/css/editor.css.js Outdated Show resolved Hide resolved
ace.d.ts Outdated
@@ -227,6 +227,7 @@ export namespace Ace {
value: string;
session: EditSession;
relativeLineNumbers: boolean;
keyboardAccessibilityMode: 'content' | 'off';
Copy link
Contributor

Choose a reason for hiding this comment

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

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

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Changed to use a single, boolean, prop.

src/editor_navigation_test.js Outdated Show resolved Hide resolved
src/editor.js Outdated Show resolved Hide resolved
@MarketingPip
Copy link

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.

generalmimon added a commit to kaitai-io/kaitai_struct_webide that referenced this pull request Oct 27, 2024
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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants