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

WordPress Trac noreply at wordpress.org
Sat Feb 24 16:02:46 UTC 2024


#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 yeykohoju):

 Initialization: The code wraps its functionality within the jQuery
 $(document).ready() function, ensuring that it executes only after the DOM
 has fully loaded.

 Event Listener: It attaches a keydown event listener to the document
 object, which means it will capture any key presses anywhere on the page.

 Modal Check: Within the event listener, it checks if a modal with the
 specified class is open. This ensures that the arrow key navigation
 functionality only applies when the modal is visible.

 Switch Statement: It uses a switch statement to handle different key
 presses. In this case, it specifically targets the left and right arrow
 keys (keyCode 37 and 39, respectively).

 Custom Functions: The code defines two custom functions,
 showPreviousItem() and showNextItem(), which are called when the
 corresponding arrow keys are pressed. These functions should contain the
 logic to display the previous or next item details within the modal.

 Logic Customization: You're instructed to customize the logic inside the
 showPreviousItem() and showNextItem() functions according to your
 application's requirements. This might involve manipulating the DOM to
 display different content within the modal or triggering other actions.

 Accessibility Considerations: The code snippet mentions considering
 accessibility considerations for users who navigate using assistive
 technologies. This implies ensuring that the arrow key navigation
 functionality is compatible with screen readers and other assistive
 devices.

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


More information about the wp-trac mailing list