nextcloud-libraries / nextcloud-libraries/nextcloud-vue
a11y: NcUserBubble has clickable `<div/>` inside `<a/>`
Nobody has claimed this yet.
- Dominant language
- Vue
- Stars
- 246
- Forks
- 99
- Avg merge
- 1d 20h
- Merged PRs (30d)
- 103
Description
There NcUserBubble is used as a clickable div to implement manual router navigation. It is a UX and a11y issue (how to open it in a new tab or via keyboard?).
- Instead, it's better to add
RouterLinksupport to this component. Then it will be actually an interactive link element - #5708 -
divcan be replaced withbuttonora role="button"https://github.com/nextcloud-libraries/nextcloud-vue/pull/5708#discussion_r1702778528
Originally posted by @ShGKme in https://github.com/nextcloud-libraries/nextcloud-vue/pull/5708#pullrequestreview-2118511966
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 with the NcUserBubble component and review the linked PR #5708 discussion, especially the accessibility concern. Check whether RouterLink support already addresses the original case, then resolve the remaining clickable div issue by following the stated button or role="button" direction. Done means the component no longer uses a clickable div inside an anchor.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100