Make WordPress Core

Opened 10 years ago

Closed 10 years ago

#27826 closed defect (bug) (fixed)

Button focus style improvement

Reported by: mattheu's profile mattheu Owned by: helen's profile helen
Milestone: 4.0 Priority: normal
Severity: normal Version: 3.9
Component: General Keywords: has-patch
Focuses: ui Cc:

Description

The focus on buttons in a button group is hidden behind the next button and doesn't look great.

See for example - using Chrome browser, insert an image into a post, select image alignment. See screenshot

https://dl.dropboxusercontent.com/s/p3nrisep1eq5b3u/2014-04-15%20at%2016.51.png

Proposed solution to this is to give the focused button a higher z-index to ensure the focus glow is above the next button.

Attachments (8)

27826.diff (534 bytes) - added by mattheu 10 years ago.
27826.patch (3.7 KB) - added by iseulde 10 years ago.
Screen Shot 2014-05-16 at 09.43.42.png (11.9 KB) - added by iseulde 10 years ago.
Screen Shot 2014-05-16 at 09.46.27.png (11.4 KB) - added by iseulde 10 years ago.
Screen Shot 2014-05-23 at 18.42.26.png (11.6 KB) - added by iseulde 10 years ago.
Screen Shot 2014-07-02 at 18.52.24.png (11.0 KB) - added by iseulde 10 years ago.
27826.2.diff (4.2 KB) - added by celloexpressions 10 years ago.
Merge previous patches, add our own focus styling for buttons.
27826.png (1.7 KB) - added by celloexpressions 10 years ago.
with 27826.2.diff

Download all attachments as: .zip

Change History (19)

@mattheu
10 years ago

#1 @ocean90
10 years ago

  • Component changed from Appearance to Media
  • Focuses administration added
  • Keywords has-patch added
  • Milestone changed from Awaiting Review to 4.0

#2 follow-up: @iseulde
10 years ago

  • Component changed from Media to General
  • Focuses administration removed

This is a general problem, not just for media, and not just for the back-end. I think we should try to polish :focus styles so they're consistent across different browsers and HTML elements. E.g. A 'link' button has a dotted outline, but <input> and <button> buttons have a different outline. Not sure if we should keep the outline at all, because focussed buttons have a distinct style.

#3 in reply to: ↑ 2 @helen
10 years ago

Replying to avryl:

I think we should try to polish :focus styles so they're consistent across different browsers and HTML elements.

Opened #28267 for general work.

@iseulde
10 years ago

#4 @iseulde
10 years ago

Screenshot 1: Chrome an Safari.
Screenshot 2: Firefox.
7826.patch removes the outline from all buttons (and also cleans up some rgba values).

#5 follow-up: @iseulde
10 years ago

  • Type changed from enhancement to defect (bug)

I think Facebook's button focus styles are great btw. They're clearly focussed. See screenshot above.

#6 in reply to: ↑ 5 @helen
10 years ago

Replying to avryl:

I think Facebook's button focus styles are great btw. They're clearly focussed. See screenshot above.

Yeah, I think I want to move to having the blue border/outline on everything (it's keyed to the Webkit color, actually, but without as much spread), as per the other ticket opened, and thus normalize across browsers. We should fix this particular issue while we're at it :)

#7 @iseulde
10 years ago

  • Summary changed from Button group focus style improvement to Button focus style improvement

Here's one from Twitter. I quite like the solid border instead of the shadow, but maybe not with such a big offset.

This ticket was mentioned in IRC in #wordpress-dev by DrewAPicture. View the logs.


10 years ago

@celloexpressions
10 years ago

Merge previous patches, add our own focus styling for buttons.

#9 @celloexpressions
10 years ago

27826.2.diff fixes button groups (props mattheu), cleans up browser default styling and formatting (props avryl), and adds our link & input focus styling to buttons.

@celloexpressions
10 years ago

with 27826.2.diff

This ticket was mentioned in IRC in #wordpress-dev by DrewAPicture. View the logs.


10 years ago

#11 @helen
10 years ago

  • Owner set to helen
  • Resolution set to fixed
  • Status changed from new to closed

In 29466:

Better focus styling for buttons and button groups. props mattheu, avryl, celloexpressions. fixes #27826. see #28267.

Note: See TracTickets for help on using tickets.