Every icon in the icon picker has the same screen reader name

Open Beginner friendly
#3,257 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
1/5
Estimated time
1-3 hours
Newbie friendliness
85/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
javascript

Research direction

Read ncIconPicker/partials/Icon.vue, which the issue identifies as using a fixed label while hiding the SVG. Give each icon a readable name in its screen reader label, including when the picker is used outside the application context. Done when screen readers announce distinct icon names in the picker.

Written by the indexing model from the issue text.

Description

0. Needs triage accessibility bug
Steps to reproduce
  1. Open "Create application".
  2. Open the icon picker and move through the icons with Tab and a screen reader.
Expected behavior

Each icon is announced with its own name.

Actual behavior

All icons (about 330) are announced as "Select icon for the application", also where the picker is used for something other than an application.

Tables app version

main (2.4.x); also present on the Tables 2.0 pull requests

Database

MariaDB (dev instance); not database-specific unless noted

Additional info

ncIconPicker/partials/Icon.vue uses a fixed label and hides the SVG. Suggested fix: include a readable icon name in the label.

Found while reviewing #3214.

Dominant language
JavaScript
Stars
220
Forks
57
Avg merge
1d 13h
Merged PRs (30d)
89

Getting set up

Open in Codespaces

Starts the project's dev container in your browser, under your own GitHub account.

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.

More from nextcloud/tables

All issues in nextcloud/tables

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.