Accessibility: Open Package - Identifies back button as "Left h… (#5930)

umbraco · Aug 14, 2019 · 617fd9a · 617fd9a
1 parent fe6df58
commit 617fd9a
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 16 deletions.
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-packages.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-packages.less
@@ -264,12 +264,16 @@
     flex-flow: row wrap;
 }
 
-a.umb-package-details__back-link {
+.umb-package-details__back-action {
     font-weight: bold;
     color: @black;
+    padding: 0;
+    border: 0;
+    background-color: transparent;
 }
 
-.umb-package-details__back-link:hover {
+.umb-package-details__back-action:focus,
+.umb-package-details__back-action:hover {
     color: @gray-4;
     text-decoration: none;
 }

diff --git a/src/Umbraco.Web.UI.Client/src/views/dashboard/settings/examinemanagement.html b/src/Umbraco.Web.UI.Client/src/views/dashboard/settings/examinemanagement.html
@@ -89,7 +89,7 @@ <h3 class="bold">Examine Management</h3>
 
             <umb-editor-sub-header>
                 <umb-editor-sub-header-content-left>
-                    <a class="umb-panel-back-link" href="" ng-click="vm.setViewState('list');">&larr; Back to overview</a>
+                        <button type="button" class="umb-package-details__back-action" ng-click="vm.setViewState('list');"><span aria-hidden="true">&larr;</span> <localize key="general_backToOverview">Back to overview</localize></button>
                 </umb-editor-sub-header-content-left>
             </umb-editor-sub-header>
 
@@ -198,7 +198,7 @@ <h3 class="bold">Examine Management</h3>
 
             <umb-editor-sub-header>
                 <umb-editor-sub-header-content-left>
-                    <a class="umb-panel-back-link" href="" ng-click="vm.setViewState('list');">&larr; <localize key="general_backToOverview">Back to overview</localize></a>
+                    <button type="button" class="umb-package-details__back-action" ng-click="vm.setViewState('list');"><span aria-hidden="true">&larr;</span> <localize key="general_backToOverview">Back to overview</localize></button>
                 </umb-editor-sub-header-content-left>
             </umb-editor-sub-header>
 

diff --git a/src/Umbraco.Web.UI.Client/src/views/packages/views/install-local.html b/src/Umbraco.Web.UI.Client/src/views/packages/views/install-local.html
@@ -36,9 +36,9 @@
                              ngf-max-size="{{ maxFileSize }}">
                             - <localize key="packager_orClickHereToUpload">or click here to choose files</localize>
                         </div>
-                        
+
                     </div>
-                    
+
                 </div>
 
                 <h3><strong><localize key="packager_uploadPackage">Upload package</localize></strong></h3>
@@ -54,7 +54,7 @@ <h3><strong><localize key="packager_uploadPackage">Upload package</localize></st
 
         <umb-editor-sub-header>
             <umb-editor-sub-header-content-left>
-                <a class="umb-package-details__back-link" href="" ng-click="vm.state = 'upload'">&larr; <localize key="packager_uploadAnother">Upload another package</localize></a>
+                <button type="button" class="umb-package-details__back-action" ng-click="vm.state = 'upload'" prevent-default><span aria-hidden="true">&larr;</span> <localize key="packager_uploadAnother">Upload another package</localize></button>
             </umb-editor-sub-header-content-left>
         </umb-editor-sub-header>
 
@@ -76,7 +76,7 @@ <h4 class="umb-info-local-item"><strong><localize key="packager_installStateUplo
                         <div class="umb-info-local-item text-error mt3" ng-if="vm.zipFile.uploadStatus === 'error'">
                             {{ vm.zipFile.serverErrorMessage }}
                         </div>
-                        
+
                     </div>
                 </div>
             </div>
@@ -89,7 +89,7 @@ <h4 class="umb-info-local-item"><strong><localize key="packager_installStateUplo
 
         <umb-editor-sub-header>
             <umb-editor-sub-header-content-left>
-                <a class="umb-package-details__back-link" href="" ng-click="vm.state = 'upload'">&larr; <localize key="packager_cancelAndUploadAnother">Cancel and upload another package</localize></a>
+                <button type="button" class="umb-package-details__back-action" href="" ng-click="vm.state = 'upload'" prevent-default><span aria-hidden="true">&larr;</span> <localize key="packager_cancelAndUploadAnother">Cancel and upload another package</localize></button>
             </umb-editor-sub-header-content-left>
         </umb-editor-sub-header>
 

diff --git a/src/Umbraco.Web.UI.Client/src/views/packages/views/installed.html b/src/Umbraco.Web.UI.Client/src/views/packages/views/installed.html
@@ -58,7 +58,7 @@ <h4><strong><localize key="packager_noPackages">You don’t have any packages in
 
         <umb-editor-sub-header>
             <umb-editor-sub-header-content-left>
-                <a class="umb-package-details__back-link" href="" ng-click="vm.state = 'list'">&larr; <localize key="general_back">Back</localize></a>
+                <button type="button" class="umb-package-details__back-action" ng-click="vm.state = 'list'" prevent-default><span aria-hidden="true">&larr;</span> <localize key="general_back">Back</localize></button>
             </umb-editor-sub-header-content-left>
         </umb-editor-sub-header>
 

diff --git a/src/Umbraco.Web.UI.Client/src/views/packages/views/repo.html b/src/Umbraco.Web.UI.Client/src/views/packages/views/repo.html
@@ -119,7 +119,7 @@ <h4><strong><localize key="packager_packageNoResults">We couldn't find anything
 
         <umb-editor-sub-header>
             <umb-editor-sub-header-content-left>
-                <a class="umb-package-details__back-link" href="" ng-click="vm.setPackageViewState('packageList');">&larr; <localize key="general_back">Back</localize></a>
+                <button type="button" class="umb-package-details__back-action" ng-click="vm.setPackageViewState('packageList');" prevent-default><span aria-hidden="true">&larr;</span> <localize key="general_back">Back</localize></button>
             </umb-editor-sub-header-content-left>
         </umb-editor-sub-header>
 
@@ -185,7 +185,7 @@ <h4><strong><localize key="packager_packageNoResults">We couldn't find anything
                                     img-src="{{ 'https://our.umbraco.org' + vm.package.ownerInfo.ownerAvatar }}">
                                 </umb-avatar>
                                 </div>
-    
+
                                 <div>
                                     <div class="umb-package-details__owner-profile-name">{{ vm.package.ownerInfo.owner }}</div>
                                     <div class="umb-package-details__owner-profile-karma">
@@ -287,7 +287,7 @@ <h4><strong><localize key="packager_packageNoResults">We couldn't find anything
     <div ng-if="vm.packageViewState === 'packageInstall' && vm.loading === false">
         <umb-editor-sub-header>
             <umb-editor-sub-header-content-left>
-                <a class="umb-package-details__back-link" href="" ng-click="vm.setPackageViewState('packageDetails');">&larr; <localize key="general_back">Back</localize></a>
+                <button type="button" class="umb-package-details__back-action" ng-click="vm.setPackageViewState('packageDetails');" prevent-default><span aria-hidden="true">&larr;</span> <localize key="general_back">Back</localize></button>
             </umb-editor-sub-header-content-left>
         </umb-editor-sub-header>
 

diff --git a/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html b/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html
@@ -285,7 +285,7 @@
 
         <umb-editor-sub-header>
             <umb-editor-sub-header-content-left>
-                <a class="umb-package-details__back-link" href="" ng-click="vm.setUsersViewState('overview');">&larr; <localize key="user_backToUsers">Back to users</localize></a>
+                <button type="button" class="umb-package-details__back-action" ng-click="vm.setUsersViewState('overview');"><span aria-hidden="true">&larr;</span> <localize key="user_backToUsers">Back to users</localize></button>
             </umb-editor-sub-header-content-left>
         </umb-editor-sub-header>
 
@@ -408,7 +408,7 @@ <h3 class="bold" style="margin-bottom: 0;">
 
         <umb-editor-sub-header>
             <umb-editor-sub-header-content-left>
-                <a class="umb-package-details__back-link" href="" ng-click="vm.setUsersViewState('overview');">&larr; <localize key="user_backToUsers">Back to users</localize></a>
+                <button type="button" class="umb-package-details__back-action" ng-click="vm.setUsersViewState('overview');"><span aria-hidden="true">&larr;</span> <localize key="user_backToUsers">Back to users</localize></button>
             </umb-editor-sub-header-content-left>
         </umb-editor-sub-header>
 
@@ -490,7 +490,7 @@ <h3 class="bold" style="margin: 0 0 0 10px;">
     <div ng-if="vm.usersViewState === 'inviteUserSuccess'">
         <umb-editor-sub-header>
             <umb-editor-sub-header-content-left>
-                <a class="umb-package-details__back-link" href="" ng-click="vm.setUsersViewState('overview');">&larr; <localize key="user_backToUsers">Back to users</localize></a>
+                <button type="button" class="umb-package-details__back-action" ng-click="vm.setUsersViewState('overview');"><span aria-hidden="true">&larr;</span> <localize key="user_backToUsers">Back to users</localize></button>
             </umb-editor-sub-header-content-left>
         </umb-editor-sub-header>