[bug] [accessibility] Checkbox elements inaccessible with keyboard #407

New issue

Open

opened 2024-07-14 11:40:16 +00:00 by banaanihillo · 0 comments

banaanihillo commented

2024-07-14 11:40:16 +00:00

Version

https://akkoma.dev/AkkomaGang/pleroma-fe/commit/7cc6c35

What were you trying to do?

Check-box elements are not accessible via keyboard, since the input type="checkbox" for them has a display: none; attribute.

Observed on https://seafoam.space/about and https://mycrowd.ca/about

Steps to reproduce:

Visit any akkoma instance using akkoma-fe, such as the ones mentioned above
Use the gear icon to open the settings modal
2.1 (unrelated issue here, but somewhat relevant) Navigate onto the settings modal since focus management is missing
Try to navigate to any of the checkbox elements via Tab, but realize you are unable to

What did you expect to happen?

I expected the checkbox elements to have the ability to gain focus via keyboard so that I can activate/deactivate them.

Below is a screenshot to illustrate how the checkbox elements can be interacted with if the display: none; declaration is removed, but that change alone breaks the visual presentation.

What actually happened?

None of the checkbox elements can gain focus via keyboard

On the left side of the screen: developer tools element picker displaying one of the checkbox elements; on the top right of the element picker, a declaration of display: none; is shown
On the right side of the screen: the settings modal for https://mycrowd.ca/about is shown, displaying a bunch of checkbox elements, but none of them are currently in focus

Severity

I cannot use it as easily as I'd like

Have you searched for this issue?

I have double-checked and have not found this issue mentioned anywhere.

### Version https://akkoma.dev/AkkomaGang/pleroma-fe/commit/7cc6c35 ### What were you trying to do? Check-box elements are not accessible via keyboard, since the `input type="checkbox"` for them has a `display: none;` attribute. Observed on https://seafoam.space/about and https://mycrowd.ca/about Steps to reproduce: 1. Visit any akkoma instance using akkoma-fe, such as the ones mentioned above 2. Use the gear icon to open the settings modal 2.1 (unrelated issue here, but somewhat relevant) Navigate onto the settings modal since focus management is missing 3. Try to navigate to any of the checkbox elements via Tab, but realize you are unable to ### What did you expect to happen? I expected the checkbox elements to have the ability to gain focus via keyboard so that I can activate/deactivate them. Below is a screenshot to illustrate how the checkbox elements can be interacted with if the `display: none;` declaration is removed, but that change alone breaks the visual presentation. ### What actually happened? None of the checkbox elements can gain focus via keyboard On the left side of the screen: developer tools element picker displaying one of the checkbox elements; on the top right of the element picker, a declaration of `display: none;` is shown On the right side of the screen: the settings modal for https://mycrowd.ca/about is shown, displaying a bunch of checkbox elements, but none of them are currently in focus ### Severity I cannot use it as easily as I'd like ### Have you searched for this issue? - [x] I have double-checked and have not found this issue mentioned anywhere.

Screenshot from 2024-07-14 14-37-19.png

412 KiB

Screenshot from 2024-07-13 21-27-56.png

486 KiB