WordPress.org
Get WordPress

Make WordPress Core

Opened 5 years ago

Closed 5 years ago

#47603 closed defect (bug) (fixed)

My account toggle on admin bar not visible at high zoom levels

Reported by: isabel_brison's profile isabel_brison Owned by: isabel_brison's profile isabel_brison
Milestone: 5.2.3 Priority: normal
Severity: normal Version:
Component: Toolbar Keywords: has-patch needs-testing fixed-major
Focuses: ui, accessibility, administration Cc:

Description (last modified by SergeyBiryukov)

On a 1040px wide screen, at 400% magnification, the "my account" menu toggle on the right hand side of the admin bar is not visible. This happens because the admin bar has a minimum width of 300px set, and the document body has a minimum width of 240px as well as overflow-x: hidden.

This is an accessibility problem, related to ​https://github.com/WordPress/gutenberg/issues/15346.
It may also be related to #47477

To fix: minimum widths should be removed and overflow unset.

Attachments (3)

47603.diff​ (666 bytes) - added by chetan200891 5 years ago.
Created initial patch.
Annotation on 2019-5-2.png​ (19.5 KB) - added by SergeyBiryukov 5 years ago.
47603.without-min-width.png​ (46.6 KB) - added by SergeyBiryukov 5 years ago.

Download all attachments as: .zip

Change History (12)

@chetan200891
5 years ago

Created initial patch.

#1 follow-up: @chetan200891
5 years ago

  • Keywords has-patch added

@isabel_brison Welcome to Trac!

Thanks for your ticket.I have created initial patch 47603.diff and attached with this ticket.

@SergeyBiryukov
5 years ago

#2 @SergeyBiryukov
5 years ago

  • Component changed from Administration to Toolbar
  • Description modified (diff)

#3 in reply to: ↑ 1 @isabel_brison
5 years ago

Replying to chetan200891:

@isabel_brison Welcome to Trac!

Thanks for your ticket.I have created initial patch 47603.diff and attached with this ticket.

Thank you!
Is it possible to remove the min-widths on body and #wpadminbar altogether?

Version 0, edited 5 years ago by isabel_brison (next)

This ticket was mentioned in ​Slack in #accessibility by afercia. ​View the logs.
5 years ago

#5 @afercia
5 years ago

  • Milestone changed from Awaiting Review to 5.3
  • Owner set to isabel_brison
  • Status changed from new to assigned
  • Version trunk deleted

Discussed during today's accessibility bug-scrub and agreed to move this ticket to 5.3 consideration, as it has a patch. Adding @isabel_brison as owner 👋

@SergeyBiryukov
5 years ago

#6 @SergeyBiryukov
5 years ago

In my testing, setting the same min-width for body and #wpadminbar seems to be enough to fix the issue as reported.

I'm a bit cautious to remove the min-width altogether, as that just introduces more issues on smaller screens, 47603.without-min-width.png​ is one example.

I'm also a bit cautious to remove the overflow-x: hidden, as that appears to introduce a horizontal scroll at higher zoom levels.

Let's make the min-width value consistent as a first step, and then iterate further as needed.

#7 @SergeyBiryukov
5 years ago

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

In 45684:

Accessibility: Toolbar: Make the min-width value for #wpadminbar at 782px breakpoint consistent with that of <body>.

This ensures that the "My Account" toolbar item stays visible at high zoom levels.

Props isabel_brison, chetan200891.
Fixes #47603.

#8 @JeffPaul
5 years ago

  • Keywords needs-testing fixed-major added
  • Milestone changed from 5.3 to 5.2.3
  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopening this so it can be back-ported to the 5.2 branch, also needs testing to validate if this ticket is good to land in 5.2.3.

#9 @SergeyBiryukov
5 years ago

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

In 45842:

Accessibility: Toolbar: Make the min-width value for #wpadminbar at 782px breakpoint consistent with that of <body>.

This ensures that the "My Account" toolbar item stays visible at high zoom levels.

Props isabel_brison, chetan200891.
Merges [45684] to the 5.2 branch.
Fixes #47603.

Note: See TracTickets for help on using tickets.