WordPress.org

Make WordPress Core

#52408 closed defect (bug) (fixed)

Bug in keyboard navigation (tags metabox in post edit)

Reported by: jose64 Owned by: 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 10 months ago.
CSS fix
52408.1.patch (562 bytes) - added by sabernhardt 10 months ago.
adding transparent outline
classic-editor-tags-high-contrast-1.jpg (16.8 KB) - added by sabernhardt 10 months ago.
post editor tag selection in High Contrast mode 1
52408.2.patch (613 bytes) - added by sabernhardt 10 months 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.


10 months ago

#2 @alexstine
10 months 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
10 months ago

  • Keywords has-patch removed

#4 @almendron
10 months ago

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 "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

Last edited 10 months ago by almendron (previous) (diff)

#5 @alexstine
10 months 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
10 months 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
10 months 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
10 months 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
10 months ago

CSS fix

#9 @sabernhardt
10 months 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
10 months 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
10 months 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
10 months ago

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

@sabernhardt
10 months ago

adding transparent outline

@sabernhardt
10 months ago

post editor tag selection in High Contrast mode 1

#13 @sabernhardt
10 months 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.


10 months ago

@sabernhardt
10 months ago

added comment for High Contrast outline

#15 @sabernhardt
10 months 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.


10 months ago

#17 @joedolson
10 months 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.


10 months ago

#19 @SergeyBiryukov
10 months 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.