[ML] Ensure Calendar creation navigation tabs are keyboard/screen rea…

…der accessible (#23832) * Calendar nav links keyboard accessible * Prevent default click behavior * use event default value * remove unnecessary default param
elastic · Oct 12, 2018 · 2b5d303 · 2b5d303
1 parent 276305b
commit 2b5d303
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git a/...ugins/ml/public/settings/scheduled_events/components/new_event_modal/new_event_modal.html b/...ugins/ml/public/settings/scheduled_events/components/new_event_modal/new_event_modal.html
@@ -23,9 +23,9 @@ <h3 class="euiTitle">Create new event</h3>
     <div class="main-container row1">
       <div class="tabs-container">
         <ul class="nav nav-pills nav-stacked">
-          <li ng-class="{ active: ui.rangeType === '0' }"><a ng-click="ui.setRangeType('0')"> Single day</a></li>
-          <li ng-class="{ active: ui.rangeType === '1' }"><a ng-click="ui.setRangeType('1')"> Day range</a></li>
-          <li ng-class="{ active: ui.rangeType === '2' }"><a ng-click="ui.setRangeType('2')"> Time range</a></li>
+          <li ng-class="{ active: ui.rangeType === '0' }"><a href="#" ng-click="ui.setRangeType('0', $event)"> Single day</a></li>
+          <li ng-class="{ active: ui.rangeType === '1' }"><a href="#" ng-click="ui.setRangeType('1', $event)"> Day range</a></li>
+          <li ng-class="{ active: ui.rangeType === '2' }"><a href="#" ng-click="ui.setRangeType('2', $event)"> Time range</a></li>
         </ul>
       </div>
       <div

diff --git a/...public/settings/scheduled_events/components/new_event_modal/new_event_modal_controller.js b/...public/settings/scheduled_events/components/new_event_modal/new_event_modal_controller.js
@@ -42,7 +42,11 @@ module.controller('MlNewEventModal', function (
       start: moment().startOf('day'),
       end: moment().startOf('day').add(1, 'days')
     },
-    setRangeType(i) {
+    setRangeType(i, event) {
+      if (event && event.preventDefault) {
+        event.preventDefault();
+      }
+
       $scope.ui.rangeType = i;
       let width = MODAL_WIDTH_SMALL;
       if (i === RANGE_TYPE.SINGLE_DAY) {