WordPress.org

Make WordPress Core

Opened 14 months ago

Closed 6 months ago

Last modified 6 months ago

#45094 closed defect (bug) (fixed)

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

Reported by: vrimill Owned by: afercia
Milestone: 5.2.2 Priority: normal
Severity: normal Version:
Component: Administration Keywords: has-patch
Focuses: ui, accessibility Cc:
PR Number:

Description

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'

Attachments (5)

45094.diff (2.6 KB) - added by afercia 7 months ago.
45094.2.diff (2.5 KB) - added by afercia 6 months ago.
01 float.png (127.1 KB) - added by afercia 6 months ago.
02 float.png (280.0 KB) - added by afercia 6 months ago.
45094.3.diff (563 bytes) - added by afercia 6 months ago.

Download all attachments as: .zip

Change History (38)

#1 @mukesh27
14 months ago

  • Focuses accessibility added
  • Keywords needs-screenshots dev-feedback added

#2 @SergeyBiryukov
14 months ago

  • Component changed from General to Administration

#3 @SergeyBiryukov
14 months ago

  • Focuses ui added

#4 @afercia
14 months ago

  • Keywords dev-feedback removed
  • Milestone changed from Awaiting Review to Future Release

@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.

#5 @afercia
7 months ago

  • Keywords needs-patch added
  • Milestone changed from Future Release to 5.3

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
7 months ago

#6 @afercia
7 months ago

  • Keywords has-patch added; needs-screenshots needs-patch removed

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.

This ticket was mentioned in Slack in #core by marybaum. View the logs.


6 months ago

#8 @marybaum
6 months ago

  • Keywords commit added
  • Milestone 5.3 deleted
  • Resolution set to invalid
  • Status changed from new to closed

#9 @marybaum
6 months ago

  • Milestone set to 5.2.2

#10 @afercia
6 months ago

  • Keywords commit removed
  • Resolution invalid deleted
  • Status changed from closed to reopened

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.

#11 @afercia
6 months ago

  • Owner set to afercia
  • Status changed from reopened to assigned

#12 @mukesh27
6 months ago

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

@afercia
6 months ago

#13 @afercia
6 months ago

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

#14 @afercia
6 months ago

  • Resolution set to fixed
  • Status changed from assigned to closed

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.

#15 @afercia
6 months ago

  • Keywords fixed-major added
  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopening for 5.2.2 consideration.

#16 @audrasjb
6 months ago

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.

This ticket was mentioned in Slack in #core-committers by afercia. View the logs.


6 months ago

#18 @afercia
6 months ago

  • Resolution set to fixed
  • Status changed from reopened to closed

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.

#19 @afercia
6 months ago

  • Keywords fixed-major removed

#20 @afercia
6 months ago

  • Keywords needs-patch added; has-patch removed
  • Resolution fixed deleted
  • Status changed from closed to reopened

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
6 months ago

@afercia
6 months ago

This ticket was mentioned in Slack in #core by afercia. View the logs.


6 months ago

@afercia
6 months ago

#22 @afercia
6 months ago

  • Keywords has-patch added; needs-patch removed

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

#23 @mukesh27
6 months ago

@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.

Last edited 6 months ago by mukesh27 (previous) (diff)

This ticket was mentioned in Slack in #core by audrasjb. View the logs.


6 months ago

#25 @audrasjb
6 months ago

  • Keywords commit added

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 :-)

#26 @afercia
6 months ago

@mukesh27 @audrasjb thanks for testing! Commit incoming.

#27 @afercia
6 months ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 45520:

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

Fixes #45094.

#28 @afercia
6 months ago

  • Keywords fixed-major added; commit removed
  • Resolution fixed deleted
  • Status changed from closed to reopened

#29 @afercia
6 months ago

Reopening for 5.2.2.

#30 @afercia
6 months ago

  • Resolution set to fixed
  • Status changed from reopened to closed

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.

#31 @afercia
6 months ago

  • Keywords fixed-major removed

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


6 months ago

#33 @mukesh27
6 months ago

Thanks for the commit @afercia

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

Note: See TracTickets for help on using tickets.