nextcloud-libraries / nextcloud-libraries/nextcloud-vue
Icons by default have less-than-useful aria-label/title
Nobody has claimed this yet.
- Dominant language
- Vue
- Stars
- 246
- Forks
- 99
- Avg merge
- 1d 20h
- Merged PRs (30d)
- 103
Description
For example, the search in the top right was read by screenreaders as "Magnify icon" because that’s the aria-label and title of the icon:
(Fixed via https://github.com/nextcloud/server/pull/26548/commits/83eb8067895021d980cf54c1755ee140fd92efe0 )
Since even we are doing this mistake, it is very possible that this issue will come up more and more in other apps as well, which would not be good.
Maybe a good solution would be to make the "title" attribute mandatory for icons at least when they are used as icons only? E.g. in the button component where there are icon-only buttons, or in the ActionMenu toggle, or the AppNavigationToggle. @skjnldsv @ma12-co
Edit: Also, the "title" should then be empty if the icon is used decoratively, like in a button component when text is next to it.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reviewing the icon-only button, ActionMenu toggle, and AppNavigationToggle components mentioned in the issue, along with how their aria-label and title values are currently set. Define the behavior for meaningful labels and decorative icons, then verify that screen readers no longer announce generic icon names and that decorative icons have empty titles.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- accessibility, frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100