[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 jizzazavi):

 To achieve this functionality, you can use JavaScript to capture arrow key
 events and update the modal content accordingly. Here's a breakdown of how
 you can approach this implementation:

 Identify Modal Elements: First, you need to identify the modal elements in
 your HTML structure. This could be done using classes, IDs, or other
 attributes.

 Event Handling: Use JavaScript to add event listeners for the keydown
 event on the document or specific modal elements.

 Handle Arrow Key Events: When an arrow key event is detected, determine
 the direction (left or right) and update the content of the modal
 accordingly.

 Update Modal Content: Implement logic to show the previous or next item
 details based on the arrow key pressed.

 Consider Accessibility: Ensure that your implementation is accessible and
 considerate of users who may navigate using assistive technologies.

 Here's a basic example of how you could implement this functionality:

 {{{#!php
 <?php
 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')) {
             // Handle left and right arrow key presses
             switch(e.which) {
                 case 37: // Left arrow key
                     showPreviousItem();
                     break;
                 case 39: // Right arrow key
                     showNextItem();
                     break;
             }
         }
     });

     // Function to handle showing the previous item
     function showPreviousItem() {
         // Add your logic here for displaying the previous item details
         console.log('Showing previous item details');
     }

     // Function to handle showing the next item
     function showNextItem() {
         // Add your logic here for displaying the next item details
         console.log('Showing next item details');
     }
 });

 }}}

 Replace '.your-modal-class' with the actual class or identifier of your
 modal. Inside the showPreviousItem() and showNextItem() functions, you can
 implement the logic to navigate through the details of plugins, themes,
 etc., based on the arrow key pressed.

 Remember to customize the logic according to your specific requirements
 and ensure compatibility with your application's structure and
 functionality. Additionally, consider testing the implementation
 thoroughly to ensure a smooth user experience.

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