[A11Y] Problems with labels
Nobody has claimed this yet.
- 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.
This "i" style label cannot be opened or closed with a keyboard
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.
⚠️ 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:
- Linked to the input field via referencing HTML selector
- Should not disappear while typing
- If popups should be accessible via keyboard/tab navigation
What steps does it need to replay this bug?
- 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
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 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