fix(files): Fix checkbox state semantics

[Pytal]

• For [BITV]: adapt aria-label's text for checkboxes in files list #42683

• Needs fix(NcCheckboxRadioSwitch): Fix invalid indeterminate checkbox semantics nextcloud-libraries/nextcloud-vue#5096

Opening for review in advance

Summary

• To fix the semantics of checkboxes we remove the "select" / "unselect" wording from the labels
• Switch it to "toggle" and make use of the native checked and indeterminate input states

Checklist

• Code is properly formatted
• Sign-off message is added to all commits
• Tests (unit, integration, api and/or acceptance) are included
• Screenshots before/after for front-end changes
• Documentation (manuals or wiki) has been updated or is not required
• Backports requested where applicable (ex: critical bugfixes)

[skjnldsv]

Aren't we loosing context here ?

[susnux]

I guess not because it will be announced like checkbox - checked - Toggle selection for all files and folders or checkbox - unchecked - Toggle selection for all files and folders

[Pytal]

Accessibility best practices suggest not doubling information that is already available e.g. a popup menu label should not say "Close menu" when opened or "Open menu" when closed when the state is already communicated with aria-expanded

[emoral435]

After reading through the issue title change, I agree with the choice of using the wording 'Toggle', etc. instead of select/deselect and using the other native accessibility tools to aid the user. This LGTM!

[emoral435]

I will say though, on a side-note: the value for the input label isnt being shown on the DOM. I could be wrong, and there could be a different way telling us which checkboxes are input, but isn't this also an a11y issue we should work on? Outside of the aria-label, are there any other native tools that let the user know they checked the box?

[Pytal]

Thanks for the review @emoral435!

I will say though, on a side-note: the value for the input label isnt being shown on the DOM. I could be wrong, and there could be a different way telling us which checkboxes are input, but isn't this also an a11y issue we should work on? Outside of the aria-label, are there any other native tools that let the user know they checked the box?

Don't know where it is in Firefox devtools but in Chrome you can see checked state in the Properties tab or just access the el.checked property in the console

edit: From MDN "A boolean attribute indicating whether this checkbox is checked by default (when the page loads). It does not indicate whether this checkbox is currently checked: if the checkbox's state is changed, this content attribute does not reflect the change. (Only the HTMLInputElement's checked IDL attribute is updated.)" -https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#checked

[emoral435]

No problem, @Pytal! Thank you for the MDN reference! Your PR is still great, just wanted to bring up the topic because I'm not all too familiar with this, but I checked this on Chrome and I see the checked property! Sweet :)

[skjnldsv]

/compile

[skjnldsv]

/backport to stable28