improvement: update umb-tabs to use better semantic markup (#7926)

umbraco · Apr 10, 2020 · 23e32d2 · 23e32d2
1 parent b5b319f
commit 23e32d2
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 36 deletions.
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/application/umb-dashboard.less b/src/Umbraco.Web.UI.Client/src/less/components/application/umb-dashboard.less
@@ -31,6 +31,6 @@
     border: none;
 }
 
-.umb-dashboard__header .umb-tabs-nav .umb-tab > a {
+.umb-dashboard__header .umb-tabs-nav .umb-tab > .umb-tab-button {
     padding-bottom: 25px;
 }
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-tabs.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-tabs.less
@@ -13,25 +13,31 @@
     top: 1px;
 }
 
-.umb-tab > a {
-
+.umb-tab-button {
     display: flex;
     justify-content: center;
     align-items: center;
     position: relative;
-    
+
     cursor: pointer;
     //border-bottom: 4px solid transparent;
     color: @ui-light-type;
     padding: 5px 20px 15px 20px;
     transition: color 150ms ease-in-out;
+
     &:focus {
         color: @ui-light-type-hover;
+
+        body:not(.tabbing-active) &{
+            outline: none;
+        }
     }
+
     &:hover {
         color: @ui-light-type-hover;
         text-decoration: none;
     }
+
     &::after {
         content: "";
         height: 0px;
@@ -42,12 +48,21 @@
         bottom: 0;
         border-radius: 3px 3px 0 0;
         opacity: 0;
-        transition: all .2s linear;
+        transition: all 0.2s linear;
     }
-}
 
+    &--expand > i {
+        height: 5px;
+        width: 5px;
+        border-radius: 50%;
+        background: @black;
+        display: inline-block;
+        margin: 0 5px 0 0;
+        opacity: 0.6;
+    }
+}
 
-.umb-tab--active > a {
+.umb-tab--active > .umb-tab-button {
     color: @ui-light-active-type;
     //border-bottom-color: @ui-active;
     /*
@@ -64,19 +79,19 @@
     }
 }
 
-.show-validation .umb-tab--error > a,
-.show-validation .umb-tab--error > a:hover,
-.show-validation .umb-tab--error > a:focus {
-  color: @white !important;
-  background-color: @red !important;
-  border-color: @errorBorder;
+.show-validation .umb-tab--error > .umb-tab-button,
+.show-validation .umb-tab--error > .umb-tab-button:hover,
+.show-validation .umb-tab--error > .umb-tab-button:focus {
+    color: @white !important;
+    background-color: @red !important;
+    border-color: @errorBorder;
 }
 
-.show-validation .umb-tab--error a:before {
-  content: "\e25d";
-  font-family: 'icomoon';
-  margin-right: 5px;
-  vertical-align: top;
+.show-validation .umb-tab--error .umb-tab-button:before {
+    content: "\e25d";
+    font-family: "icomoon";
+    margin-right: 5px;
+    vertical-align: top;
 }
 
 // tabs tray
@@ -86,20 +101,10 @@
     left: auto;
 }
 
-.umb-tabs-tray > a {
+.umb-tabs-tray > .umb-tab-button {
     cursor: pointer;
 }
 
 .umb-tabs-tray-item--active {
     border-left: 2px solid @ui-active;
 }
-
-.umb-tab--expand > a > i {
-    height: 5px;
-    width: 5px;
-    border-radius: 50%;
-    background: @black;
-    display: inline-block;
-    margin: 0 5px 0 0;
-    opacity: .6;
-}
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/tabs/umb-tabs-nav.html b/src/Umbraco.Web.UI.Client/src/views/components/tabs/umb-tabs-nav.html
@@ -1,13 +1,16 @@
 <ul role="tablist" class="umb-tabs-nav">
-    <li ng-click="vm.clickTab($event, tab)" class="umb-tab" role="tab" aria-selected="true" tabindex="0" ng-repeat="tab in vm.tabs |  limitTo: vm.maxTabs" data-element="tab-{{tab.alias}}" ng-class="{'umb-tab--active': tab.active, 'umb-tab--error': tabHasError}" val-tab>
-        <a>{{ tab.label }}</a>
+    <li class="umb-tab" ng-repeat="tab in vm.tabs |  limitTo: vm.maxTabs" data-element="tab-{{tab.alias}}" ng-class="{'umb-tab--active': tab.active, 'umb-tab--error': tabHasError}" val-tab>
+        <button class="btn-reset umb-tab-button" ng-click="vm.clickTab($event, tab)" role="tab" aria-selected="{tab.active}" type="button">{{ tab.label }}</button>
     </li>
 
-    <li data-element="tab-expand" class="umb-tab umb-tab--expand" tabindex="0" ng-click="vm.toggleTray()" ng-class="{ 'open': vm.showTray }" ng-show="vm.needTray">
-        <a ng-href=""><i></i><i></i><i></i></a>
+    <li data-element="tab-expand" class="umb-tab umb-tab--expand" ng-class="{ 'open': vm.showTray }" ng-show="vm.needTray">
+        <button class="btn-reset umb-tab-button umb-tab-button--expand" ng-click="vm.toggleTray()" type="button">
+            <i></i><i></i><i></i>
+            <span class="sr-only"><localize key="visuallyHiddenTexts_tabExpand">View more options</localize></span>
+        </button>
         <umb-dropdown class="umb-tabs-tray" ng-if="vm.showTray" on-close="vm.hideTray()">
-            <umb-dropdown-item ng-repeat="tab in vm.tabs | limitTo: vm.overflowingTabs" ng-class="{'umb-tabs-tray-item--active': tab.active}" tabindex="0" ng-click="vm.clickTab($event, tab)">
-                <a ng-href="">{{ tab.label }}</a>
+            <umb-dropdown-item ng-repeat="tab in vm.tabs | limitTo: vm.overflowingTabs" ng-class="{'umb-tabs-tray-item--active': tab.active}">
+                <button class="btn-reset umb-tab-button" ng-click="vm.clickTab($event, tab)" role="tab" aria-selected="{tab.active}" type="button">{{ tab.label }}</button>
             </umb-dropdown-item>
         </umb-dropdown>
     </li>

diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
@@ -2223,7 +2223,8 @@ To manage your website, simply open the Umbraco back office and start adding con
     <key alias="create">Create</key>
     <key alias="edit">Edit</key>
     <key alias="name">Name</key>
-    <key alias="addNewRow">Add new row</key>
+    <key alias="addNewRow">Add new row</key>    
+    <key alias="tabExpand">View more options</key>
   </area>
   <area alias="references">
     <key alias="tabName">References</key>

diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
@@ -2236,6 +2236,7 @@ To manage your website, simply open the Umbraco back office and start adding con
     <key alias="edit">Edit</key>
     <key alias="name">Name</key>
     <key alias="addNewRow">Add new row</key>
+    <key alias="tabExpand">View more options</key>
   </area>
   <area alias="references">
     <key alias="tabName">References</key>