This should also be done elsewhere, but it is important that we are implementing hover/focus behavior consistently.

Right now there are lots of places where hover behavior is defined, but focus isn't. In most cases this just means that keyboard only users get even less visual queues than users that use a mouse. This is just bad...

In looking at hover/focus implementations in #1989470: Dropbutton style update for Seven I was also surprised at how inconsistently they were used. I think we should try to keep things as consistent as possible (a:hover, a:focus). It makes the CSS bigger (unfortunately), but we've got to work within what constraints CSS/HTML gives us.
http://www.456bereastreet.com/archive/201004/whenever_you_use_hover_also...
http://accessibleculture.org/articles/2010/08/visible-keyboard-focus/

More info from the handbook:
https://drupal.org/node/1638020

Comments

mgifford’s picture

Title: Clean up hover/focus & outline behavior - In Seven » Clean up hover/focus - In Seven
Issue summary: View changes
mgifford’s picture

Issue summary: View changes
mgifford’s picture

Status: Active » Needs review
StatusFileSize
new4.95 KB
mparker17’s picture

Status: Needs review » Reviewed & tested by the community

@anandps and I tested this with and without VoiceOver on Safari, Chrome and Firefox in Mac OS. Additionally, we checked it with and without JAWS on Chrome and Firefox in Windows; and without JAWS on IE9, IE10 and IE11 on Windows. In all cases, the focus states are obvious.

Note when I say "without [screenreader software]" I mean "just using the tab key".

Status: Reviewed & tested by the community » Needs work

The last submitted patch, 3: hover-focus-2249995-3.patch, failed testing.

joelpittet’s picture

Status: Needs work » Reviewed & tested by the community

Looks like a testbot hiccup because this is just CSS.

mgifford’s picture

3: hover-focus-2249995-3.patch queued for re-testing.

alexpott’s picture

Status: Reviewed & tested by the community » Needs work

Missing fixes in seven's..

.quickedit-button.action-save:hover,
.quickedit-button.action-saving:hover {
  box-shadow: 0 1px 2px hsla(203, 10%, 10%, 0.25);
}

quickedit.css

.form-actions .dropbutton-wrapper input:hover {
  background: none;
  border: none;
}

style.css

.joyride-close-tip:hover {
  color: rgba(255,255,255, 0.9);
  text-decoration: none;
}

tour.theme.css

Bojhan’s picture

Can I get some screens?

mgifford’s picture

StatusFileSize
new6.71 KB

Thanks @alexpott - here's a re-roll.

mgifford’s picture

Status: Needs work » Needs review
StatusFileSize
new25.58 KB
new17.21 KB
new42.36 KB
new39 KB
new21.72 KB
new51.75 KB
new1.97 KB

@Bojhan - here are the screen shots and an interdiff.

Bojhan’s picture

I dont fully understand why we also have the dotted line around it, isnt the underline enough of a visual change?

mgifford’s picture

I agree that the dotted line is a bit annoying.. That's not something that I added. That's there without the patch.

I was simply working to ensure that the focus behavior was as good as the hover behavior. The outline isn't as good, but certainly having the outline and underline is a bit annoying.

lewisnyman’s picture

Issue tags: +frontend
mgifford’s picture

Now we've fixed this in Bartik #2263987: Clean up hover/focus - in Bartik can we do so in Seven too?

Not sure what else is needed before it's marked RTBC.

lewisnyman’s picture

Issue tags: +Needs reroll

I'm not sure why the latest patch isn't being tested but this patch needs a reroll

mgifford’s picture

StatusFileSize
new6.91 KB

It got broke out because of dropbutton.component.css

Should be good now though.

lewisnyman’s picture

Status: Needs review » Needs work
Issue tags: -Needs reroll
StatusFileSize
new64.44 KB

Ok, only two small things.

+++ b/core/themes/seven/seven.base.css
@@ -11,8 +11,10 @@ a,
-a:hover,
-.link:hover {
+ a:hover,
+.link:hover,
+a:focus,
+.link:focus {
   text-decoration: underline;
 }

If we're going to add underline can we please remove the outline? It's too busy

I noticed this one bug when tabbing over the secondary tabs in Views.

mgifford’s picture

The main goal here is to have keyboard only be as good or better than the mouse only experience.

1) Outline

I like the hover effect on admin/structure/views

I'd love that to be applied on focus for /admin

I really don't see any point of that outline though around that div.

In general where I've seen outline + underline it makes it less readable. So yes, I think that would be fine.

The breadcrumbs seems to use outline & not underline which is inconsistent too. It should just use the underline on focus so that it works just like the mouse only experience.

2) Views Tab - It's not consistent

With a keyboard, Views Add tab is inconsistent with the mouse only design. Agreed that this should be fixed too.

/admin/structure/views/view/who_s_online

lewisnyman’s picture

The breadcrumbs seems to use outline & not underline which is inconsistent too. It should just use the underline on focus so that it works just like the mouse only experience.

Agreed

mgifford’s picture

Issue tags: +dcamsa11y
luksak’s picture

Assigned: Unassigned » luksak

Starting to work on this.

luksak’s picture

Status: Needs work » Needs review
StatusFileSize
new7.61 KB
new6.52 KB

There were a lot of changes in core. quickedit.css, seven.base.css and style.css don't exist anymore. Here is what I did:

  • Re-rolled the patch.
  • Removed the outline from the breadcrumb
  • Removed the focus state from the views secondary buttons

@LewisNyman agreed on keeping this issue small and creating new issues. These are my findings:

Tabbing in Firefox is broken in general:

  • The skip to main content link doesn't work
  • Primary and secondary tabs don't work
  • Breadcrumbs don't work

Focus states should be fixed in views. This is why I removed some changes from the patch.

I guess we should open two new issues for that. Agreed?

lewisnyman’s picture

Status: Needs review » Reviewed & tested by the community
StatusFileSize
new524.77 KB

I can confirm that the views secondary tabs bug is now fixed and the breadcrumbs look better. Great work everyone.

The last submitted patch, 23: hover-focus-2249995-23.patch, failed testing.

alexpott’s picture

Status: Reviewed & tested by the community » Needs work
Issue tags: +Needs reroll

mgifford’s picture

Patch applied nicely when I tested it locally.

BarisW’s picture

Status: Needs work » Reviewed & tested by the community
Issue tags: -Needs reroll

Same here, just 2 lines offset. Try again?

The last submitted patch, 10: hover-focus-2249995-10.patch, failed testing.

alexpott’s picture

Status: Reviewed & tested by the community » Fixed

Committed f3cf8b0 and pushed to 8.0.x. Thanks!

  • alexpott committed f3cf8b0 on 8.0.x
    Issue #2249995 by mgifford, Lukas von Blarer: Clean up hover/focus - In...

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.