nextcloud-libraries / nextcloud-libraries/nextcloud-vue

[NcActionText] looks like a button

Open
#5,166 8 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

design feature: actions
Dominant language
Vue
Stars
246
Forks
99
Avg merge
1d 20h
Merged PRs (30d)
103

Description

<NcActionText> - text item of <NcActions> menu.

It looks exactly the same as interactive <NcActionButton>, the only difference is that it has no hover effect.

This leads to a bit unexpected behavior - a user can see the item, but it is unreachable via keyboard (because it is not focusable, not interactive). It is especially noticeable, when there is only one another button - feels like you are stuck on it.

Example: contacts menu

image

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 NcActionText and NcActionButton component definitions, then inspect their use in the contacts menu example. Compare how the two items are presented and tested; done means the non-interactive text item is clearly distinguishable from the keyboard-interactive button and its keyboard behavior is understandable.

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.