Links components (e.g. 'Footer links') can not be tabbed to (#6305)

umbraco · Sep 15, 2019 · de656ac · de656ac
1 parent 0582e4f
commit de656ac
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 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
@@ -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
@@ -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
@@ -11,7 +11,7 @@
 			allow-remove="allowRemove"
 			allow-edit="allowEdit"
 			on-remove="remove($index)"
-			on-edit="openContentPicker()">
+            on-edit="openContentPicker()">
 		</umb-node-preview>
 	</div>