Bugfix: #14742 - Tabs not coded according to best practice (#14979)

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

@@ -95,6 +95,8 @@ Use this directive to render a tabs navigation.
         function link(scope, element, attrs, ctrl) {
 
             var tabNavItemsWidths = [];
+            var tabItems = [];
+            var firstTab, lastTab;
             // the parent is the component itself so we need to go one level higher
             var container = element.parent().parent();
 
@@ -108,6 +110,32 @@ Use this directive to render a tabs navigation.
                 element.find("li:not(umb-tab--expand)").each(function() {
                     tabNavItemsWidths.push($(this).outerWidth());
                 });
+
+                tabItems = Array.from(element.find(".umb-tab > button"));
+                firstTab = tabItems[0];
+                lastTab = tabItems[tabItems.length - 1];
+
+                tabItems.forEach(tab => {
+                    tab.addEventListener("keydown", event => {
+                        var currentTarget = event.currentTarget;
+                        switch (event.key) {
+                            case "ArrowLeft":
+                                moveFocusToPreviousTab(currentTarget);
+                                break;
+                            case "ArrowRight":
+                                moveFocusToNextTab(currentTarget);
+                                break;
+                            case "Home":
+                                firstTab.focus();
+                                break;
+                            case "End":
+                                lastTab.focus();
+                                break;
+                            default:
+                                break;
+                        }
+                    });
+                });
             });
 
             function calculateWidth(){
@@ -121,7 +149,7 @@ Use this directive to render a tabs navigation.
 
                     // detect how many tabs we can show on the screen
                     for (var i = 0; i <= tabNavItemsWidths.length; i++) {
-                        
+
                         var tabWidth = tabNavItemsWidths[i];
                         tabsWidth += tabWidth;
 
@@ -132,10 +160,31 @@ Use this directive to render a tabs navigation.
                             break;
                         }
                     }
-                    
+
                 });
             }
 
+            function moveFocusToNextTab(currentTab) {
+                var index = tabItems.indexOf(currentTab);
+
+                if (currentTab === lastTab) {
+                    firstTab.focus();
+                }
+                else {
+                    tabItems[index + 1].focus();
+                }
+            }
+
+            function moveFocusToPreviousTab(currentTab) {
+                var index = tabItems.indexOf(currentTab);
+                if(currentTab === firstTab) {
+                    lastTab.focus();
+                }
+                else {
+                    tabItems[index - 1].focus();
+                }
+            }
+
             scope.$on('$destroy', function() {
                 ro.unobserve(container[0]);
             });
@@ -152,7 +201,7 @@ Use this directive to render a tabs navigation.
             vm.clickTab = clickTab;
             vm.toggleTray = toggleTray;
             vm.hideTray = hideTray;
-    
+
             function clickTab($event, tab) {
                 if (vm.onTabChange) {
                     hideTray();
@@ -169,7 +218,6 @@ Use this directive to render a tabs navigation.
             function hideTray() {
                 vm.showTray = false;
             }
-
         }
 
         var directive = {

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

@@ -1,12 +1,14 @@
 <div>
     <ng-form name="tabbedContentForm">
 
+        <!-- TABS GO HERE -->
         <umb-editor-tab-bar ng-if="tabs.length > 0">
             <umb-tabs-nav tabs="tabs" on-tab-change="setActiveTab(tab)"></umb-tabs-nav>
         </umb-editor-tab-bar>
 
+        <!-- TABS CONTENT GO HERE -->
         <umb-box ng-repeat="tab in tabs track by tab.key" ng-show="tab.alias === activeTabAlias && tab.properties.length > 0">
-            <umb-box-content data-element="tab-content-{{tab.alias}}">
+            <umb-box-content role="tabpanel" id="tabpanel-{{tab.alias}}" aria-labelledby="tab-{{tab.alias}}" data-element="tab-content-{{tab.alias}}">
                 <umb-property
                     data-element="property-{{property.alias}}"
                     ng-repeat="property in tab.properties track by property.alias"

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

@@ -1,6 +1,7 @@
-<ul role="tablist" class="umb-tabs-nav"> 
-    <li role="tab" aria-selected="{{tab.active}}" 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': valTab_tabHasError}" val-tab>
-        <button class="btn-reset umb-tab-button" ng-click="vm.clickTab($event, tab)" ng-disabled="tab.disabled" type="button">
+
+<ul role="tablist" class="umb-tabs-nav" aria-label="Content Fields">
+    <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': valTab_tabHasError}" val-tab>
+        <button role="tab" aria-selected="{{tab.active}}" aria-controls="tabpanel-{{tab.alias}}" tabindex="{{!tab.active ? '-1' : null}}" class="btn-reset umb-tab-button" ng-click="vm.clickTab($event, tab)" ng-disabled="tab.disabled" type="button">
             {{ tab.label }}
             <div ng-show="valTab_tabHasError && !tab.active" class="badge">!</div>
         </button>