processing / p5.js-web-editor

The p5.js Editor is a website for creating p5.js sketches, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else! You can create, share, or remix p5.js sketches without needing to download or configure anything.
https://editor.p5js.org
GNU Lesser General Public License v2.1
1.36k stars 1.32k forks source link

Editor is a focus trap #3085

Closed sampottinger closed 4 months ago

sampottinger commented 5 months ago

p5.js version

N/A (Online Editor)

What is your operating system?

Linux

Web browser and version

Firefox 142

Actual Behavior

Entering the editor is possible with the keyboard but it isn't possible to leave it using the escape key. This is a "focus trap" which is covered in WCAG 2.1.2.

Expected Behavior

This may be a possible hint for fixing in a recent change in ACE editor behavior which is resolved recently in https://github.com/ajaxorg/ace/pull/5114

Steps to reproduce

Steps:

  1. Open the p5.js web editor
  2. Give the code editor focus
  3. Try to leave the code editor
sampottinger commented 5 months ago

See https://codeberg.org/sketchingpy/Sketchingpy/pulls/65/files for example of recent fix we saw on https://sketchingpy.org

raclim commented 5 months ago

Thanks for raising this and suggesting a potential fix!