Accessiblity problem introduced on new site's code editors #666
Description
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