JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div id="site-wrapper">

<div id="sidebar-primary">
<button>test</button>

<ul>
  <li><a href="">
      dfsf
    </a></li>
  <li><a href="">
      fdsfs
    </a></li>
  <li><a href="">
      dsfs
    </a></li>
  <li><a href="">
      sdfsd
    </a></li>
  <li><a href="">
      sfdfsd
    </a></li>
</ul>
</div>
</div>

JavaScript

var page               = $( '#site-wrapper' );
var primarySidebar     = page.find( '#sidebar-primary' );

focusableSidebar      = primarySidebar.find( 'select, input, textarea, button, a' ).filter( ':visible' );
focusableSidebar      = primarySidebar.find( 'select, input, textarea, button, a' ).filter( ':visible' );
				firstFocusableSidebar = focusableSidebar.first();
				lastFocusableSidebar  = focusableSidebar.last();
        
lastFocusableSidebar.on( 'keydown', function ( e ) {
					if ( ( e.keyCode === 9 && !e.shiftKey ) ) {
						e.preventDefault();
						firstFocusableSidebar.focus(); // Set focus on first element - that's actually close menu button.	
					}
				});

				// Redirect first shift+tab to last input.
				firstFocusableSidebar.on( 'keydown', function ( e ) {
					if ( ( e.keyCode === 9 && e.shiftKey ) ) {
						e.preventDefault();
						lastFocusableSidebar.focus(); // Set focus on last element.
					}
				});