Set focus in JS with accessibility - voiceOver IOS

Question

I am not able to set focus on an element when IOS accessibility - voiceOver is set. When navigating on my site, the element that is read is the element closest to the navigation button on the last page. I want it to set focus on a specific h tag that is the title of the page.

Things I have tried:

• js id and focus() method when vue is mounted
• vue ref and focus() method when vue is mounted
• same as both above but with select() as well

Stack: Laravel, Jetstream, Vue, Inertia

Simplified example:

<template>
    <div>
        <h1 ref="title">My Page Title</h1>
        <p>
            Some lorem ipsum text   
        </p>
        <p>
            Some more lorem ipsum text   
        </p>
    </div>
</template>
<script>
export default {
    mounted() {
        this.$refs.title.focus(); // This does not work for voiceOver
    }
}
</script>

Answer 1

As horrible as the solution is I have a solution to the problem. Changed the h1 tag with a input tag, changed the role to "text" and put a "readonly" on it.

Solution with tailwind classes:

<input role="text" value="My text header" class="font-bold outline-none bg-transparent" readonly autofocus>