Параметры HTML <select>не отображаются с помощью клавиатуры, когда <label>скрыто или отсутствует

Question

У меня очень простой выпадающий список <select> с двумя дочерними <option>:

<div>
    <select>
        <option
            value="defaultPrice"
            selected
        >Price</option>
        <option
            value="title"
        >Title</option>
    </select>
</div>

Когда я использую мышь и нажимаю кнопку выбора, мне показывают контекстное меню параметров, чтобы выбратьопция:

Однако, когда я использую клавиатуру и фокусируюсь на элементе выбора, клавиши «вверх» и «вниз» не выдают тот же диалог, что иожидается.

Однако , когда я добавляю метку к своему выбору, клавиши вверх и вниз показывают контекстное меню:

<div>
    <label for="my-select">Sort order</label>
    <select id="my-select">
        <option
            value="defaultPrice"
            selected
        >Price</option>
        <option
            value="title"
        >Title</option>
    </select>
</div>

Затем, если я добавлюCSS, чтобы скрыть метку, опять же, раскрывающийся список не будет отображаться.

Это, кажется, происходит везде, где я использовал раскрывающиеся списки выбора, и только кажется, что проблема в Chrome (v. 77.0.3865.90).

У меня еще нет CSS на сайте, так что это не проблема стилей.

Кто-нибудь еще сталкивался с такой проблемой? Не уверен, что это проблема с моей разметкой или ошибка в Chrome.