title: How to focus on a specific element when a button is pressed
body: <p>I have an off-canvas-menu (<code>#mobile-menu</code>) that opens when a button/trigger (<code>.mobile-menu-toggle</code>) is clicked or pressed etc.</p>
  <p>The menu opens fine on keyboard press, but it does not focus within the menu, instead the focus is on the next element in the document flow - the menu actually comes before the &quot;trigger&quot; in the document.</p>
  <p>So I'm looking for a way to set the focus within the off-canvas-menu when it opens.</p>
  <p>I have tried many variations of this, but nothing happens, the focus is still going to the next element instead of what I've specified:</p>
  <pre><code>$(document).on(&quot;keyup&quot;,&quot;.mobile-menu-toggle&quot;,function(e) {
      if (e.which == 13) {
          $(&quot;#mobile-menu ul&quot;).focus();
      }
  });
  </code></pre>
  <p>And here's a simplified version of the html:</p>
  <pre><code> &lt;nav id=&quot;mobile-menu&quot; aria-label=&quot;Main Mobile Navigation&quot;&gt;
      &lt;div class=&quot;content&quot;&gt;
              
          &lt;a href=&quot;#&quot; aria-label=&quot;Mobile Homepage Link&quot;&gt;... LOGO IMG ...&lt;/a&gt;
  
          &lt;span class=&quot;heading&quot;&gt;Navigation&lt;/span&gt;
  
          &lt;ul class=&quot;page-navigation&quot;&gt;
              ... NAV LINKS ...
          &lt;/ul&gt;
  
      &lt;/div&gt;
   &lt;/nav&gt;
                      
  &lt;div id=&quot;mobile-nav-trigger&quot;&gt;
      &lt;button class=&quot;mobile-menu-toggle&quot; aria-label=&quot;Open Menu&quot;&gt;&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  <p>I've also found if I try to add tabindex anywhere within the mobile-menu, the trigger no longer opens it on keypress.</p>
  <p>How can I make it so that when the trigger opens the menu, the focus is inside of the #mobile-menu element?</p>