A11y issue - focus should move to the onboarding card when start() is called about v-onboarding HOT 4 CLOSED

on: {
      beforeStep: () => onBeforeStep(),
      afterStep: () => onAfterStep(),
    },

const onBeforeStep = () => {
  document.addEventListener('keydown', keydownHandler);
};

const onAfterStep = () => {
  document.removeEventListener('keydown', keydownHandler);
};

const keydownHandler = (event: KeyboardEvent) => {
  if (event.key === 'Tab') {
    /*  If you hit tab, the close button will be focused instead of the primary. This is bc the keydown event is
     *  processed first (primary btn is focused), then the browser normally handles the tab press, thus ending on
     *  the close button. */
    const primaryBtn = document.querySelector('button.v-onboarding-btn-primary');
    // @ts-ignore this is ok, focus on primary button if it exists
    primaryBtn?.focus();
    document.removeEventListener('keydown', keydownHandler);
  }
};

<FocusLoop>
   <VOnboardingWrapper ref="wrapper" :steps="steps" :options="options" />
 </FocusLoop>

.v-onboarding-item {

  button:focus {
    outline-color: black;
  }
}