Make WordPress Core

Opened 4 years ago

Closed 4 years ago

#52408 closed defect (bug) (fixed)

Bug in keyboard navigation (tags metabox in post edit)

Reported by: jose64's profile jose64 Owned by: sabernhardt's profile sabernhardt
Milestone: 5.7 Priority: normal
Severity: normal Version: 5.6
Component: Taxonomy Keywords: has-patch commit
Focuses: ui, accessibility, css, administration Cc:

Description

Possible bug in tags metabox navigation with keyboard, accesibility issue.

To replicate it:

  • Use the classic editor or Gutenberg. it does not matter.
  • Go to the "Tags" metabox and write the first two or three letters of one of the tags you have.
  • All those that match those entered letters will appear below.
  • Try to go down with the keyboard arrows to select one of them. Keyboard navigation is unable

Attachments (4)

52408.patch (443 bytes) - added by sabernhardt 4 years ago.
CSS fix
52408.1.patch (562 bytes) - added by sabernhardt 4 years ago.
adding transparent outline
classic-editor-tags-high-contrast-1.jpg (16.8 KB) - added by sabernhardt 4 years ago.
post editor tag selection in High Contrast mode 1
52408.2.patch (613 bytes) - added by sabernhardt 4 years ago.
added comment for High Contrast outline

Download all attachments as: .zip

Change History (23)

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


4 years ago

#2 @alexstine
4 years ago

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

This seems to work fine in both Classic Editor and Gutenberg.

Tested using Windows 7 and NV Access.

  1. Navigate to Tags metabox.
  2. Start typing in the tags edit field.
  3. Screen reader announces number of results and navigate using the up/down arrows.
  4. Pressing Enter successfully inserts the tag.

Adding needs-testing. Maybe this issue can only be replicated with keyboard without screen reader.

Thanks.

#3 @alexstine
4 years ago

  • Keywords has-patch removed

#4 @almendron
4 years ago

Tested using Windows 10, WordPress 5.6.1, PHP 7.4.14 = BUG

To replicate it:

1) Use the classic editor or Gutenberg. it does not matter.
2) Go to the "Tags" metabox and write the first two or three letters of one of the tags you have.
3) All those that match those entered letters will appear below.
4) Try to go down with the keyboard arrows to select one of them. Keyboard navigation is unable

Version 0, edited 4 years ago by almendron (next)

#5 @alexstine
4 years ago

  • Keywords needs-patch added

Thanks for reporting @jose64 and confirming @almendron.

Since I am unable to reproduce the bug, hopefully this will get picked up by another contributor who can test and find a solution.

Thanks.

#6 @almendron
4 years ago

  • Keywords needs-testing removed

Tested using Windows 10, WordPress 5.6.1, PHP 7.4.14 = BUG

To replicate it:

1) Use the classic editor.
2) Go to the "Custom Taxonomies" metabox and write the first two or three letters of one of the tags you have.
3) All those that match those entered letters will appear below.
4) Try to go down with the keyboard arrows to select one of them. Keyboard navigation is unable

#7 @almendron
4 years ago

Tested using Windows 10, WordPress 5.6.1, PHP 7.4.14 = BUG

To replicate it:

1) Post > All Posts

2) Select post > Quick Edit

3) Go to the "Tags" metabox and write the first two or three letters of one of the tags you have.

4) All those that match those entered letters will appear below.

5) Try to go down with the keyboard arrows to select one of them. Keyboard navigation is unable

#8 @almendron
4 years ago

  • Focuses administration added

WordPress 5.6.1, PHP 7.4.14

After several tests, I have discovered the following:

The keyboard works fine. The problem is in focus. It does not change color when you scroll with the keyboard arrows.

@sabernhardt
4 years ago

CSS fix

#9 @sabernhardt
4 years ago

  • Component changed from Options, Meta APIs to Taxonomy
  • Focuses javascript css added
  • Keywords has-patch needs-testing added; needs-patch removed
  • Milestone changed from Awaiting Review to 5.7
  • Owner set to sabernhardt
  • Status changed from new to assigned

In WordPress 5.5, the tag list options had a negative tabindex and the focused option had a ui-state-focus class that no longer applies. In 5.6 and 5.7 beta, the focused item continues to have aria-selected="true", though.

52408.patch simply applies the same ui-state-focus styles to the aria-selected attribute so the selection is indicated visually.

The Block editor's tag autocomplete is different, and I did not have any trouble there.

To test the patch, please check both the Classic editor post tags the Quick Edit tag selection (steps are in comment:6 and comment:7).

#10 @almendron
4 years ago

Valid solution but the file "forms.min.css" does not regenerate itself.

I have modified this file manually and it does not work.

The patch only works if we add "define ('SCRIPT_DEBUG', true);" in the wp-config.php file.

#11 @almendron
4 years ago

Provisional solution

Add to theme "functions.php" file or personal plugin

function admin_styles() {
    echo '<style>
		.wp-tags-autocomplete [aria-selected="true"] {
			background-color: #2271b1;
			color: #fff;
		}
    </style>';
}
add_action('admin_head', 'admin_styles');

#12 @joedolson
4 years ago

This works in normal view; it needs outline: 1px solid transparent; to support High Contrast modes.

@sabernhardt
4 years ago

adding transparent outline

@sabernhardt
4 years ago

post editor tag selection in High Contrast mode 1

#13 @sabernhardt
4 years ago

Thanks @joedolson for checking High Contrast!

I increased the outline width to 2 pixels to make a clear difference.

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


4 years ago

@sabernhardt
4 years ago

added comment for High Contrast outline

#15 @sabernhardt
4 years ago

52408.2.patch includes a comment for the High Contrast mode outline, as recommended by @ryokuhi

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


4 years ago

#17 @joedolson
4 years ago

  • Focuses javascript removed
  • Keywords commit added; needs-testing removed

This works well, and accomplishes the needs. It's a simple change, and should go into 5.7.

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


4 years ago

#19 @SergeyBiryukov
4 years ago

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

In 50363:

Accessibility: Taxonomy: Correct keyboard navigation for the Tags meta box in classic editor.

Props sabernhardt, almendron, jose64, alexstine, joedolson, ryokuhi.
Fixes #52408.

Note: See TracTickets for help on using tickets.