demo-tabbable-divs

demo using jquery to make divs tabbable and clickable

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container-fluid">
  <div class="row">
    <div class="col-12">
      <h2>Tab through and use keyboard input to click the "button" divs below</h2>
    </div>
  </div>
  <div class="row">
    <div class="col-6">
      <div class="btn btn-primary w-100" onclick="doClick(this)">Primary</div>  
    </div>
    <div class="col-6">
      <div class="btn btn-outline-primary w-100" onclick="doClick(this)">Outline Primary</div>  
    </div>
    <div class="col-6">
      <div class="btn btn-secondary w-100" onclick="doClick(this)">Secondary</div>  
    </div>
    <div class="col-6">
      <div class="btn btn-outline-secondary w-100" onclick="doClick(this)">Outline Secondary</div>  
    </div>
  </div>
  <div class="row">
    <div class="col-12">
      <div id="status"></div>
    </div>
  </div>
</div>

CSS

.btn {
  margin-bottom: 1rem;
  cursor: pointer;
}

JavaScript

function doClick(element) {
	divText = $(element).html();
  $('#status').html('You clicked on: ' + divText);
}

$(()=>{
  // make divs with an onclick attribute tabbable/clickable
  $('div[onclick]')
    .attr('tabindex', '0')                     // Add tab indexes
    .keypress((evt)=>{
    var key = evt.key;
    evt.preventDefault();                  // Ensure all default keypress
    // actions are not used
    if (key === ' ' || key === 'Enter') {  // Only send click events for Space
      // or Enter keys
      evt.currentTarget.click();         // Run the click event for element
    }
  });
  
  // activate the first clickable div
  $('div[onclick]')[0].focus();
});