WordPress.org
Get WordPress

Make WordPress Core

Opened 5 years ago

Last modified 4 years ago

#50696 new defect (bug)

UI issue in customizer menus section

Reported by: dilipbheda's profile dilipbheda Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version: 5.5
Component: Customize Keywords: has-screenshots needs-patch needs-design
Focuses: ui, accessibility, css, administration Cc:

Description

I have found 2 issues in customizer menu section

1) Input box-shadow issue if the input is invalid.

2) Add button properly not display

I have attached an image for better understanding.

Attachments (6)

before-apply-patch.png​ (141.1 KB) - added by dilipbheda 5 years ago.
Before apply patch
after-patch-apply.png​ (141.4 KB) - added by dilipbheda 5 years ago.
After apply patch
50696.patch​ (1.0 KB) - added by dilipbheda 5 years ago.
50696.2.patch​ (1.4 KB) - added by dilipbheda 5 years ago.
Updated patch
create-menu-item-before.png​ (148.4 KB) - added by dilipbheda 5 years ago.
create-menu-item-after.png​ (148.9 KB) - added by dilipbheda 5 years ago.

Download all attachments as: .zip

Change History (9)

@dilipbheda
5 years ago

Before apply patch

@dilipbheda
5 years ago

After apply patch

@dilipbheda
5 years ago

@dilipbheda
5 years ago

Updated patch

@dilipbheda
5 years ago

@dilipbheda
5 years ago

#1 @dlh
5 years ago

  • Keywords reporter-feedback added

Hi @dilipbheda,

What browser was used to generate these screenshots? Can you explain more what the box-shadow issue is?

#2 @dilipbheda
5 years ago

  • Keywords reporter-feedback removed

Hello @dlh

System info:

Server architecture: Linux 4.15.0-88-generic x86_64
Web server: Apache/2.4.29 (Ubuntu)
PHP version: 7.4.8 (Supports 64bit values)
Browser: Google Chrome ( Version 84.0.4147.89 (Official Build) (64-bit) )

Box shadow issue

  • Red box-shadow proper not displaying if the field is invalid and focus on input.

Go to - customize -> Homepage Settings -> Click on Add New Page

#3 @celloexpressions
4 years ago

  • Focuses accessibility added
  • Keywords needs-patch needs-design added; has-patch removed
  • Milestone changed from Awaiting Review to Future Release

I cannot reproduce the add button alignment issue. I can confirm the box-shadow issue, although the exact display is variable depending on the browser. The issue is that the "invalid" styling (border: 1px solid #d63638;) conflicts with the focus styling (blue box-shadow).

We need to maintain a visually distinct focus style even when the field is invalid. 50696.2.patch​ won't create enough of a distinction for this focus style. I would suggest using a different style for the invalid state, perhaps with a user notification for improved accessibility.

Can the design or accessibility teams weigh in on a preferred pattern for this?

Note: See TracTickets for help on using tickets.