Make WordPress Core

Opened 10 months ago

Last modified 5 weeks ago

#63161 accepted defect (bug)

Unable to Navigate Autocomplete Suggestions via Keyboard in Theme & Plugin File Editor

Reported by: akshayrochaniwp's profile akshayrochaniwp Owned by: joedolson's profile joedolson
Milestone: 7.0 Priority: normal
Severity: normal Version: 4.9
Component: General Keywords: has-patch
Focuses: accessibility Cc:

Description

This issue affects the built-in Theme and Plugin File Editor within the WordPress admin area.

When editing a file inside the editor, keyword suggestions appear as we type. However, there is a problem specifically with .php files:

  • When typing in a .php file, the autocomplete suggestion list appears.
  • Attempting to navigate the suggestions using the up/down arrow keys does not work as expected.
  • The selection remains stuck on the first suggested item, making it impossible to move through the list via keyboard input.
  • However, when selecting suggestions using the mouse cursor, they work as expected.

Here’s a screen recording demonstrating the issue : (https://www.awesomescreenshot.com/video/37998611?key=262d499496bfcc778da2e6975eaaf248)

This issue is only present in .php files. Other file types such as .css, .js, and .html work correctly and allow navigation via keyboard input.

Steps to Reproduce:

  1. Open the WordPress Theme or Plugin File Editor.
  2. Edit a .php file and start typing a function or keyword that triggers the autocomplete suggestion list.
  3. Try navigating the suggestion list using the up/down arrow keys.
  4. Notice that the selection remains stuck on the first item and does not move.
  5. Now, try selecting a suggestion with the mouse cursor—it works fine.

Expected Behavior:

  • The up/down arrow keys should allow smooth navigation through the autocomplete suggestions, just like they do for .css, .js, and .html files.

Actual Behavior:

  • Keyboard navigation is broken for .php files, preventing users from selecting suggestions efficiently.

Environment Details:

  • WordPress Version: 6.7.2
  • Browser: Chrome, Firefox
  • Theme & Plugins: Tested with default theme Twenty Twenty-One and no plugin active.

Would appreciate further insights or confirmation from the Core team on this. Thank you!

Change History (12)

This ticket was mentioned in PR #8598 on WordPress/wordpress-develop by @vrishabhsk.


10 months ago
#1

  • Keywords has-patch added

Fixed autocomplete dropdown navigation for PHP files :

  • Intercepting Up/Down arrow keys
  • Manually handling hint selection to prevent the cursor resetting to the first item when navigating through suggestions.

Trac ticket: https://core.trac.wordpress.org/ticket/63161

#2 @vrishabhsk
10 months ago

Hi @akshayrochaniwp 👋🏽

Let me know your thoughts on this. Thanks

akshay-r-eq commented on PR #8598:


10 months ago
#4

Hello @Vrishabhsk

Thanks for providing the fix and the WP Playground instance!
I have tested it, and it successfully resolves the issue. Looks good to me! 👍

akshay-r-eq commented on PR #8598:


10 months ago
#5

Hello @Vrishabhsk

Thanks for providing the fix and the WP Playground instance!
I have tested it, and it successfully resolves the issue. Looks good to me! 👍

akshay-r-eq commented on PR #8598:


10 months ago
#6

Hello @Vrishabhsk

Please ignore the previous message, that was added from the wrong GitHub account.

Thanks for providing the fix and the WP Playground instance!
I have tested it, and it successfully resolves the issue. Looks good to me! 👍

akshay-r-eq commented on PR #8598:


10 months ago
#7

Hello @Vrishabhsk

Please ignore the previous message, that was added from the wrong GitHub account.

Thanks for providing the fix and the WP Playground instance!
I have tested it, and it successfully resolves the issue. Looks good to me! 👍

@akshayrochaniwp commented on PR #8598:


10 months ago
#8

Hello @Vrishabhsk

Please ignore the previous message, that was added from the wrong GitHub account.

Thanks for providing the fix and the WP Playground instance!
I have tested it, and it successfully resolves the issue. Looks good to me! 👍

#9 @joedolson
2 months ago

  • Focuses accessibility added

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


2 months ago

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


5 weeks ago

#12 @joedolson
5 weeks ago

  • Milestone changed from Awaiting Review to 7.0
  • Owner set to joedolson
  • Status changed from new to accepted
  • Version set to 4.9

Milestoning for 7.0. I'm setting the version as 4.9, which is when CodeMirror was introduced, although in fact this could have been introduced at some intermediary stage.

Note: See TracTickets for help on using tickets.