title: element not getting focus in tests
body: <p>I am wanting to test that an element is getting focus in my vue component,</p>
  <pre><code>it('should trap focus on the modal when tab is pressed', async () =&gt; {
          wrapper = mountWith({ show: false });
          await wrapper.vm.handleOpen();
          await wrapper.trigger('keydown.tab');
          const element = wrapper.find('.c-dialog__close');
          console.log(document.activeElement);
  });
  </code></pre>
  <p>This is my test, when I log <code>document.activeElement</code> I would expect to see the <code>.c-dialog__close</code> element, but I am getting the body returned. The tab keydown triggers this method,</p>
  <pre><code>trapFocus() {
          const focusableElements = this.$el.querySelectorAll('a[href]:not([disabled]),button:not([disabled]),textarea:not([disabled]),input[type=&quot;text&quot;]:not([disabled]),input[type=&quot;radio&quot;]:not([disabled]),input[type=&quot;checkbox&quot;]:not([disabled]),select:not([disabled])');
          const firstFocusableElement = focusableElements[0];
          const lastFocusableElement = focusableElements[focusableElements.length - 1];
          const KEYCODE_TAB = 9;
  
          setTimeout(() =&gt; { firstFocusableElement.focus()}, 0);
  
          this.$el.addEventListener('keydown', (e) =&gt; {
              let isTabPressed = (e.key === 'Tab' || e.keyCode === KEYCODE_TAB);
  
              if(e.shiftKey) {
                  if(document.activeElement === firstFocusableElement) {
                      lastFocusableElement.focus();
                      e.preventDefault();
                  }
              } else {
                  if(document.activeElement === lastFocusableElement) {
                      firstFocusableElement.focus();
                      e.preventDefault();
                  }
              }
          });
      },
  </code></pre>
  <p>In the browser the <code>.c-dialog__close</code> element has focus just not in the test, is there a reason for this?</p>