Merge pull request #2299 from benjaminapetersen/issue/2293/notificati…

…on-click-handler

Automatic merge from submit-queue.

Fix issue 2293: click on read notification focus bug

Fix issue #2293 

You can still click the notification to clear it, but now there is a `sr-only` button for tabbing.  The gif below shows the tabbing experience.  There is clearly a hidden element in the flow.

![2017-10-18 14 08 43](https://user-images.githubusercontent.com/280512/31734870-0e00b0b8-b40e-11e7-9989-29a3a06f58cc.gif)


@jwforres @spadgett

app/styles/_notifications.less

@@ -39,9 +39,9 @@ notification-drawer-wrapper {
   }
   // the whole block is clickable, need to set pointer on all of these
   // for the correct visual
-  .drawer-pf-notification,
-  .drawer-pf-notification-info,
-  .drawer-pf-notification-message {
+  .drawer-pf-notification-inner.is-clickable,
+  .is-clickable .drawer-pf-notification-info,
+  .is-clickable .drawer-pf-notification-message {
     cursor: pointer;
   }
   .drawer-pf-notification {

app/views/directives/notifications/notification-body.html

@@ -1,7 +1,7 @@
 <div
   class="drawer-pf-notification-inner"
-  tabindex="0"
-  ng-click="$ctrl.customScope.markRead(notification)">
+  ng-class="{ 'is-clickable': notification.unread }"
+  ng-click="notification.unread && $ctrl.customScope.markRead(notification)">
   <button
     class="btn btn-link pull-right drawer-pf-notification-close"
     type="button"
@@ -88,7 +88,14 @@
             <span ng-if="!$last" class="toast-action-divider">|</span>
           </span>
         </span>
-
+        <span class="sr-only">Message Unread. </span>
+        <a
+          ng-if="notification.unread"
+          href=""
+          class="sr-only sr-only-focusable"
+          ng-click="$ctrl.customScope.markRead(notification)">
+          <span>Mark Read</span>
+        </a>
       </div>
       <div
         ng-if="notification.event.count > 1"

dist/scripts/templates.js

@@ -7860,7 +7860,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
 
 
   $templateCache.put('views/directives/notifications/notification-body.html',
-    "<div class=\"drawer-pf-notification-inner\" tabindex=\"0\" ng-click=\"$ctrl.customScope.markRead(notification)\">\n" +
+    "<div class=\"drawer-pf-notification-inner\" ng-class=\"{ 'is-clickable': notification.unread }\" ng-click=\"notification.unread && $ctrl.customScope.markRead(notification)\">\n" +
     "<button class=\"btn btn-link pull-right drawer-pf-notification-close\" type=\"button\" ng-if=\"!notification.actions.length\" ng-click=\"$ctrl.customScope.clear(notification, $index, notificationGroup)\">\n" +
     "<span class=\"sr-only\">Clear notification</span>\n" +
     "<span aria-hidden=\"true\" class=\"pficon pficon-close\"></span>\n" +
@@ -7900,6 +7900,10 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "<span ng-if=\"!$last\" class=\"toast-action-divider\">|</span>\n" +
     "</span>\n" +
     "</span>\n" +
+    "<span class=\"sr-only\">Message Unread. </span>\n" +
+    "<a ng-if=\"notification.unread\" href=\"\" class=\"sr-only sr-only-focusable\" ng-click=\"$ctrl.customScope.markRead(notification)\">\n" +
+    "<span>Mark Read</span>\n" +
+    "</a>\n" +
     "</div>\n" +
     "<div ng-if=\"notification.event.count > 1\" class=\"text-muted small\">\n" +
     "{{notification.event.count}} times in the last\n" +