fix(customFacet): 2517 can tab in modal

- tab cycles down after visiting input and checkbox Closes #2517
NCI-GDC · Jun 16, 2016 · d5ab3aa · d5ab3aa
1 parent 570b0f2
commit d5ab3aa
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 1 deletion.
diff --git a/app/scripts/components/facets/facets.controllers.ts b/app/scripts/components/facets/facets.controllers.ts
@@ -505,7 +505,10 @@ module ngApp.components.facets.controllers {
               if (_this.$uibModalStack) _this.$uibModalStack.dismissAll();
               break;
             case KeyCode.Tab:
-              e.preventDefault();
+              const activeId = document.activeElement.id;
+              if (activeId !== 'show-fields-checkbox' && activeId !== 'quick-search-input') {
+                _this.setSelectedIndex(Cycle.Down);
+              }
               break;
           }
       };

diff --git a/app/scripts/components/facets/styles/facets.less b/app/scripts/components/facets/styles/facets.less
@@ -165,6 +165,10 @@
   background-color: #1f486c;
 }
 
+li:focus {
+  outline: none
+}
+
 .custom-facet-description {
   padding: 0.7rem 1.5rem;
   border-left: 32px solid #636869;

diff --git a/app/scripts/components/facets/templates/add-facets-modal.html b/app/scripts/components/facets/templates/add-facets-modal.html
@@ -18,6 +18,7 @@ <h3 style="display: inline">
   </h3>
   <span data-ng-click="cufc.toggleEmpty()"
        class="pull-right"
+       id="show-fields-checkbox"
        tabindex="0">
     <i class="fa fa-check-square-o"
        ng-class="{'fa-check-square-o': cufc.CustomFacetsService.nonEmptyOnlyDisplayed,