processing / processing/p5.js-web-editor

Keyboard navigation inaccessible for sketch & Collections "Date Created" and "Date Updated" fields

Open
#3,449 4 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Area:Accessibility Bug
Dominant language
JavaScript
Stars
1.7k
Forks
1.7k
Avg merge
3d 4h
Merged PRs (30d)
8

Description

p5.js version

No response

What is your operating system?

None

Web browser and version

No response

Actual Behavior

On the Sketches/Collection page, while the headers Date Created and Date Updated are reachable using the Tab key, the actual date values for each sketch row are not focusable via keyboard navigation. This creates an accessibility barrier:

Keyboard users cannot tab to read the individual sketch date values.

The date fields are properly read by screen readers only when hovered or selected indirectly but not through keyboard focus.

These fields also lack a visible focus ring, making it harder for users who rely on visual indicators for navigation.

Image

Expected Behavior
  • Each sketch’s Date Created and Date Updated field should be reachable via keyboard (tabindex="0" or rendered as focusable elements) in both Section (Sketches & Collection).
  • These fields should include visible focus indicators.
  • Proper ARIA labels or semantic elements should be added for screen reader clarity.
Steps to reproduce
Steps:
  1. Open the "Sketches" or "Collection" page.
  2. Use the Tab key to navigate through the sketch list.
  3. Notice that while the sketch name and dropdown arrow are focusable, the Date Created and Date Updated values are not.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start at the Sketches and Collection pages and locate the components rendering each sketch’s Date Created and Date Updated values. Test keyboard navigation and screen-reader behavior, then make both date fields focusable with visible focus indicators and clear semantic or ARIA labeling; verify both pages manually with the Tab key.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.