How to make v-menu keyboard accessible

Vuetify 5.10 and Vue 2.6.14.

I know the Vuetify documentation says:

By default, v-menu components are detached and moved to the root of your application. In order to properly support inserting dynamic content into the DOM, you must use the attach prop. This will ensure that focus transfers from the activator to the content when pressing the tab key.

But they don't provide any example and I tried it and I couldn't make it work so I ended up not using it and just having a method that shows and hides my dropdown on click(it works but It sounds possible with v-menu).

Here is what I tried, this is not keyboard accessible:

   <v-menu>
      <template v-slot:activator="{ on, attrs }"> -->
        <div v-bind="attrs" v-on="on" class="nearby-trigger">
          <toggle-button
            phrase="Location"
            standalone
            attach="#nearbyLocation"
          ></toggle-button>
        </div>
      </template>

      <v-card id="nearbyLocation">
        <v-container>
          <v-row>
            <v-col>
              <v-text-field hide-details placeholder="Area Code"></v-text-field>
            </v-col>
          </v-row>
        </v-container>
      </v-card>
    </v-menu>

Update: To give more explanation on the issue: The problem is that v-menu injects everything inside at the end of the DOM tree so let's say I have a header with my v-menu then main and then footer, well I can reach that menu via keyboard after the footer so I have to tab all the way through till after the footer. In conclusion, it appears in the right place but isn't in the right tab order(yes I've tried tabindex)

Thanks for any help!

Solution

Thanks to @dick.ey for helping me with this answer

The solution was to figure out attach. By default v-menu is attached at the root(https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VMenu/VMenu.ts)

You can attach v-menu to a specific place and that would be the parent of where v-menu is. Since I didn't want to disturb the order or css I opted to create a div parent container and I attached it to that.

<div id="searchMenu">
 <v-menu attach="#searchMenu">
      <template v-slot:activator="{ on, attrs }"> -->
        <div v-bind="attrs" v-on="on" class="nearby-trigger">
          <toggle-button
            phrase="Location"
            standalone
            attach="#nearbyLocation"
          ></toggle-button>
        </div>
      </template>

      <v-card id="nearbyLocation">
        <v-container>
          <v-row>
            <v-col>
              <v-text-field hide-details placeholder="Area Code"></v-text-field>
            </v-col>
          </v-row>
        </v-container>
      </v-card>
    </v-menu>
</div>

The div in that code will always exist while my card now gets added at the end of that div rather than the end of my root which would consist of a footer which is terrible for keyboard accessibility.