Exposing elements for better accessibility

[marius-mcfly]

Description

Hello there,

in @nuxt/ui v2 it was possible to access the buttons from inside Tabs or the input from SelectMenu via template refs to focus explicit elements.
Is it possible to get that feature back especially for accessibility reasons?

[benjamincanac]

What is it you're trying to do? For the SelectMenu in particular, everything you bind to USelectMenu will be proxied to the trigger button underneath automatically already.

[marius-mcfly]

We're building step-by-step form were we need to ensure that after navigating to the next/previous step, the first element in the form get focus to tab top down, otherwise the focus would stay on the buttons with which we used to navigate through the form.

Here is a bit more context:
For example USelectMenu is the first element of the new step in the form we want to basically do something like this which was possible in v2, and you were right! USelectMenu has this ability, I tested it and it worked. It's just not typed, this is what confused me. This is something to fix I would say :D

Almost the same for UTabs if it is the first element on the next step. This sadly doesn't work anymore:

// Inside a form step (each step is it's own component)
import type { ComponentExposed } from 'vue-component-type-helpers';
import { UTabs } from '#components';

const tabsRef = useTemplateRef<ComponentExposed<typeof UTabs>>('tabs');
// This was exposed before not sure if it was called "buttons" but the button refs were exposed
const focusFirstTabButton = () => selectMenuRef.value?.buttons[0].focus();

// For example, trying to foussing the first button
onMounted(() => {
    focusFirstTabButton();
});