Opened 4 years ago
Closed 4 years ago
#52408 closed defect (bug) (fixed)
Bug in keyboard navigation (tags metabox in post edit)
Reported by: |
|
Owned by: |
|
---|---|---|---|
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)
Change History (23)
This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.
4 years ago
#4
@
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
#5
@
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
@
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
@
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
@
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.
#9
@
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
@
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
@
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
@
4 years ago
This works in normal view; it needs outline: 1px solid transparent;
to support High Contrast modes.
#13
@
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
#15
@
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
@
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 seems to work fine in both Classic Editor and Gutenberg.
Tested using Windows 7 and NV Access.
Adding needs-testing. Maybe this issue can only be replicated with keyboard without screen reader.
Thanks.