SAK-32600 keyboard arrow navigation for tabs in Sites dialog (sakaipr…

…oject#4486)
vaibhav-s · Jun 16, 2017 · d326030 · d326030
1 parent 0da1c63
commit d326030
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 15 deletions.
diff --git a/library/src/morpheus-master/js/src/sakai.morpheus.more.sites.js b/library/src/morpheus-master/js/src/sakai.morpheus.more.sites.js
@@ -708,10 +708,8 @@ $PBJQ(document).ready(function($){
   });
 
   $PBJQ(container).on('click', '.tab-btn', function () {
-    $PBJQ('.tab-btn', container).removeClass('active');
-    $PBJQ('.tab-btn', container).attr('aria-selected', 'false');
-    $PBJQ(this).addClass('active');
-    $PBJQ(this).attr('aria-selected', 'true');
+    $PBJQ('.tab-btn', container).removeClass('active').attr('aria-selected', 'false').attr('tabindex', '-1');
+    $PBJQ(this).addClass('active').attr('aria-selected', 'true').attr('tabindex', '0');
 
     var panel = $PBJQ(this).data('tab-target');
 
@@ -720,6 +718,30 @@ $PBJQ(document).ready(function($){
     $PBJQ('#' + panel).show();
   });
 
+  // Arrow and spacebar nav for tabs
+  $PBJQ(container).on('keydown', '.tab-btn', function (e) {
+    if (e.keyCode == 32) {
+      $PBJQ(this).click();
+      e.preventDefault();
+    }
+    if (e.keyCode == 37) {
+      $PBJQ("[aria-selected=true]").prev().click().focus();
+      e.preventDefault();
+    }
+    if (e.keyCode == 38) {
+      $PBJQ("[aria-selected=true]").prev().click().focus();
+      e.preventDefault();
+    }
+    if (e.keyCode == 39) {
+      $PBJQ("[aria-selected=true]").next().click().focus();
+      e.preventDefault();
+    }
+    if (e.keyCode == 40) {
+      $PBJQ("[aria-selected=true]").next().click().focus();
+      e.preventDefault();
+    }
+  });
+
   $PBJQ(document).on('view-sites-shown', function () {
     loadFromServer();
   });

diff --git a/portal/portal-render-engine-impl/impl/src/webapp/vm/morpheus/moresites.vm b/portal/portal-render-engine-impl/impl/src/webapp/vm/morpheus/moresites.vm
@@ -40,18 +40,16 @@
         <div id="selectSite">
             <!-- View all sites, add new site, preferences -->
             <ul class="tab-bar" role="tablist">
-                <li class="tab-btn active" id="tab-othersites" aria-selected="true" role="tab" data-tab-target="otherSitesCategorWrap">
-                    <a href="javascript:void(0);" class="favorites-tab-label">${rloader.sit_worksites}</a>
+                <li class="tab-btn active" id="tab-othersites" aria-selected="true" role="tab" data-tab-target="otherSitesCategorWrap" tabindex="0">
+                    ${rloader.sit_worksites}
                 </li>
-                <li class="organizeFavorites tab-btn" id="tab-favorites" aria-selected="false" role="tab" data-tab-target="organizeFavorites">
-                    <a href="javascript:void(0);" class="favorites-tab-label">
-                        <span class="favorites-desktop">${rloader.moresite_organize_favorites}</span>
-                        <span class="favorites-mobile">${rloader.moresite_favorites}</span>
-                        <span class="favoriteCountAndWarning">
-                            <span class="favoriteCount"></span>
-                            <span id="favoriteMaxWarningIndicator"> <span class="fa fa-warning" aria-hidden="true"></span></span>
-                        </span>
-                    </a>
+                <li class="organizeFavorites tab-btn" id="tab-favorites" aria-selected="false" role="tab" data-tab-target="organizeFavorites" tabindex="-1">
+                    <span class="favorites-desktop">${rloader.moresite_organize_favorites}</span>
+                    <span class="favorites-mobile">${rloader.moresite_favorites}</span>
+                    <span class="favoriteCountAndWarning">
+                        <span class="favoriteCount"></span>
+                        <span id="favoriteMaxWarningIndicator"> <span class="fa fa-warning" aria-hidden="true"></span></span>
+                    </span>
                 </li>
             </ul>