From a4ac2328f9f67f0739cffbf7d65c0596791e3c32 Mon Sep 17 00:00:00 2001
From: Jan Skovgaard <jaskov@gmail.com>
Date: Sun, 15 Sep 2019 15:29:44 +0200
Subject: [PATCH] =?UTF-8?q?"Actions"=20is=20identified=20as=20a=20button,?=
 =?UTF-8?q?=20but=20behaves=20like=20a=20drop=20do=E2=80=A6=20(#6303)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/buttons/umbbutton.directive.js | 11 +++++---
 .../views/components/buttons/umb-button.html  | 25 +++++++++++++------
 .../components/editor/umb-editor-menu.html    | 13 ++++++----
 3 files changed, 34 insertions(+), 15 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/buttons/umbbutton.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/buttons/umbbutton.directive.js
index f026a05c45..56416e3544 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/buttons/umbbutton.directive.js
+++ b/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") {
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-button.html b/src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-button.html
index 8163b2807b..0c4c58c38f 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-button.html
+++ b/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>
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-menu.html b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-menu.html
index c621670462..fe90fef07a 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-menu.html
+++ b/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>