A11y cleanup

[bbenjamin]

This addresses fairly basic things, several of which would be flagged in automated checks.

• ul elements are not labelable, so the labels for the button lists need to be associated by using aria-labelledby.
• The ul elements need to be seen as form elements. The CK4 approach was to give them role="form:, which makes them labelable, but semanically confusing due to their being a form within a form. Changed to use role="listbox" via regular JS as Sortable filters role and aria attributes and I'm unsure when/if the PR addressing this will land https://github.com/zrpnr/ckeditor5-drupal-admin/pull/new/a11y-cleanup
• Button Ids need to be unique, added a random string at the end of ids to ensure this.
• The span within the button was invisible to eyes and screenreaders due to being visually-hidden and aria-hidden. This also triggered concerns on Axe dev tools as it expected <a> tags to have content. The aria hidden was removed so it's visible to screenreaders.
• The prior step eliminated the need to associate the button with the tooltip. The tooltip is now aria-hidden as it duplicates the contents of the button. It is only needed for sighted users, and the aria-expanded is not needed either. The part that "expands" is always available to screenreaders.
• A few changes in index.html. The CSS expecting aria-hidden will need to be changed in the CKEditor 5 Drupal module when these changes are imported. The textarea change was to make testing with automated tools a little easier.

[bbenjamin]

Switching to draft. The listbox role oughta get added via lifecycle hook in case the Draggable PR isn't getting action.

[zrpnr]

Should we add a todo to refactor this if SortableJS/vue.draggable.next#35 ever lands?

[zrpnr]

does this need to be fired so often? seems like it's a no-op most of the time.

[bbenjamin]

It doesn't, apparently. I thought the attributes got wiped out when buttons were moved, but looks like that was misdiagnosed.

[zrpnr]

I see, now this is the label that the list is labelled-by

[bbenjamin]

Right, the for attribute in a label only works with 'labelable' elements https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Form_labelable so this needs to use aria-labelledby

[zrpnr]

Thanks for the detailed explanations @bbenjamin , I always learn something about a11y from these changes :) There's no functional differences here, just better use of labels and aria-attributes, and you already addressed the 2 issues I raised. 👍