[wp-trac] [WordPress Trac] #40223: Allow arrow key navigation in (all?) modals

[WordPress Trac]

#40223: Allow arrow key navigation in (all?) modals
-----------------------------+---------------------------------
 Reporter:  marsjaninzmarsa  |       Owner:  (none)
     Type:  enhancement      |      Status:  new
 Priority:  normal           |   Milestone:  Awaiting Review
Component:  Administration   |     Version:  4.8
 Severity:  normal           |  Resolution:
 Keywords:                   |     Focuses:  ui, administration
-----------------------------+---------------------------------

Comment (by nickjohnsonuk):

 Implementing arrow key navigation for details of plugins, themes, etc.,
 inside modals on install, update, and list screens typically involves
 JavaScript for handling the key events and updating the DOM accordingly.
 Below is an example of how you might approach this using JavaScript and
 jQuery:

 javascript

 jQuery(document).ready(function($) {
     // Add event listener for keydown event on the document
     $(document).on('keydown', function(e) {
         // Check if the modal is open and the arrow keys are pressed
         if ($('.your-modal-class').hasClass('open')) {
             switch(e.which) {
                 case 37: // Left arrow key
                     // Handle left arrow key press (e.g., show previous
 item)
                     break;
                 case 39: // Right arrow key
                     // Handle right arrow key press (e.g., show next item)
                     break;
                 // Add more cases for other arrow keys or custom
 functionality
             }
         }
     });
 });


 In this example, replace `.your-modal-class` with the actual class or
 identifier of your modal. You would need to customize the logic inside the
 switch statement to perform the desired actions when arrow keys are
 pressed (e.g., navigating through details).

 Please note that this is a basic example, and you may need to adapt it to
 fit the specific structure and functionality of your application.
 Additionally, ensure that you are using the appropriate JavaScript
 framework or library in your project, and consider accessibility
 considerations for users who may navigate using assistive technologies.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/40223#comment:2>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform