Accessiblity problem introduced on new site's code editors

[calebfoss]

Most appropriate sections of the p5.js website?

Examples

What is your operating system?

Windows

Web browser and version

No response

Actual Behavior

Code editors on the Examples and Reference pages trap keyboard navigation, breaking WCAG Success Criterion 2.1.2: No Keyboard Trap.

This obstructs people with disabilities who navigate web pages using tab.

Expected Behavior

The site supports keyboard navigation, following basic accessibility standards.

This problem can be solved by setting the indentWithTab prop to false on the CodeMirror React component.

If you still want to allow site visitors to insert tabs into code, there are a few ways to do so. CodeMirror, the tool the new site uses, includes documentation on handling tab in an accessible way. This issue was solved on the old site by @katlich112358 by using shift+space to insert tabs into code instead of the tab key.

I urge the maintainers to run an accessibility audit on the new site to catch issues like this.

Steps to reproduce

No response

Would you like to work on the issue?

Yes