nextcloud / nextcloud/polls

[A11Y] Problems with labels

Open
#4,783 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

UX
Dominant language
JavaScript
Stars
284
Forks
91
Avg merge
4d 3h
Merged PRs (30d)
50

Description

Elements found:

The label here is shown only when the user didn't insert any text. Now that I started typing, you can't see it anymore. New version of nextcloud vue solve this by using the label prop on NcInput. This happens frequently throughout the app.
Image

This "i" style label cannot be opened or closed with a keyboard
Image

Here in "add time" most labels are missing the "for" property, linking them to the actual input. The "duration time unit" label is correct, meanwhile the "duration" and other ones aren't.
Image

⚠️ This issue respects the following points: ⚠️
  • This is a bug, not a question or a configuration/webserver/proxy issue.
  • This issue is not already reported on Github (I've searched it).
  • I agree to follow Nextcloud's Code of Conduct.
What went wrong, what did you observe?

Not all labels are accessible

What did you expect, how polls should behave instead?

How labels should be to be fully accessible:

  1. Linked to the input field via referencing HTML selector
  2. Should not disappear while typing
  3. If popups should be accessible via keyboard/tab navigation
What steps does it need to replay this bug?
  1. Observe labels throughout the app with devtools
Affected polls version

main

Installation method

Installed/updated from the appstore (Apps section of your site)

Installation type

First time installation

Can you rule out that any extension you use is involved in the issue?
  • I have checked all browser extension
Which browser did you use, when experiencing the bug?
  • Firefox
  • Chrome
  • Chromium/Chromium based (i.e. Edge)
  • Safari
  • Other/Don't know
Other browser

No response

Add your browser log here

Additional client environment information

No response

NC version

Nextcloud 33 (Hub 26 Winter)

Other Nextcloud version

No response

PHP engine version

PHP 8.1

Other PHP version

No response

Database engine

MySQL

Database Engine version or other Database

No response

Which user-backends are you using?
  • Default user-backend (database)
  • LDAP/ Active Directory
  • SSO - SAML
  • Other/Don't know
Add your nextcloud server log here

Additional environment informations

No response

Configuration report

List of activated Apps

Nextcloud Signing status

Additional Information

No response

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 inspecting label usages throughout the app with browser devtools, focusing on the NcInput instances and the “i” style labels shown in the screenshots. Check the add-time form’s label/input associations and keyboard behavior. Done means labels remain available while typing, labels reference their inputs, and popups are keyboard accessible across the affected views.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.