"Actions" is identified as a button, but behaves like a drop do… (#6303)

src/Umbraco.Web.UI.Client/src/common/directives/components/buttons/umbbutton.directive.js

@@ -67,6 +67,9 @@ Use this directive to render an umbraco button. The directive can be used to gen
 @param {boolean=} disabled Set to <code>true</code> to disable the button.
 @param {string=} addEllipsis Adds an ellipsis character (…) to the button label which means the button will open a dialog or prompt the user for more information.
 @param {string=} showCaret Shows a caret on the right side of the button label
+@param {string=} autoFocus add autoFocus to the button
+@param {string=} hasPopup Used to expose to the accessibility API whether the button will trigger a popup or not
+@param {string=]} isExpanded Used to add an aria-expanded attribute and expose whether the button has expanded a popup or not
 
 **/
 
@@ -96,7 +99,9 @@ Use this directive to render an umbraco button. The directive can be used to gen
                 alias: "@?",
                 addEllipsis: "@?",
                 showCaret: "@?",
-                autoFocus: "@?"
+                autoFocus: "@?",
+                hasPopup: "@?",
+                isExpanded: "<?"
             }
         });
 
@@ -126,13 +131,13 @@ Use this directive to render an umbraco button. The directive can be used to gen
 
                 // make it possible to pass in multiple styles
                 if(vm.buttonStyle.startsWith("[") && vm.buttonStyle.endsWith("]")) {
-                    
+
                     // when using an attr it will always be a string so we need to remove square brackets
                     // and turn it into and array
                     var withoutBrackets = vm.buttonStyle.replace(/[\[\]']+/g,'');
                     // split array by , + make sure to catch whitespaces
                     var array = withoutBrackets.split(/\s?,\s?/g);
-                    
+
                     angular.forEach(array, function(item){
                         vm.style = vm.style + " " + "btn-" + item;
                         if(item === "block") {

src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-button.html

@@ -9,25 +9,36 @@
 
     <a ng-if="vm.type === 'link'" ng-href="{{vm.href}}" class="btn umb-button__button {{vm.style}} umb-button--{{vm.size}}" ng-click="vm.clickButton($event)" hotkey="{{vm.shortcut}}" hotkey-when-hidden="{{vm.shortcutWhenHidden}}">
         <span class="umb-button__content" ng-class="{'-hidden': vm.innerState !== 'init'}">
-            <i ng-if="vm.icon" class="{{vm.icon}} umb-button__icon"></i>
+            <i ng-if="vm.icon" class="{{vm.icon}} umb-button__icon" aria-hidden="true"></i>
             {{vm.buttonLabel}}
-            <span ng-if="vm.showCaret" class="umb-button__caret caret"></span>
+            <span ng-if="vm.showCaret" class="umb-button__caret caret" aria-hidden="true"></span>
         </span>
     </a>
 
-    <button ng-if="vm.type === 'button'" type="button" class="btn umb-button__button {{vm.style}} umb-button--{{vm.size}}" ng-click="vm.clickButton($event)" hotkey="{{vm.shortcut}}" hotkey-when-hidden="{{vm.shortcutWhenHidden}}" ng-disabled="vm.disabled" umb-auto-focus="{{vm.autoFocus && !vm.disabled ? 'true' : 'false'}}">
+    <button
+        ng-if="vm.type === 'button'"
+        type="button"
+        class="btn umb-button__button {{vm.style}} umb-button--{{vm.size}}"
+        ng-click="vm.clickButton($event)"
+        hotkey="{{vm.shortcut}}"
+        hotkey-when-hidden="{{vm.shortcutWhenHidden}}"
+        ng-disabled="vm.disabled"
+        umb-auto-focus="{{vm.autoFocus && !vm.disabled ? 'true' : 'false'}}"
+        aria-haspopup="{{vm.hasPopup}}"
+        aria-expanded="{{vm.isExpanded}}"
+        >
         <span class="umb-button__content" ng-class="{'-hidden': vm.innerState !== 'init'}">
-            <i ng-if="vm.icon" class="{{vm.icon}} umb-button__icon"></i>
+            <i ng-if="vm.icon" class="{{vm.icon}} umb-button__icon" aria-hidden="true"></i>
             {{vm.buttonLabel}}
-            <span ng-if="vm.showCaret" class="umb-button__caret caret"></span>
+            <span ng-if="vm.showCaret" class="umb-button__caret caret" aria-hidden="true"></span>
         </span>
     </button>
 
     <button ng-if="vm.type === 'submit'" type="submit" class="btn umb-button__button {{vm.style}} umb-button--{{vm.size}}" hotkey="{{vm.shortcut}}" hotkey-when-hidden="{{vm.shortcutWhenHidden}}" ng-disabled="vm.disabled" umb-auto-focus="{{vm.autoFocus && !vm.disabled ? 'true' : 'false'}}">
         <span class="umb-button__content" ng-class="{'-hidden': vm.innerState !== 'init'}">
-            <i ng-if="vm.icon" class="{{vm.icon}} umb-button__icon"></i>
+            <i ng-if="vm.icon" class="{{vm.icon}} umb-button__icon" aria-hidden="true"></i>
             {{vm.buttonLabel}}
-            <span ng-if="vm.showCaret" class="umb-button__caret caret"></span>
+            <span ng-if="vm.showCaret" class="umb-button__caret caret" aria-hidden="true"></span>
         </span>
     </button>
 

src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-menu.html

@@ -5,15 +5,18 @@
         button-style="white"
         action="dropdown.isOpen = !dropdown.isOpen"
         label-key="general_actions"
-        show-caret="true">
+        show-caret="true"
+        has-popup="true"
+        is-expanded="dropdown.isOpen"
+        >
     </umb-button>
 
-    <umb-dropdown ng-if="dropdown.isOpen" class="umb-actions" on-close="dropdown.isOpen = false">
+    <umb-dropdown ng-if="dropdown.isOpen" class="umb-actions" on-close="dropdown.isOpen = false" deep-blur="dropdown.isOpen = false">
         <umb-dropdown-item class="umb-action" ng-class="{'sep':action.separatorm, '-opens-dialog': action.opensDialog}" ng-repeat="action in actions">
-            <a href="" ng-click="executeMenuItem(action)" prevent-default>
-                <i class="icon icon-{{action.cssclass}}"></i>
+            <button type="button" ng-click="executeMenuItem(action)">
+                <i class="icon icon-{{action.cssclass}}" aria-hidden="true"></i>
                 <span class="menu-label">{{action.name}}</span>
-            </a>
+            </button>
         </umb-dropdown-item>
     </umb-dropdown>