Widgets: Toggle arrows on focus need an indicator beside color alone

[davidakennedy]

The issue: When testing the new Widget customizer with a keyboard (in this case Mac OS 10.9.2 with and Chrome), the arrow links for #available-widgets (within Widgets) have a visible focus (the arrow turns a different color), which is great! But it's hard to see even for users with good eye sight.

What I expected: A stronger visible focus when navigating via the keyboard.

Recommendation: I'd consider adding something beside color alone to indicate focus here, especially with the small item. Perhaps an outline or border.

[ocean90]

ToDo:

• The arrow should change his color when hovering .widget-title
• Focus should be the same as hovering .widget-title (means it gets an outline)

[ocean90]

Just noticed that the issue exists also on the widgets screen.

Also I must revert by previous point that the color should be changed when hovering .widget-title, because the primary action of .widget-title is moving the widget via Drag&Drop.

[Cheffheid]

Doing anything to it will probably mean changing the markup and moving the :after somewhere else first. :focus:after doesn't work and so change is limited.

Would probably add a span and move the triangle icon there. That way, there's much more freedom to change the icon too:

Size increase

Size increase and border

[TomHarrigan]

Replying to Cheffheid:

Doing anything to it will probably mean changing the markup and moving the :after somewhere else first. :focus:after doesn't work and so change is limited.

Hey, where does :focus:after not work? I gave it a whirl in Chrome, FF, Safari, all looked good.

Increasing the size of the arrow on focus is inconsistent with arrow behavior elsewhere, namely the customizer. Would outline alone not be sufficient?

Note: On customizer, the background color changes as well when moving from section to section.

[Cheffheid]

As far as changing the size is concerned, it was just me thinking out loud. I agree that it may not be the best idea consistency wise, though the actual widgets in the customizer seem to have the same lack of noticable focus. I do like the background idea though, and it's probably what we should be aiming for because it'd more easy to notice.

Either way, it was in Chrome...something or other. Might've been 35 or 36 on Windows.

Looking at it again, in Chrome 37 and Firefox 32 on Linux, it does seem to work fine. So, either I wasn't attentive enough or it was recently fixed for Chrome. I'll double check when I get home, but I'm just going to assume it's the former.

It also doesn't seem to be necessary if we're just changing colours and adding an outline. So there's that too. :)

[TomHarrigan]

adds outline + box shadow on focus. increase padding-bottom on :after

[TomHarrigan]

I just added the outline and box shadow on this patch, along with padding so that the box around the arrow would be square (otherwise the outline wouldn't reach the bottom of the widget box). I gave background colors a try on
:focus, but they weren't looking very good.

[Cheffheid]

Box shadow doesn't seem to render for me unless it's applied to the :after. Would using the same colour as the box shadow on "Screen options" button :focus be weird?

As far as changing the background goes, we'd have to get the whole bar to change. Which means the title needs to be made focusable, instead of just the anchor.

[TomHarrigan]

Change focus color to blue

[TomHarrigan]

Replying to Cheffheid:

Would using the same colour as the box shadow on "Screen options" button :focus be weird?

I think that makes sense, gives more of a consistent experience since just about everything else gets that blue outline on focus.

[Cheffheid]

Awesome. I like it.

[johnbillion]

Fixed in r29983