From de656acec6a3b8a38c4fd5e83bcdc0309026e6c9 Mon Sep 17 00:00:00 2001
From: Jan Skovgaard <jaskov@gmail.com>
Date: Sun, 15 Sep 2019 15:01:53 +0200
Subject: [PATCH] Links components (e.g. 'Footer links') can not be tabbed to
 (#6305)

---
 .../src/less/components/umb-node-preview.less |  3 +
 .../views/components/umb-node-preview.html    | 77 +++++++++++++++++--
 .../src/views/prevalueeditors/treepicker.html |  2 +-
 3 files changed, 76 insertions(+), 6 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-node-preview.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-node-preview.less
index 1edaffe824..46bfbfa4e6 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-node-preview.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-node-preview.less
@@ -67,6 +67,9 @@
 }
 
 .umb-node-preview__action {
+    background: transparent;
+    padding: 0;
+    border: 0 none;
     margin-left: 5px;
     margin-right: 5px;
     font-size: 13px;
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-node-preview.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-node-preview.html
index 00ca425d7a..4f835f4c04 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-node-preview.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-node-preview.html
@@ -1,7 +1,7 @@
 <div class="umb-node-preview" ng-class="{'umb-node-preview--sortable': sortable, 'umb-node-preview--unpublished': published === false }">
-    <i ng-if="icon" class="umb-node-preview__icon {{ icon }}"></i>
+    <i ng-if="icon" class="umb-node-preview__icon {{ icon }}" aria-hidden="true"></i>
     <div class="umb-node-preview__content">
-        
+
         <div class="umb-node-preview__name" ng-attr-title="{{alias}}">{{ name }}</div>
         <div class="umb-node-preview__description" ng-if="description">{{ description }}</div>
 
@@ -13,9 +13,76 @@
         </div>
     </div>
     <div class="umb-node-preview__actions">
-        <a class="umb-node-preview__action" title="Edit" ng-href="{{editUrl}}" ng-if="allowEdit"  ng-click="onEdit()"><localize key="general_edit">Edit</localize></a>
-        <a class="umb-node-preview__action" title="Open" ng-href="{{openUrl}}" ng-if="allowOpen"  ng-click="onOpen()"><localize key="general_open">Open</localize></a>
-        <a class="umb-node-preview__action umb-node-preview__action--red" title="Remove" ng-href="{{removeUrl}}" ng-if="allowRemove" ng-click="onRemove()"><localize key="general_remove">Remove</localize></i></a>
+        <!-- If editUrl has a value we render a link otherwise a button-->
+        <a
+            class="umb-node-preview__action"
+            title="Edit {{name}}"
+            ng-href="{{editUrl}}"
+            ng-if="allowEdit && editUrl"
+            ng-click="onEdit()"
+        >
+            <localize key="general_edit">Edit</localize>
+            <span class="sr-only">{{name}}</span>
+        </a>
+
+        <button
+            type="button"
+            class="umb-node-preview__action"
+            title="Edit {{name}}"
+            ng-if="allowEdit && !editUrl"
+            ng-click="onEdit()"
+            aria-haspopup="dialog"
+        >
+            <localize key="general_edit">Edit</localize>
+            <span class="sr-only">{{name}}</span>
+        </button>
+
+        <!-- If openUrl has a value we render a link otherwise a button-->
+        <a
+            class="umb-node-preview__action"
+            title="Open {{name}}"
+            ng-href="{{openUrl}}"
+            ng-if="allowOpen && openUrl"
+            ng-click="onOpen()"
+        >
+            <localize key="general_open">Open</localize>
+            <span class="sr-only">{{name}}</span>
+        </a>
+
+        <button
+            type="button"
+            class="umb-node-preview__action"
+            title="Open {{name}}"
+            ng-if="allowOpen && !openUrl"
+            ng-click="onOpen()"
+            aria-haspopup="dialog"
+        >
+            <localize key="general_open">Open</localize>
+            <span class="sr-only">{{name}}</span>
+        </button>
+
+        <!-- If removeUrl has a value we render a link otherwise a button-->
+        <a
+            class="umb-node-preview__action umb-node-preview__action--red"
+            title="Remove {{name}}"
+            ng-href="{{removeUrl}}"
+            ng-if="allowRemove && removeUrl"
+            ng-click="onRemove()"
+        >
+            <localize key="general_remove">Remove</localize>
+            <span class="sr-only">{{name}}</span>
+        </a>
+
+        <button
+            type="button"
+            class="umb-node-preview__action umb-node-preview__action--red"
+            title="Remove {{name}}"
+            ng-if="allowRemove && !removeUrl"
+            ng-click="onRemove()"
+        >
+            <localize key="general_remove">Remove</localize>
+            <span class="sr-only">{{name}}</span>
+        </button>
     </div>
 
 </div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/treepicker.html b/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/treepicker.html
index ae260b4502..ab1b84db97 100644
--- a/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/treepicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/treepicker.html
@@ -11,7 +11,7 @@
 			allow-remove="allowRemove"
 			allow-edit="allowEdit"
 			on-remove="remove($index)"
-			on-edit="openContentPicker()">
+            on-edit="openContentPicker()">
 		</umb-node-preview>
 	</div>