Dropdowns need `tabindex` to work in Safari on mobile

[ehanahamed]

Right now, a dropdowns in EhUI work by hiding/showing a div inside of another div using focus-within on the outer div.

The HTML of a dropdown looks something like this:

<div class="dropdown">
    <button>Dropdown</button>
    <div class="content">
        <button>Button 1</button>
        <button>Button 2</button>
    </div>
</div>

When the dropdown's button is clicked, it gets focused, which makes the focus-within somewhere in EhUI's css show the "content" div.

/* the CSS looks something like this */
.dropdown .content {
    display: none;
    position: relative;
}
.dropdown:focus-within .content {
    display: block;
}

This works perfectly on all desktop and Android browsers. It's pure CSS and mobile-friendly.

However, on iPhones, tapping the dropdown button does nothing. On Android, tapping the button gave it the :focus pseudoclass, just like clicking the button on desktop, so it "just works". However, with Safari on iOS, tapping the button doesn't give it :focus.

Adding the tabindex attribute to the container div fixes that:

<div class="dropdown" tabindex="0">
    <button>Dropdown</button>
    <div class="content">
        <button>Button 1</button>
        <button>Button 2</button>
    </div>
</div>

With tabindex="0", tapping the div/button focuses the actual div, which shows the dropdown correctly on iOS/Safari now. This also still works perfectly on Android & desktop (Linux, Mac, Windows, ChromeOS, everything).

This should be documented and anything that uses class="dropdown" should add tabindex="0".