fix(menubar): menubar and table menus a11y

[ShGKme]

📝 Summary

• Resolves: [BITV]: Remove unneeded roles menuitem and menu #5216
• Resolves: [BITV] 9.4.1.2/3.16 - Custom editing menubar should be implemented using role=toolbar and not role=menubar. (2) #3911

Currently aria-* and role attrs in the MenuBar are set incorrectly. These attributes are already covered by @nextcloud/vue. This PR removes setting attributes from the Text and adjust using NcAction* components.

There are quite a lot of changes. Separated with 💙 into small commits.

Before	After

🚧 TODO

fix: apply a11y attrs for session list trigger

• Migrate from deprecated slot syntax
• Use a11y attrs from NcPopover on a custom button

No visual changes

👀 Place	🏚️ Before	🏡 After

fix(menubar): remove unneeded roles menu, menuitem

All these roles are correctly set by NcAction* components when needed.
Setting these roles in mixins and menu bar puts them on wrong elements.

👀 Place	🏚️ Before	🏡 After

fix(menubar): remove incorrect aria-haspopup

• It must have string "true"/"menu" value
• It must be placed on the button itself
• It is already correctly set by NcActions and NcPopover

👀 Place	🏚️ Before	🏡 After

fix(menubar): remove incorrect aria-activedescendant

• aria-activedescendant should identify a visually focused element when the real focus remains on this element.
  In the current implementation, it identifies the checked element (even when the menu is closed), not the focused.
• aria-activedescendant is not needed because NcAction has actual focus anyway.
  In case it will be actually needed, it should be implemented in the NcActions

👀 Place	🏚️ Before	🏡 After

fix(table): replace InlineActionsContainer by NcActionButtonGroup

It has the same styles and correct a11y attributes.

👀 Place	🏚️ Before	🏡 After

fix(table): make text align buttons radio

🏚️ Before	🏡 After

fix(menubar): replace aria-pressed with text description in ActionList

• aria-pressed is not valid for a menu trigger button. And
• As an alternative solution - show that there is a selected value directly in the text
  • Headings, "Heading 1" is selected
• Remove incorrect name prop for NcActions

👀 Place	🏚️ Before	🏡 After

refactor: implement ActionSingle via template instead of render-function

Just to simplify further work and Vue 3 migration next release

No visual changes

fix(menubar): set correct type for buttons instead of aria-selected

• Since @nextcloud/[email protected] correct attributes are covered by NcAction* and NcButton components, including fixes:
  • Attribute should display not only active attr="true" state, but also non-active attr="false"
  • It should be aria-pressed for buttons and aria-checked for menu items instead of aria-selected
• Set correct type and active state
  • type="radio" for a list of options like Heading
  • type="checkbox" for toggle buttons like Bold
  • type="button" for general buttons without active state like Undo

This doesn't fully work without the next one commit

👀 Place	🏚️ Before	🏡 After

fix(menubar): separate NcActionButton from ActionSingle

• ActionSingle was used in 2 places:
  1. As a single button in the menu
  2. As an item in NcActions
• NcActions doesn't fully support non-direct NcAction* children
• Move NcActionButton usage from ActionSingle to a new component
• This new component is named NcActionButton so that NcActions will consider it to be a valid NcAction* component

🏚️ Before	🏡 After

fix(menubar): add separator between radio groups

• Separates different parts visually
• Required for a11y to group radio button in the menu

🏚️ Before	🏡 After

fix(menubar): name ActionFormattingHelp as NcActionButton

Same as with separating NcActionButton - for NcActions support

👀 Place	🏚️ Before	🏡 After

🏁 Checklist

• Code is properly formatted (npm run lint / npm run stylelint / composer run cs:check)
• Sign-off message is added to all commits
• Tests (unit, integration and/or end-to-end) passing and the changes are covered with tests
• Documentation (README or documentation) has been updated or is not required

[max-nextcloud]

Thanks a lot for splitting up the individual aspects. This was very helpful for understanding.

I only looked at the code so far. I'd like to play a bit with it before approving. I also have one minor comment I want to look into further.

[max-nextcloud]

Works like a charm. 🪄

[emoral435]

The splitting of the issues within the description was really nice! No comments from me, just always great to learn how I should structure future problems with your best practices :)

[JuliaKirschenheuter]

wooow! That looks great and works right!

All good from my side besides:

But this is NcVue part

[Pytal]

The div here should be switched to span and the divs inside AvatarWrapper also need to be span to not have block-level elements inside the inline button

Otherwise good!

[ShGKme]

Thanks. I'll do it in another PR with fixing HTML validation issues.

[ShGKme]

Two fixup!s:

1. Fix potential issue @max-nextcloud found (reviewed)
2. To make NcActions' children named NcActionButton is was enough to change name property, without having to change the filename.

One new change:

1. Fix 1/2 issues @JuliaKirschenheuter has found (the second one is on @nextcloud/vue and is less critical)

[ShGKme]

Rebased onto master, squashed fixup commits (only small changes like renaming components were made, still works).

[juliusknorr]

/backport to stable28