Dashboard elements don't always have clear focus states, tab order

[vrimill]

Environment Details:
​https://devblogs.microsoft.com/visualstudio
​
Examples:

1. When 'Yoast SEO Posts review' panel is in collapsed state, Focus is not visible on Quick draft panel while tabbing unless page is scrolled up
2. Focus is not visible on "Customize your site" button
3. Focus is not visible clearly on the icons & links under WP Engine panel
4. Focus is going to 'Help menu->Screen Options' instead of going like 'Screen options->Help Menu'

[afercia]

@vrimill thanks! Going through the points:

When 'Yoast SEO Posts review' panel is in collapsed state, Focus is not visible on Quick draft panel while tabbing unless page is scrolled up

I'm not sure I fully understand, when you have a chance please provide steps to reproduce the issue.

Focus is not visible on "Customize your site" button

Right, thanks! Seems this was missed with the changes made in [34948] and applies to the buttons with the .button-hero CSS class.

Focus is not visible clearly on the icons & links under WP Engine panel

I'm afraid WordPress is not responsible for markup and CSS used by plugins.

Focus is going to 'Help menu->Screen Options' instead of going like 'Screen options->Help Menu'

Correct, this is a known, pending issue.

[afercia]

At least two things should be fixed for this ticket. They seem simple and self-contained enough and I'd like to propose them for the next 5.3 release:

• focus indication for the .button-hero CSS class
• position of the Help / Screen Options buttons

[afercia]

45094.diff​ does two things:

• restores the focus style on the "Customize Your Site" primary-hero button in the admin Dashboard (missed in [34948])
• changes the order in the source of the Screen Options and Help buttons so that visual and DOM orders match

Note that with the second change, "Screen Options" (when present) is the first button in the source. Personally, I'm fine with that but I'd like to hear the accessibility team thoughts.

There are no visual changes other than the restored focus style.

[afercia]

I'm guessing closing the ticket wasn't intentional :)

Before commit, see previous comment:

Personally, I'm fine with that but I'd like to hear the accessibility team thoughts.

[mukesh27]

Patch 45094.diff testing in WordPress version 5.3-alpha-45499 and working fine for me and focus and tab order issue.

[afercia]

45094.2.diff​ refreshes the patch after recent line number changes.

[afercia]

In 45503:

Accessibility: Improve the Screen Options and Help buttons order.

• makes the buttons visual order match the DOM order
• also, restores the focus style on the "hero" primary button after [34948]

Props vrimill, mukesh27 for reporting and testing.
Fixes #45094.

[afercia]

Reopening for 5.2.2 consideration.

[audrasjb]

Hi @afercia do you think we can have a backport for this ticket today so we can ship that on 5.2.2 RC1?
Thank you! The RC processing is going to start at 19:00 UTC.

[afercia]

In 45509:

Accessibility: Improve the Screen Options and Help buttons order.

• makes the buttons visual order match the DOM order
• also, restores the focus style on the "hero" primary button after [34948]

Props vrimill, mukesh27 for reporting and testing.
Merges [45503] to the 5.2 branch.
Fixes #45094 for 5.2.2.

[afercia]

The change in [45509], in combination with previous changes in [44588] and [44604] which made the Screen Options and Help tabs available on small screens, is breaking the layout in the responsive view on smaller screens.

See a couple of screenshot attached below: before (left) and after (right). Notice in the media library this also impacts the attachments grid. I think it's just a matter of clearing a float, and happens only in the responsive view. Patch incoming.

[afercia]

45094.3.diff​ clears the new float, only in the responsive view. Looks good to me, some testing would be nice :)

[mukesh27]

@afercia patch 45094.3.diff is tested in Ubuntu 18.04.2 LTS with Google Chrome Version 74.0.3729.157 and Firefox Version 65.0.1 and it is working fine for me.

[audrasjb]

Hi @afercia
I also tested 45094.3.diff and everythin looks green on my side. Thanks for the patch! That would be great to ship it on 5.2.2 RC2 coming tomorrow :-)

[afercia]

@mukesh27 @audrasjb thanks for testing! Commit incoming.

[afercia]

In 45520:

Administration: Fix the responsive layout after changes to the Screen Options and Help buttons position.

Fixes #45094.

[afercia]

Reopening for 5.2.2.

[afercia]

In 45521:

Administration: Fix the responsive layout after changes to the Screen Options and Help buttons position.

Merges [45520] to the 5.2 branch.
Fixes #45094 for 5.2.2.

[mukesh27]

Thanks for the commit @afercia

After commit there is one issue generated in core. New ticket - #47561