Make tab bar keyboard accessible

Use anchor rather than link elements for the tab bar items so that they
are focusable via keyboard navigation.

Also follow code conventions and use 'is-<state>' for element states set in JS.

h/static/scripts/directive/test/selection-tabs-test.js

@@ -25,7 +25,7 @@ describe('selectionTabs', function () {
         totalNotes: '456',
       });
 
-      var tabs = elem[0].querySelectorAll('li');
+      var tabs = elem[0].querySelectorAll('a');
 
       assert.include(tabs[0].textContent, "Annotations");
       assert.include(tabs[1].textContent, "Notes");
@@ -40,9 +40,8 @@ describe('selectionTabs', function () {
         totalNotes: '456',
       });
 
-      var tabs = elem[0].querySelectorAll('li');
-
-      assert.include(tabs[0].className, "selection-tabs--selected");
+      var tabs = elem[0].querySelectorAll('a');
+      assert.isTrue(tabs[0].classList.contains('is-selected'));
     });
 
     it('should display notes tab as selected', function () {
@@ -52,9 +51,8 @@ describe('selectionTabs', function () {
         totalNotes: '456',
       });
 
-      var tabs = elem[0].querySelectorAll('li');
-
-      assert.include(tabs[1].className, "selection-tabs--selected");
+      var tabs = elem[0].querySelectorAll('a');
+      assert.isTrue(tabs[1].classList.contains('is-selected'));
     });
   });
 });

h/static/styles/selection-tabs.scss

@@ -10,16 +10,19 @@
   }
 }
 
-.selection-tabs--selected {
-  color: $grey-6;
-  font-weight: bold;
-}
-
 .selection-tabs__type {
+  color: $grey-6;
   margin-right: 20px;
   cursor: pointer;
   min-width: 85px;
   min-height: 18px;
+
+  // Disable focus ring for selected tab
+  outline: none;
+}
+
+.selection-tabs__type.is-selected {
+  font-weight: bold;
 }
 
 .selection-tabs__count {
@@ -30,4 +33,4 @@
 
 .selection-loading {
   text-align: center;
-}
\ No newline at end of file
+}

h/templates/client/selection_tabs.html

 <!-- Tabbed display of annotations and notes. -->
-<ul class="selection-tabs">
-  <li class="selection-tabs__type"
-      ng-class="{'selection-tabs--selected': vm.selectedTab === vm.TAB_ANNOTATIONS}"
-      h-on-touch="vm.selectTab('annotation')">
+<div class="selection-tabs">
+  <a class="selection-tabs__type"
+     href="#"
+     ng-class="{'is-selected': vm.selectedTab === vm.TAB_ANNOTATIONS}"
+     h-on-touch="vm.selectTab('annotation')">
     Annotations
     <span class="selection-tabs__count" ng-if="vm.totalAnnotations > 0">{{ vm.totalAnnotations }}</sup>
-  </li>
-  <li class="selection-tabs__type"
-      ng-class="{'selection-tabs--selected': vm.selectedTab === vm.TAB_NOTES}"
-      h-on-touch="vm.selectTab('note')">
+  </a>
+  <a class="selection-tabs__type"
+     href="#"
+     ng-class="{'is-selected': vm.selectedTab === vm.TAB_NOTES}"
+     h-on-touch="vm.selectTab('note')">
     Notes
     <span class="selection-tabs__count" ng-if="vm.totalNotes > 0">{{ vm.totalNotes }}</sup>
-  </li>
-</ul>
+  </a>
+</div>
 <div ng-if="!vm.isLoading()">
   <div ng-if="vm.selectedTab === vm.TAB_NOTES && vm.totalNotes === 0"  class="annotation-unavailable-message">
     <p class="annotation-unavailable-message__label">