nextcloud-libraries / nextcloud-libraries/nextcloud-vue

[NcListItem] actions menu is not accessible via keyboard when not on hover

Open
#6,158 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

1. to develop accessibility bug feature: list-item
Dominant language
Vue
Stars
246
Forks
99
Avg merge
1d 20h
Merged PRs (30d)
103

Description

First I wanted to report this to the app where I encountered the issue (Notes), but then after a bit of digging I found out that most, if not all accessibility issues come from core components.
In this case it's NcListItem and its @update:menuopen action. I'm not a big frontent expert and I really don't know (yet) how to fix it, but this thing seems to be inaccessible not only for screen reader users, but for all keyboard users.

Steps to Reproduce
  1. Open NextCloud notes app.
  2. Add a couple notes.
  3. Hover over any note in the notes list (all of them are instances of NcListItem). You'll eventually see a menu with actions like "Add to Favorites", "Share", "Delete" and so on.
  4. Try to do the same with keyboard only, not using the mouse.

Contributor guide

Open the contributing guide

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.

Research direction

Start by locating the NcListItem component and the @update:menuopen action, then reproduce the behavior from the listed keyboard-only steps in the Notes app. Verify that the actions menu can be reached and operated without hover, including for keyboard and screen-reader users.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.