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
| Comment | File | Size | Author |
|---|---|---|---|
| #24 | Screenshot 2014-09-29 16.09.13.jpg | 524.77 KB | lewisnyman |
| #3 | hover-focus-2249995-3.patch | 4.95 KB | mgifford |
| #10 | hover-focus-2249995-10.patch | 6.71 KB | mgifford |
| #11 | Seven-NoFocus-Error-Link.png | 25.58 KB | mgifford |
| #11 | Seven-NoFocus-Breadcrumb-Link.png | 17.21 KB | mgifford |
Comments
Comment #1
mgiffordComment #2
mgiffordComment #3
mgiffordComment #4
mparker17@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".
Comment #6
joelpittetLooks like a testbot hiccup because this is just CSS.
Comment #7
mgifford3: hover-focus-2249995-3.patch queued for re-testing.
Comment #8
alexpottMissing fixes in seven's..
quickedit.css
style.css
tour.theme.css
Comment #9
Bojhan commentedCan I get some screens?
Comment #10
mgiffordThanks @alexpott - here's a re-roll.
Comment #11
mgifford@Bojhan - here are the screen shots and an interdiff.

Comment #12
Bojhan commentedI dont fully understand why we also have the dotted line around it, isnt the underline enough of a visual change?
Comment #13
mgiffordI 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.
Comment #14
lewisnymanComment #15
mgiffordNow 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.
Comment #16
lewisnymanI'm not sure why the latest patch isn't being tested but this patch needs a reroll
Comment #17
mgiffordIt got broke out because of dropbutton.component.css
Should be good now though.
Comment #18
lewisnymanOk, only two small things.
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.
Comment #19
mgiffordThe 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
Comment #20
lewisnymanAgreed
Comment #21
mgiffordComment #22
luksakStarting to work on this.
Comment #23
luksakThere were a lot of changes in core. quickedit.css, seven.base.css and style.css don't exist anymore. Here is what I did:
@LewisNyman agreed on keeping this issue small and creating new issues. These are my findings:
Tabbing in Firefox is broken in general:
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?
Comment #24
lewisnymanI can confirm that the views secondary tabs bug is now fixed and the breadcrumbs look better. Great work everyone.
Comment #27
alexpottComment #29
mgiffordPatch applied nicely when I tested it locally.
Comment #30
BarisW commentedSame here, just 2 lines offset. Try again?
Comment #33
alexpottCommitted f3cf8b0 and pushed to 8.0.x. Thanks!