Skip to content

Some aria-labels are hardcoded in English instead of using i18n #3849

@avinxshKD

Description

@avinxshKD

p5.js version

develop branch

What is your operating system?

None

Web browser and version

Web browser and version

Actual Behavior

I was looking at accessibility stuff and noticed a few spots where aria-labels are hardcoded in English rather than going through the t() function.
Here's what I found:

  • Pagination.jsx → aria-label="Previous Page" and aria-label="Next Page"
  • VersionPicker.jsx → aria-label="Select p5.js version"
  • Toast.jsx → aria-label="Close Alert"
  • TextArea.jsx → aria-label="Copy"
  • QuickAddList/Icons.jsx → both icons have aria-label="Descending" which looks like a copy-paste mistake tbh, one's a close icon and one's a check icon
    So basically if someone switches the editor to Hindi or Spanish, their screen reader will still read these labels in English.

Expected Behavior

These should use t() like the rest of the codebase does. Looking at translations.json, there's already a nice pattern with the *ARIA suffix (like CloseButtonARIA, DirectionAscendingARIA, etc.) so the fix should be pretty straightforward.

Steps to reproduce

  1. Switch editor language to non-English
  2. Use a screen reader
  3. Tab through the pagination buttons on the Sketches page
  4. Buttons still get announced as "Previous Page" / "Next Page" in English

Metadata

Metadata

Assignees

Labels

Area:AccessibilityCategory for accessibility related features and bugsBugError or unexpected behaviors

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions