focus-within works on Android browser but not iOS

Question

I have a two-level navigation menu implemented with the :focus-within pseudo class. On small devices it should appear as a 'Menu' button at the bottom of the screen, which expands to the first level on tapping. The second level should open on tapping a first-level item and the first level should (of course) remain open. This works fine on Android phones but my iPhone users report that the Menu button does not respond to tapping.

Here's the HTML snippet:

<div class="gcc-expands" id="GCCmainNav">
    <a href="#" id="GCCnavOpen">&#9776; Menu</a>
    <div class="gcc-expansion">
        <nav role="navigation"class="gcc-menu">
            <a href="/">Home</a>
            <a href="/#GCCprogramme">Concerts&nbsp;&amp;&nbsp;Events</a>
            <div class="gcc-expands">
                <a href="#">About&nbsp;Us</a>
                <div class="gcc-expansion">
                    <div class="gcc-menu" id="GCCaboutNav">
                        <a href="/about-us.php">The Choir</a>
                        <a href="/#GCCrecordings">The Choir on CD</a>
                        <a href="/history.php">History</a>
                        <a href="/contact-us.php#GCCcontact">Contact</a>
                    </div>
                </div>
            </div>
            <a href="/for-members/members1.php">For&nbsp;Members</a>
        </nav>
    </div>
</div>

And here's the CSS:

.gcc-expands {
    position: relative;
}

.gcc-expansion {
    display: none;
    position: relative;
}

.gcc-expands:focus-within>.gcc-expansion {
    display: block;
}

Focussing on the #GCCnavOpen pseudo link should cause the first level .gcc-expansion to display, then focussing on the 'About Us' link should keep the first level open (:focus-within) and open the inner .gcc-expansion.

According to caniuse, this has been supported in iOS Safari since 10.3 (2017) but it doesn't seem to be working for my users. Any insights, please?

Answer 1

I've cracked this.

I guessed that, for some reason, the elements were not acquiring focus when tapped on. So tapping on my 'Menu' link did not give that element focus, therefore :focus-within couldn't operate in the parent. This seems to be a 'feature' of iOS on touch-only interfaces; it's not a problem in Windows or Andoid environments (or on MacOS).

I discovered that the cure is to add explicit tabindex="0" to every link in the menu hierarchy (including the pseudo links that act as buttons). This seems to make the element focussable in the iOS touch interface.

For clarity, here's the working HTML (no change to the CSS):

<div class="gcc-expands" id="GCCmainNav">
    <a href="#" tabindex="0" id="GCCnavOpen">&#9776; Menu</a>
    <div class="gcc-expansion">
        <nav role="navigation"class="gcc-menu">
            <a href="/" tabindex="0">Home</a>
            <a href="/#GCCprogramme" tabindex="0">Concerts&nbsp;&amp;&nbsp;Events</a>
            <div class="gcc-expands">
                <a href="#" tabindex="0">About&nbsp;Us</a>
                <div class="gcc-expansion">
                    <div class="gcc-menu" id="GCCaboutNav">
                        <a href="/about-us.php" tabindex="0">The Choir</a>
                        <a href="/#GCCrecordings" tabindex="0">The Choir on CD</a>
                        <a href="/history.php" tabindex="0">History</a>
                        <a href="/contact-us.php#GCCcontact" tabindex="0">Contact</a>
                    </div>
                </div>
            </div>
            <a href="/for-members/members1.php" tabindex="0">For&nbsp;Members</a>
        </nav>
    </div>
</div>

Of course, there's a bunch of ancillary CSS that positions and styles the two levels of menu. I haven't posted that here because it's design-specific and not relevant to the problem.

I hope this helps some other struggling soul.