processing / processing/p5.js-web-editor

Accessibility Bug: EditableInput lacks ARIA description

Open
#3,936 4 comments 0 reactions 1 assignee View on GitHub

@pranjal270 is already working on this.

Since Mar 10, 2026.

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

Description

p5.js version

N/A (Web Editor UI issue)

What is your operating system?

Windows

Web browser and version

chrome://145.0.7632.117

Actual Behavior

When focused, the input should expose an accessible name that clearly describes its purpose.

For example, when used in CollectionMetadata.jsx, screen readers should announce labels such as "Collection Name" or "Collection Description" instead of a generic input field announcement.

Expected Behavior

The EditableInput component could accept a description prop and pass it to the underlying input as an accessible label (aria-label or aria-labelledby), allowing contextual screen reader announcements.

Steps to Reproduce
  1. Enable a screen reader (e.g., VoiceOver, NVDA).
  2. Navigate to a user's Collection page.
  3. Click on a collection name or description to activate EditableInput.
  4. Observe that the screen reader announces only a generic input field without context.
Snippet:
// client/modules/IDE/components/EditableInput.jsx (Line 7)
// TODO I think this needs a description prop so that it's accessible
function EditableInput({
  validate,
  // ...

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.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.