Some focus styles are broken

[iseulde]

See screenshots below.

[iseulde]

This is a disabled button...

[iseulde]

Above patch fixes the "Add New Theme" button.

[afercia]

Hi, proposed attached patch tries to fix dashboard and "list table" stuff:

• removes overflow: hidden where possible so the focus box-shadow is no more "cut-off"
• introduces a new "containing floats" CSS method, available in common.css which uses display: table, not supported by IE 7 and ​on IRC I've read something about IE 7 support going to be dropped soon
• better positioning for the list/grid mode icons in the media library, please notice when using display: inline-block white space in the markup matters and list/grid modes differs about white space
• outstanding issues on list/grid modes toolbars for small displays
• needs testing :) especially in IE

[afercia]

I'm working on the pagination buttons:

to make the "disabled" buttons really disabled and refining my previous patch. I'd like to change them and use the standard buttons style, see screenshot below, before and after in normal and "focused" state:

Any thoughts more than welcome.

[ocean90]

Patches need some testing. Not sure I like the button style for the navigation.

[afercia]

Replying to ocean90:

Patches need some testing. Not sure I like the button style for the navigation.

I was thinking to split out the part about navigation buttons in a new ticket, and keep this ticket just for the broken focus styles. Thoughts?

[afercia]

Refreshed simplified patch

[afercia]

Refreshed patch:

• merges avryl's patch
• takes care of focus styles in the dashboard and lists tables
• strips out proposed changes to list table navigation, will open a new ticket for that
• enlarges list table view-switch links clickable area
• takes care of "dismiss" link, see also #28086

some examples:

[afercia]

patch needs a refresh after r30813

[SergeyBiryukov]

Focus style for the tabs on Add Plugins screen could use some padding: 29897.add-plugins.png​.

[iseulde]

#31203 was marked as a duplicate.

[afercia]

Will refresh the patch and check also focus style for add-new-theme. About the padding issue mentioned by @SergeyBiryukov, I'd propose to change the bottom black bar currently made with a border and use instead a pseudo element :after. Also, in responsive view, maybe reduce the vertical height:

[afercia]

Related: #30725

[afercia]

Update:

• agreed with @celloexpressions the Add New Theme link focus style will be handled in #31203
• the only thing left here is the focus style for plugin install/theme install toolbars, see proposal below

UI feedback welcome. Some tickets should be probably fixed first, see #30725, #30766 and #31203

[afercia]

Refreshed patch takes care also of Add Themes/Add Plugins toolbars links. There are outstanding issues, for example the .tablenav links and also outstanding accessibility issues that need some improvements, will create new tickets for them.
For the main focus styles please refer to screenshot in comment 6. See also new screenshots below (please consider would be really hard to make screenshots for all the single focused elements...).
Includes fixes for IE 8, please notice given the curren selectors, touching the toolbars forces to fix also the media modal toolbar, see IE 8 screenshot.

Tested in latest Firefox, latest Chrome, IE 8.

Animated gif to compare the 4 toolbars: media library list/grid mode, add themes, add plugins:

Chrome dev tools mobile emulator. Notice "Hello Dolly" breaks the header title :)

IE 8 media modal:

[afercia]

Fixes broken focus styles in the Dashboard, in list tables and in the Media Library/Add Themes/Add Plugins toolbars. Also fixes the media modal toolbars for IE 8.

[DrewAPicture]

After chatting with @iseulde about this a little bit, we've settled on punting this to future release for two specific reasons:

1. The patch is too broad. It touches a lot of different focus styles and is tough to follow what needs testing.

2. We need a lot of testing on a lot of devices. Each focus style exponentially increases the testing effort.

Best recommendation would be to handle the focus styles individually in separate patches and/or tickets.

[afercia]

@drew fine with punting :) just as a reminder, the selects in the media toolbar are still totally broken in IE 8 both in Media Library -> Grid mode and in the Add Media modal. Without the IE 8 fixes WordPress 4.2 will ship a really bad experience for IE 8 users, see screenshots:

Media Library grid mode:

Add Media modal:

[helen]

Replying to afercia:

just as a reminder, the selects in the media toolbar are still totally broken in IE 8 both in Media Library -> Grid mode and in the Add Media modal. Without the IE 8 fixes WordPress 4.2 will ship a really bad experience for IE 8 users

That's #30725.

[afercia]

Most of the issues here are now split in separate tickets with the exception of the Plugins filter links, see:

• #32284
• #32287
• #32288
• #32289
• #32291
• #32292
• #32294

[afercia]

Discussed a bit in the last accessibility meeting on Slack, we would like to close this ticket to clean up the accessibility tickets list. The only outstanding part is about the Plugins (and Themes) padding, see comment:8. I'd say it's a minor issue: the focus style there maybe is not so nice to see but it's functional. Feel free to reopen if I'm missing something.

[netweb]

With no commits on this ticket and issues moved to separate tickets per comment:19 I'm removing the milestone.