slide container with webform accessible

Question

I am a bit new to the accessible topic and want to learn a bit more. I have build a small project where I have the information/articles, webforms in "drawers" on the left side. They are closed in the beginning and open when I hover or focus the drawer. (like the browser tabs, but on the left side of the container)

The tabbing is ok, i reach all elements, including the webform.

But then, when I tab to the webform element inside the drawer closes, of course - because I no longer focus the drawer it self.

Is there a way without javascript to hold it open while tabbing the webform inside the drawer?

.form {
  position: relative;
  padding: 30px 50px;
  margin-bottom: 10px;
  color: #aaa;
  background: rgba(25, 25, 25, 0.5);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-radius: 5px;
  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
  transition: 1250ms;
  transform: translateX(-517px);
  max-width: 100%;
}

.form:hover,
.form:focus,
.form:active {
  transform: none;
  z-index: 9999;
}

.article2 {
  border-color: #00b7ff;
}

<div class="article2 form" tabindex="5">
  <h3>Kontaktforms</h3>
  <form>
    <h2>Kontakta oss</h2>
    <label for="name">Namn</label>
    <input type="text" id="name" name="name" tabindex="6" required />

    <label for="email">E-postadress</label>
    <input type="email" id="email" name="email" tabindex="7" required />

    <label for="message">Meddelande</label>
    <textarea id="message" name="message" tabindex="8" required></textarea>

    <input type="submit" value="Skicka" />
  </form>
</div>

Answer 1

:focus-within seems to work. I tried your example and added :focus-within to the other focus states.

<style>
.form:hover,
.form:focus,
.form:focus-within,
.form:active {
  transform: none;
  z-index: 9999;
}
</style>

Also, as @RobinZigmond commented, don't use tabindex except on your <div>, and only use tabindex="0".

However, by making your <div> a focusable element, it will also need a role and a label (eg, aria-label). But that also means your <div> is an interactive element, which it really isn't. The only reason you have tabindex on your <div> is so you can specify a focus attribute in CSS. But with focus-within, you no longer need to have focus on your <div> so you can remove the tabindex from your <div> and you can remove the focus CSS attribute from your form.

The final code just changes focus to focus-within:

.form:hover,
.form:focus-within,
.form:active {
  transform: none;
  z-index: 9999;
}

And I removed tabindex from all the inputs and the div.

<div class="article2 form">
  <h3>Kontaktforms</h3>
  <form>
    <h2>Kontakta oss</h2>
    <label for="name">Namn</label>
    <input type="text" id="name" name="name" required />

    <label for="email">E-postadress</label>
    <input type="email" id="email" name="email" required />

    <label for="message">Meddelande</label>
    <textarea id="message" name="message" required></textarea>

    <input type="submit" value="Skicka" />
  </form>
</div>

And one final accessibility comment. Your <div> has a medium gray background and your input labels are light gray. That makes for a 1.4:1 contrast ratio which is below the 4.5:1 minimum for accessibility.