umb-lightbox improvements (#8191)

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

@@ -12,9 +12,9 @@
     <div ng-controller="My.Controller as vm">
 
         <div class="my-gallery">
-            <a href="" ng-repeat="image in images" ng-click="vm.openLightbox($index, images)">
+            <button type="button" ng-repeat="image in images" ng-click="vm.openLightbox($index, images)">
                 <img ng-src="image.source" />
-            </a>
+            </button>
         </div>
 
         <umb-lightbox

src/Umbraco.Web.UI.Client/src/less/components/umb-lightbox.less

@@ -32,14 +32,18 @@
 .umb-lightbox__close {
     position: absolute;
     top: 20px;
-    right: 60px;
+    right: 20px;
+    height: 40px;
+    width: 40px;
 }
 
 .umb-lightbox__close i {
     font-size: 20px;
-    cursor: pointer;
-    height: 40px;
-    width: 40px;
+    height: inherit;
+    width: inherit;
+    position: absolute;
+    top: 0;
+    left: 0;
 }
 
 .umb-lightbox__images {
@@ -75,12 +79,20 @@
     right: 20px;
     top: 50%;
     transform: translate(0, -50%);
+
+    .umb-lightbox__control-icon {
+        margin-right: -4px;
+    }
 }
 
 .umb-lightbox__control.-prev {
     left: 20px;
     top: 50%;
     transform: translate(0, -50%);
+
+    .umb-lightbox__control-icon {
+        margin-left: -4px;
+    }
 }
 
 .umb-lightbox__control-icon {

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

@@ -1,9 +1,12 @@
 <div class="umb-lightbox">
 
     <div class="umb-lightbox__backdrop" ng-click="close()" hotkey="esc"></div>
-    <div class="umb-lightbox__close" title="Close" ng-click="close()">
-        <i class="icon-delete umb-lightbox__control"></i>
-    </div>
+    <button type="button" class="btn-reset umb-lightbox__close" localize="title" title="@general_close" ng-click="close()">
+        <i class="icon-delete umb-lightbox__control" aria-hidden="true"></i>
+        <span class="sr-only">
+            <localize key="general_close">Close</localize>
+        </span>
+    </button>
 
     <div class="umb-lightbox__images">
         <div class="umb-lightbox__image shadow-depth-2" ng-repeat="item in items" ng-show="$index === activeItemIndex">
@@ -11,12 +14,18 @@
         </div>
     </div>
 
-    <div class="umb-lightbox__control -prev" title="Previous" ng-if="activeItemIndex > 0" ng-click="prev()" hotkey="left">
-        <i class="icon-previous umb-lightbox__control-icon"></i>
-    </div>
+    <button type="button" class="btn-reset umb-lightbox__control -prev" localize="title" title="@general_previous" ng-if="activeItemIndex > 0" ng-click="prev()" hotkey="left">
+        <i class="icon-previous umb-lightbox__control-icon" aria-hidden="true"></i>
+        <span class="sr-only">
+            <localize key="general_previous">Previous</localize>
+        </span>
+    </button>
 
-    <div class="umb-lightbox__control -next" title="Next" ng-if="activeItemIndex + 1 < items.length" ng-click="next()" hotkey="right">
-        <i class="icon-next umb-lightbox__control-icon"></i>
-    </div>
+    <button type="button" class="btn-reset umb-lightbox__control -next" localize="title" title="general_next" ng-if="activeItemIndex + 1 < items.length" ng-click="next()" hotkey="right">
+        <i class="icon-next umb-lightbox__control-icon" aria-hidden="true"></i>
+        <span class="sr-only">
+            <localize key="general_next">Next</localize>
+        </span>
+    </button>
 
 </div>