WordPress.org

Make WordPress Core

Opened 3 weeks ago

Last modified 3 weeks ago

#50686 new defect (bug)

UI issue on nav-menus.php

Reported by: dilipbheda Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Menus Keywords: has-screenshots has-patch
Focuses: ui, accessibility, css, administration Cc:

Description

button border color issue, if users click on create menu button without enter the menu name.

STEP:
1) Go to Appearance -> Menus
2) Click on create menu button without enter the menu name.

I have attached an image for better understanding.

Attachments (6)

ui-issue.png (77.0 KB) - added by dilipbheda 3 weeks ago.
Before apply patch
after-apply-patch.png (46.5 KB) - added by dilipbheda 3 weeks ago.
After apply patch
50686.patch (450 bytes) - added by dilipbheda 3 weeks ago.
empty-custom-link-before-patch.jpg (14.2 KB) - added by sabernhardt 3 weeks ago.
Custom link inputs with error border, before patch
empty-custom-link-after-patch.jpg (13.9 KB) - added by sabernhardt 3 weeks ago.
Custom link inputs with error border, after patch
incorrect-datetime-post-classic-editor.jpg (20.5 KB) - added by sabernhardt 3 weeks ago.
the OK buttons for post and comment dates correctly do not have the red border when the date/time is invalid (with or without the patch)

Download all attachments as: .zip

Change History (7)

@dilipbheda
3 weeks ago

Before apply patch

@dilipbheda
3 weeks ago

After apply patch

@dilipbheda
3 weeks ago

@sabernhardt
3 weeks ago

Custom link inputs with error border, before patch

@sabernhardt
3 weeks ago

Custom link inputs with error border, after patch

@sabernhardt
3 weeks ago

the OK buttons for post and comment dates correctly do not have the red border when the date/time is invalid (with or without the patch)

#1 @sabernhardt
3 weeks ago

  • Focuses accessibility added
  • Version trunk deleted

@dilipbheda Thanks for the patch!

50686.patch successfully removes the extra red border from the "Create Menu" submit button when the menu name is empty. Likewise, that border is no longer on the "Add to Menu" button when a Custom Link's URL field is left empty. The date/time selection fields for posts and comments can also be inside the container with a form-invalid class, but the OK buttons are not within the container (so those do not need fixing).

However, the border is still on the Custom Link's "Link Text" input though the error only relates to the empty URL field. Technically, the selectors could have another :not() to make .form-invalid input:not(.button):not(#custom-menu-item-name), yet there probably is a better option.

I added the accessibility focus so the team could consider more substantial feedback for these errors, appearing in close proximity to the inputs. If that's outside the scope of this ticket, it could be considered on another.

I also noticed that the extra border occurred in a version earlier than trunk (5.4.2).

Note: See TracTickets for help on using tickets.