Click on a read notification just leaves focus on the notification

[jwforres]

Right now if you click on an already read notification it looks like this (see blue focus outlines):

I question whether we should even still have a click handler on a read notification, clicking it does absolutely nothing.

[jwforres]

@openshift/team-ux-review

[beanh66]

@jeff-phillips-18 I don't think we have this issue in PatternFly, but curious if you have seen it? Typically if a row is already marked as read, we would not see the blue outline. @jwforres I agree it is unnecessary.

[jwforres]

Yeah @spadgett thought this was probably a bug in our special handling of click events in our impl of the drawer. Once its been marked as read I think we should remove the click handler and click target (no longer show the hand when hovering).

[spadgett]

It's specific to OpenShift notifications:

https://github.com/openshift/origin-web-console/blob/master/app/views/directives/notifications/notification-body.html#L1-L4

cc @benjaminapetersen

[benjaminapetersen]

We can remove that handler pretty easily:

ng-click="notification.unread && $ctrl.customScope.markRead(notification)">

There is no longer a click, but that doesn't affect the styling. Working on a solution.

[benjaminapetersen]

Looking @ this with @sg00dwin. So the patternfly demo appears to be tinkering with the focus. If I manually trigger the "focus" attrib in the web inspector, I can achieve the same effect:

Angular Patternfly:

Patternfly:

So there is something happening in the demo CSS that is not inherited in the actual component that is causing the focus to be hidden or clipped.

The property is outline: -webkit-focus-ring-color auto 5px;

[benjaminapetersen]

The cause is our tabindex="0":

<div
  class="drawer-pf-notification-inner"
  tabindex="0"
  ng-click="notification.unread && $ctrl.customScope.markRead(notification)">

We did this to add the ability to tab through the notifications. The patternfly / angular-patternfly implementations do not do this. Visually it is a tad annoying, but what is the best solution regarding accessibility?

Default patternfly only has focus on the kebabs:

[spadgett]

I don't think what we have no is accessible anyway since there is no ng-keydown. The tabindex doesn't help. ng-click won't be triggered by the keyboard.

Better to have an sr-only button for accessibility and take tabindex off?

[benjaminapetersen]

Thats true, the ng-click does not fire when pressing "enter".

I can do:

  <button
    class="sr-only"
    ng-click="notification.unread && $ctrl.customScope.markRead(notification)">
    Mark Read
  </button>

It eliminates the focus. Its a bit of a strange experience in that you can tab to this button, but since it is hidden you don't get any visual feedback.

[spadgett]

Its a bit of a strange experience in that you can tab to this button, but since it is hidden you don't get any visual feedback.

Maybe add sr-only-focusable and make it a link?

https://getbootstrap.com/docs/3.3/css/#helper-classes-screen-readers

[benjaminapetersen]

Ooo didn't know that one exists. Gave it a swing and I get this (even after the change to a link, just did the gif as a button):

Tinkering with this some more, I'll [WIP] the PR for now.

[spadgett]

Yeah we probably want to put it at the bottom of the notification content with good margins since it will be visible when focused.

[jwforres]

We still have a bug here that the hover still makes it look clickable even after the notification is read, the cursor needs to change to a pointer.

[jwforres]

The current behavior is what UXD is asking for, so closing. We can address any remaining concerns upstream in patternfly.