Skip to content

Accessibility Bug: EditableInput lacks ARIA description #3936

@pranjal270

Description

@pranjal270

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,
  // ...

Metadata

Metadata

Assignees

Labels

BugError or unexpected behaviors

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions