WordPress.org

Make WordPress Core

Opened 4 weeks ago

Closed 11 days ago

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


3 weeks ago

#2 @alexstine
3 weeks 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
3 weeks ago

  • Keywords has-patch removed

#4 @almendron
3 weeks 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 3 weeks ago by almendron (previous) (diff)

#5 @alexstine
3 weeks 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
3 weeks 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
3 weeks 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
3 weeks 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
3 weeks ago

CSS fix

#9 @sabernhardt
3 weeks 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
3 weeks 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
3 weeks 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
3 weeks ago

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

@sabernhardt
3 weeks ago

adding transparent outline

@sabernhardt
3 weeks ago

post editor tag selection in High Contrast mode 1

#13 @sabernhardt
3 weeks 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.


2 weeks ago

@sabernhardt
2 weeks ago

added comment for High Contrast outline

#15 @sabernhardt
2 weeks 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.


11 days ago

#17 @joedolson
11 days 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.


11 days ago

#19 @SergeyBiryukov
11 days 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.