Accessibility: "Save and publish" has a drop down that can't be accessed via keyboard

[BatJan]

Prerequisites

• I have added steps to test this contribution in the description below

This fixes issue 5 from #5277

Description

Visually there is nothing changed with this PR - It all looks like it did before my changes. However a few things have happened under the hood.

1. <a> tags have been replaced with <button> tags in general
   1.1 Due to this some styling changes have been made so that the button tag is also being targeted just like the <a> tags currently is in the CSS.
2. The role attributes "menu" and "menuitem" have been added - Since Umbraco should be considered an app and not a website, this is the proper pattern for exposing the menu properly to screen readers. Heydon Pickering writes about this in the article "Building Accessible Menu Systems" - Jump to the headline that reads "True menus", since this is what's relevant for the changes that has been implemented here 😃
3. aria-haspopup and aria-expanded have been added to the button that triggers the popup of the publishing options - Again communicating state to screen readers
4. The ellipsis part has been hidden for screen readers by wrapping the dots in a span with aria-hidden="true" for the publishing options that appear when clicking the caret sine they don't make sense in a non-visual context
   5: A hidden text has been added inside the to provide screen readers with some context on what they can expect to find when clicking - This means the directive has been extended with a label and a label-key, which are optional since there are other places that will need to have such a text passed too at a later stage and making them optional so we don't risk breaking anything 😅

I think this pretty much sums up the changes that have been made - And as mentioned nothing should have changed visually but hopefully things have improved for screen readers.

Huge thank you to Danny Lancaster for a good discussion about the ins and out's of this PR 🙌

[emmaburstow]

Hi @BatJan

Lots of wonderful work here, thanks. We'll be in touch if we need anything from you.

Emma

[nul800sebastiaan]

Yay, finally!! 🎉