Opened 11 years ago
Closed 10 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)
Change History (14)
#1
@
11 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
#2
@
11 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.
#5
follow-up:
↓ 6
@
10 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:
#6
in reply to:
↑ 5
@
10 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
@
10 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. :)
#9
follow-up:
↓ 10
@
10 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?
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.
ToDo: