fix(NcAvatar): Remove span wrapper button semantics in favour of internal button components

[Pytal]

☑️ Resolves

• For [BITV]: focus gap appears through sidebar navigation nextcloud/server#42957

Summary

Previous iteration

• Previously the tab sequence would go from wrapper span[role="button"] -> action menu button -> next element on page. Only the span focus would show visual focus while the action menu button had none so there would appear to be a gap in the tab sequence.
• W3 states that "a button element allows phrasing content as descendants, and does not allow interactive content or descendants with a tabindex attribute. Therefore, any elements specified with a role=button would follow the same descendant restrictions, and not allow any interactive content descendants, elements with a tabindex specified, or any elements with role values that are in the interactive content category" -https://www.w3.org/TR/html-aria/#allowed-descendants-of-aria-roles
• The buttons inside span[role="button"] would be classified as interactive content and so is invalid HTML
• Setting tabindex="-1" would violate the above requirement and only removes sequential focus but not focusability via click or programmatic .focus()
• The NcAvatar wrapper span acts as a button with role="button" + event listeners and for the purposes of this component should be the only interative element which programmatically activates NcActions. This makes direct interaction on the NcActions button redundant.
• All descendants of a role="button" element implictly have role="presenation" but because browsers ignore role="presentation" on focusable elements (the buttons) we have to set inert explicitly
• This inert fix corrects the invalid HTML and removes redundant behaviour

• Remove button semantics from span wrapper
• Fixes focus return on Escape from menu
• Uses button semantics from internal button components

🏁 Checklist

• ⛑️ Tests are included or are not applicable
• 📘 Component documentation has been extended, updated or is not applicable

[JuliaKirschenheuter]

Thanks Chris for cleaning this up!

Works! One question: could we return a focus to the avatar (action button) when action menu is closed? Or is it another issue?

[emoral435]

Both solutions proposed works, all just a matter of preference 👍

[Pytal]

Moved the button semantics to the actual buttons rather than the wrapper span while preserving the same UX as before (slightly strange NcActions click triggering toggleMenu to fetch the latest contactsmenu data)

[susnux]

Looks much better to me!

[Antreesy]

Seems legit, tested listeners and new template