fix(VDialog): focus trap should ignore invisible and inert elements

[J-Sek]

• extends the selector for focusable elements with :not(:is([inert] *))
• verifies that elements are actually rendered

fixes #18400

TODO:

• verify collapsed <details>
• include [contenteditable]:not([contenteditable="false"]) for VEditor or any RichText editor
• (maybe) include audio[controls] and video[controls]

Markup:

<template>
  <v-app>
    <v-container>
      <v-row>
        <v-col>
          <v-dialog width="500">
            <template #activator="{ props }">
              <v-btn v-bind="props" text="Open Dialog" />
            </template>

            <template #default="{ isActive }">
              <v-card title="Dialog">
                <v-card-text>
                  Content goes here...

                  <!-- Problematic code -->
                  <v-text-field style="display: none" />
                  <v-text-field style="position: fixed" />
                  <v-text-field inert />
                  <!-- End problematic code -->
                </v-card-text>

                <v-card-actions>
                  <v-spacer />

                  <v-btn text="Close" @click="isActive.value = false" />
                  <v-btn text="Save" @click="isActive.value = false" />
                </v-card-actions>
                <v-text-field inert />
              </v-card>
            </template>
          </v-dialog>
        </v-col>

        <v-col>
          <v-btn text="Tabbable While Dialog Is Open" />
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</template>