WordPress.org

Make WordPress Core

Opened 7 years ago

Closed 6 years ago

#27826 closed defect (bug) (fixed)

Button focus style improvement

Reported by: mattheu Owned by: 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 7 years ago.
27826.patch (3.7 KB) - added by iseulde 6 years ago.
Screen Shot 2014-05-16 at 09.43.42.png (11.9 KB) - added by iseulde 6 years ago.
Screen Shot 2014-05-16 at 09.46.27.png (11.4 KB) - added by iseulde 6 years ago.
Screen Shot 2014-05-23 at 18.42.26.png (11.6 KB) - added by iseulde 6 years ago.
Screen Shot 2014-07-02 at 18.52.24.png (11.0 KB) - added by iseulde 6 years ago.
27826.2.diff (4.2 KB) - added by celloexpressions 6 years ago.
Merge previous patches, add our own focus styling for buttons.
27826.png (1.7 KB) - added by celloexpressions 6 years ago.
with 27826.2.diff

Download all attachments as: .zip

Change History (19)

@mattheu
7 years ago

#1 @ocean90
7 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
7 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
6 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
6 years ago

#4 @iseulde
6 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
6 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
6 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
6 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.


6 years ago

@celloexpressions
6 years ago

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

#9 @celloexpressions
6 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
6 years ago

with 27826.2.diff

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


6 years ago

#11 @helen
6 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.