[wip?] Accessibility-motivated markup changes

[bbenjamin]

This originated from https://www.drupal.org/project/ckeditor5/issues/3209517, there are several changes here

• sorting now happens on the list item itself, the previous way was via links with role="button". Although those items represent buttons, they should not be conveyed as buttons to assistive tech as they are not clickable elements that trigger a reposnse when clicked
• aria-expanded is no longer used as an attribute, the content that is hidden/shown isn't really toggleable, it's shown on hover/focus. The content of the tooltip is in the aria-labelledby span, so the tooltip content is announced on focus already.
• There is no need for the visually-hidden span with the button type as this content is already supplied via aria-labelledby span containing the tooltip content
• This currently has a [wip?] because the list items have role="option", so the containing <ul> really should have role="listbox". I submitted a PR to vue.draggable Expand isHtmlAttribute SortableJS/vue.draggable.next#35 to make this possible. However, I think the fallback behavior (describing the list option as a "text element",) is preferable to it being described as a button.

If this lands a bit CSS in Drupal will need to be changed since aria-expanded won't be used (and ideally aria attributes shouldn't be used for CSS anyway)

.ckeditor5-toolbar-button[aria-expanded="false"] + .ckeditor5-toolbar-tooltip {
  visibility: hidden;
}
.ckeditor5-toolbar-button[aria-expanded="true"] + .ckeditor5-toolbar-tooltip {
  visibility: visible;
}

to

.ckeditor5-toolbar-tooltip {
  visibility: hidden;
}
[data-tip-expanded="true"]  .ckeditor5-toolbar-tooltip {
  visibility: visible;
}

[zrpnr]

Thanks for looking this over @bbenjamin
This seems good to merge to me, do you want to wait to hear about the PR you opened or is it ok to have this change without the role="listbox" for now?

[zrpnr]

👍 This is the key element to add since the <a> was previously the reason this was tabbable.

[zrpnr]

I'm fine with this change, I got the aria-expanded from the examples at https://pauljadam.com/demos/tooltip.html
Reading it again I see he wrote:

I added aria-expanded on the button to tell the user that something is expanding and collapsing, however, the ARIA pattern does not mention anything about using aria-expanded

so it sounds like you're right that this isn't the correct attribute here.

[zrpnr]

👍 Removing the unused element