WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 5 years ago

#27593 closed defect (bug) (fixed)

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

Reported by: davidakennedy Owned by:
Milestone: 4.1 Priority: low
Severity: minor Version: 3.4
Component: Widgets Keywords: needs-patch
Focuses: accessibility Cc:

Description

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.

Attachments (2)

common.diff (524 bytes) - added by TomHarrigan 5 years ago.
adds outline + box shadow on focus. increase padding-bottom on :after
common.2.diff (553 bytes) - added by TomHarrigan 5 years ago.
Change focus color to blue

Download all attachments as: .zip

Change History (14)

#1 @ocean90
5 years ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 3.9
  • Priority changed from normal to low
  • Severity changed from normal to minor
  • Summary changed from Visible Focus on Widgets in Theme Customizer Need an Indicator Beside Color Alone to Widget Customizer: Visible focus need an indicator beside color alone

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)

#2 @ocean90
5 years ago

  • Keywords 4.0-early added
  • Milestone changed from 3.9 to Future Release
  • Summary changed from Widget Customizer: Visible focus need an indicator beside color alone to Widgets: Toggle arrows on focus need an indicator beside color alone

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.

#3 @johnbillion
5 years ago

  • Version changed from trunk to 3.5

#4 @johnbillion
5 years ago

  • Version changed from 3.5 to 3.4

#5 follow-up: @Cheffheid
5 years ago

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:

http://i.imgur.com/qP3W5UE.png
Size increase

http://i.imgur.com/VNdbHvV.png
Size increase and border

#6 in reply to: ↑ 5 @TomHarrigan
5 years ago

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.

#7 @Cheffheid
5 years ago

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 be 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. :)

Last edited 5 years ago by Cheffheid (previous) (diff)

@TomHarrigan
5 years ago

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

#8 @TomHarrigan
5 years ago

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.

http://i.imgur.com/nFMNkkl.png

#9 follow-up: @Cheffheid
5 years ago

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?

http://i.imgur.com/lfiTeEu.png

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
5 years ago

Change focus color to blue

#10 in reply to: ↑ 9 @TomHarrigan
5 years ago

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.

#11 @Cheffheid
5 years ago

Awesome. I like it.

#12 @johnbillion
5 years ago

  • Keywords 4.0-early removed
  • Milestone changed from Future Release to 4.1
  • Resolution set to fixed
  • Status changed from new to closed

Fixed in r29983

Note: See TracTickets for help on using tickets.