“Seven” breaks keyboard navigation

Hm. I'm not sure, but I *think* the point of reset.css is to, well, reset stuff. And if we want to do something different than reset.css, we should do so in Seven's style.css file.

I'm tagging "needs themer review" for confirmation, though.

Right. reset.css is there to reset everything to cross-browser-consistent defaults.

A theme should apply the defaults it wants to use.

Subscribe

We don't have to keep the dotted outline border as outline right? I suggest this:

Hmm multiline links or fontsize changes easily break the sprite. Maybe just without a sprite.

Making it work in IE6/IE7.

Adding accessibility tag

My bad.

Reroll

(needs list-item-dark.png from #8)

guess that sorta solves the problem for those 2 lists... how about *all* the rest?

isn't it rather trivial to just reinstate the outline whilst keeping safari happy? BG image solutions aren't very solid and it's not quite what would be expected

ma bad

So this patch needs to pass the bots and also be tested in the major browsers to see that Seven still displays properly.

Anything else?

Yes, actually designing the look of the outline in Seven. :)
Anyone who has best practices to suggest?

Adding usability tag too as this will be important here.

Not critical. Please read and understand Priority levels of Issues, thanks.

@sun.core, I think the case can be made that without this fix "the project (core, module, theme, etc.) can't be used as intended, [so] it is a critical problem."

If you cannot operate a mouse, until this problem is fixed you cannot recognize what has focus and therefore cannot tell at any given point what link the device that you can use (most often a keyboard, but sometimes a puff-pipe) will activate. (If you can use a mouse, you can approximate this experience by having it display no cursor as you try to use it to navigate the site.)

And if you are building a site for any business or agency that is concerned about making its electronic information compliant with Section 508 of the Americans with Disabilities Act or the latest Web Content Accessibility Guidelines (WCAG 2.0), then you can't use Drupal without this fix. In other words, if we want governments and governmental agencies to continue their move towards Drupal, we need to fix this problem.

And I believe I understand correctly that Dries is committed to fixing major issues with accessibility — and this definitely is one — before D7 is released. So it seems to me that, without this fix, D7 can't be used as Dries intends.

I'm setting this back to "critical" because I doubt that Moshe, yoroy, and webchick would have each missed this point when they commented on this issue.

Dries? webchick? Am I off base?

@sun.core, I have to agree with @cliff here:

When a bug renders a module, a core system, or a popular function unusable. Possible examples from core are the inability to create a new node or blocks
won't display. These are to be fixed immediately because the software is not usable at all. Basically if the project (core, module, theme, etc.) can't
be used as intended, then it is a critical problem.

If a non-mouse user cannot tell where the focus is then they cannot use the theme as intended.

Just for (cross) reference. Two other threads that deal with the problem and its possible solution(s):

#467296: Accessibility improvements for vertical tabs
The patch there re-instates outline as a means for showing active tab, focus and hover state (without having known of this thread beforehand). There's a also screencast available.

#611896: Seven's vertical-tabs.css interferes with accessibilty improvements
This thread is about Seven's IMHO much too rigorous resetting of CSS styles.

@sun.core I think we've described why this is a critical issue. If you'd like me to help walk you through how difficult it is to tab through a site without this, please let me know.

The patch resolves the problem. It was retested, but I applied it to grab these screenshots and there were some problems applying it so I've refreshed it with a more recent patch.

Everyone should have trouble finding the focus of my cursor without the patch. With the patch it gives a consistent usability experience for both keyboard only users & mouse users (which should be what is desired, right?)

More links on this issue and why it's bad:
http://24ways.org/2009/dont-lose-your-focus
http://webaim.org/blog/plague-of-outline-0/

+++ themes/seven/style.css	9 Mar 2010 02:54:50 -0000
@@ -15,7 +15,8 @@ a {
-a:hover {
+a:hover,
+a:focus {

errr, so after reading http://webaim.org/blog/plague-of-outline-0/ -- why don't we kill that damn outline:0 instead?

+++ themes/seven/style.css	9 Mar 2010 02:54:50 -0000
@@ -429,10 +429,19 @@ ul.admin-list li:last-child {
+ ul.node-type-list li a,
+ ul.admin-list li a {

Wrong indentation here.

+++ themes/seven/style.css	9 Mar 2010 02:54:50 -0000
@@ -429,10 +429,19 @@ ul.admin-list li:last-child {
+ul.node-type-list li a:hover,
+ul.admin-list li a:hover,
+ul.node-type-list li a:focus,
+ul.admin-list li a:focus {

Another reason to kill outline instead.

142 critical left. Go review some!

@sun I'm really not sure what happened to cause us to move away from the patch in #1. Moshe RTBC'd in then.

Think the reset was considered important by @webchick & yourself, but really not sure. Think the patch that I last proposed was just an effort to "re-apply the focus outline in the theme".

So, can we go back to #1. That would satisfy me if we got that in! This seems to also be used in:

misc/ui/ui.core.css:.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
misc/vertical-tabs.css: outline: 0;
modules/toolbar/toolbar.css: outline: 0;
modules/overlay/overlay-parent.css: outline: 0;

But I don't know what role it is playing there.

#1: outline.patch queued for re-testing.

I have no idea what I meant in #4, perhaps I was mistaken in that reset.css would somehow live outside of Seven theme and be loaded for all themes...

I guess that #1 will still pass, so RTBC.

I tested this with the patch in #1 and it works fine! Thanks for setting this back as RTBC.

Just attaching a screenshot as reference.

Committed #1 to HEAD.