Make WordPress Core

Opened 6 years ago

Closed 5 years ago

Last modified 5 years ago

#45094 closed defect (bug) (fixed)

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

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

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 6 years ago.
45094.2.diff (2.5 KB) - added by afercia 5 years ago.
01 float.png (127.1 KB) - added by afercia 5 years ago.
02 float.png (280.0 KB) - added by afercia 5 years ago.
45094.3.diff (563 bytes) - added by afercia 5 years ago.

Download all attachments as: .zip

Change History (38)

#1 @mukesh27
6 years ago

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

#2 @SergeyBiryukov
6 years ago

  • Component changed from General to Administration

#3 @SergeyBiryukov
6 years ago

  • Focuses ui added

#4 @afercia
6 years 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
6 years 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
6 years ago

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

#8 @marybaum
6 years ago

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

#9 @marybaum
6 years ago

  • Milestone set to 5.2.2

#10 @afercia
6 years 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 years ago

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

#12 @mukesh27
5 years ago

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

@afercia
5 years ago

#13 @afercia
5 years ago

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

#14 @afercia
5 years 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
5 years ago

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

Reopening for 5.2.2 consideration.

#16 @audrasjb
5 years 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.


5 years ago

#18 @afercia
5 years 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
5 years ago

  • Keywords fixed-major removed

#20 @afercia
5 years 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
5 years ago

@afercia
5 years ago

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


5 years ago

@afercia
5 years ago

#22 @afercia
5 years 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
5 years 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 5 years ago by mukesh27 (previous) (diff)

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


5 years ago

#25 @audrasjb
5 years 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
5 years ago

@mukesh27 @audrasjb thanks for testing! Commit incoming.

#27 @afercia
5 years 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
5 years ago

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

#29 @afercia
5 years ago

Reopening for 5.2.2.

#30 @afercia
5 years 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
5 years ago

  • Keywords fixed-major removed

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


5 years ago

#33 @mukesh27
5 years 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.