bolt / bolt/core

[accesibility] Add accessible names to checkboxes

Open
#2,177 3 comments 0 reactions 0 assignees View on GitHub
Dominant language
PHP
Stars
589
Forks
186
Avg merge
2h 23m
Merged PRs (30d)
9

Description

Details
-------

Currently checkbox in admin listings are rendered with empty labels.
https://github.com/bolt/core/blob/4.1/assets/js/app/listing/Components/Filter.vue#L8

That leads to bad accessibiltiy.

| Question | Answer
|------------------------------------------------------ | ------
| Relevant Bolt Version | 4.1
| Install type | Composer install
| BC Break | no
| PHP version | 7.4 |
| Web server | Nginx
| For UX/UI issues | Google Chrome

Proposed solution
------------
Add accessible names and apply "visually-hidden" class to these labels.
Something like this
```html
Select all
```

Contributor guide

Open the contributing guide

Research direction

Start in assets/js/app/listing/Components/Filter.vue at the referenced checkbox markup. Add accessible names to the checkbox labels and apply the visually-hidden class as proposed, then verify that admin listing checkboxes have meaningful names in Chrome.

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
Clearly specified
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.