title: Focus on div without click in React to enable keyboard navigation on a module
body: <p>I am coding an image gallery from scratch in React, when clicking on an image, a modal pops up (separate component from my gallery component). I want to <strong>navigate between the pictures with left and right arrow</strong>, not just with the added arrows on the screen (onclick) but at the moment it only focuses on the modal when I click on it once, then I can navigate with the keyboard too (onKeyDown).</p>
  
  <p>I have added tabIndex="0" to my div, but I still need to click on the div once to focus on it.</p>
  
  <pre><code>&lt;div tabIndex="0" onKeyDown={(event) =&gt; this.onKeyNavigation(event, ImageUrl, currentIndex, ImageUrls)}&gt;
  </code></pre>
  
  <hr>
  
  <pre><code>onKeyNavigation = (event, ImageUrl, currentIndex, ImageUrls) =&gt; {
  
  if ((event.keyCode) === 39) {
      this.props.loadNext(ImageUrl, currentIndex, ImageUrls)
    }
    else if ((event.keyCode) === 37) {
      this.props.loadPrevious(ImageUrl, currentIndex, ImageUrls)
    }
    else if ((event.keyCode) === 27) {
      this.props.onClose()
    }
   }
  </code></pre>