"Actions" is identified as a button, but behaves like a drop down

[BatJan]

Prerequisites

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

This fixes issue no. 8 and 44 from #5277

Description

Much of the groundwork for this was done in #5884 so the following things have been fixed

• Addition of aria-haspopup and aria-expanded attributes on the button that triggers the action dropdown
• The menu items have been changed from <a> to <button> elements
• the aria-hidden="true" attribute has been added to <i> and <span> elements that are used to display icons (This goes for all the possible outcomes in the umb-button.html view)
• The umb-botton directive has been extended so it's possible to add the above mentioned aria attributes by passing values for "isExpanded" and "hasPopup"
• The deep-blur directive has been added so the dropdown disappears when it's being tabbed out of using keyboard navigation (See the gif below)

Before

After

[nul800sebastiaan]

Thanks again @BatJan ! I know you still want to work on the aria-haspopup stuff but it's fine to do in a separate PR! 👍

[BatJan]

@nul800sebastiaan Yes, but not for this PR. In this context everything is perfect 😃

Since this is making a context menu visible the usage of aria-haspopup="true" is correct since the screen reader will announce something like "menu button".

But for #6304 and #6305 I was trying to be forward thinking and use a little progressive enhancement using the value of "dialog", which has been introduced with the ARIA 1.1 specification but, which screen readers are still implementing support. So for now NVDA will for instance announce it something like "menu button", which is not correct in this context since we're opening a dialog 😃 - PR to fix this is coming up shortly.