Fix issue 2293: click on read notification focus bug

[benjaminapetersen]

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.

@jwforres @spadgett

[jwforres]

I'm ok with this, I doubt a typical user would tab through that part of the UI

[jwforres]

I would only expect this button to exist if the notification is unread

[spadgett]

Maybe move it down after the notification message, too?

[benjaminapetersen]

Will do.

[jwforres]

Are we doing anything from an accessibility perspective to notify the user that the event is unread? Bolding the text but not providing sr-only text somewhere isn't accessible.

[spadgett]

dist looks wrong

[benjaminapetersen]

@jwforres I can do something like this to also indicate to a screen reader that the message is unread:

<a
       ng-if="notification.unread"
       href=""
       class="sr-only sr-only-focusable"
       ng-click="$ctrl.customScope.markRead(notification)">
       <span class="sr-only">Message Unread.</span><!-- this never becomes visible -->
       <span>Mark Read?</span><!-- this does become visible -->
</a>

However, this indicates "Read" by omission. Is that acceptable?

We support a list of links following the message (though in practice I've not seen any with more than one link), so adding the "mark read" message here seems to make sense to me:

Though @spadgett you mentioned margins. Think this could be better?

Lastly, strong feelings about Mark Read vs Mark Read? I am ignorant about screen readers & inflection.

[spadgett]

Your screenshot looks good to me, although I'd leave off the ?

[jwforres]

Agreed, no ?

…

On Thu, Oct 19, 2017 at 9:35 AM, Sam Padgett ***@***.***> wrote: Your screenshot looks good to me, although I'd leave off the ? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2299 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABZk7WZg0ECmXUVapcPawZ36-xqgeLhDks5st1AlgaJpZM4P-IhP> .

[spadgett]

nit: I'd pull this span outside of the a since it's not part of the action.

[benjaminapetersen]

Dropping the ?, also adjusting the pointer icon, will be good to remove [WIP] shortly.

[spadgett]

/lgtm

[benjaminapetersen]

rebased

/test

[jwforres]

/lgtm

[openshift-merge-robot]

Automatic merge from submit-queue.