Some labels are missing 'for' attribute in admin (accessibility issue / Vimium)

[jlahijani]

I was playing around with Vimium and using it to navigate the ProcessWire admin interface. Some labels are not clickable because the "for" attribute has not been set. I believe this ties into accessibility as well.

I made a video:
https://www.youtube.com/watch?v=fZjESgr6LT4

[jlahijani]

Related: #1480

[ryancramerdesign]

@jlahijani For the hovered page actions, it looks like Vimium is giving you letters for those, and after typing the letter to go to one, can you not just hit the spacebar to show the actions? That's how you do it when using tabs to navigate within the page list at least.

As far as I can tell, for the Inputfield cases you mentioned, no "for" attribute is possible since the <label> elements aren't referring to a specific input. The "for" attribute is optional but we of course use it anywhere that's possible to do so. But for cases the label represents an InputfieldWrapper or InputfieldMarkup, there is no corresponding input element for a "for" attribute to point at. And for cases where an Inputfield has its input ajax-loaded, there's no possible valid "for" attribute until after the InputfieldContent loads, triggered by clicking on the label element.

Vimium looks pretty useful how it shows letter combinations for those things. Maybe there is some way we can trick it with a fake hidden input for the label to point to, or something? Though I'm not sure if this is worthwhile, but just thinking out loud.

[jlahijani]

@ryancramerdesign In the time since I created this issue, I've done a deep dive into accessibility for the frontends of my sites, however the same knowledge applies anywhere. The deeper conversation here is about accessibility and more fitting usage of HTML for various components in the admin. I'd imagine this could cause some breakage however.

I think if this is something you decide to pursue, it might be best to wait for a combination of UIkit 4 coming into existence (I believe that will happen later this year) and your desire to focus on the admin interface.

[jlahijani]

As an example, it might make sense to use the "details" element for toggle boxes:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

[ryancramerdesign]

@jlahijani Sounds good, and I look forward to Uikit 4!

[jlahijani]

Just putting a note here for myself for later, but anything that's clickable that is not a naturally clickable element should have the role='button'. For example, repeaters and the repeater actions, among other things.

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role

Note: technically anything that is a clickable should actually use the button element, but by putting role='button' on the existing element, that will prevent breaking changes. Maybe this can be re-examined in PW4?

Edit: I see that Teppo already brought this up in #1480