Поведение VoiceOver несовместимо с выпадающими опциями выбора

Question

В настоящее время я работаю над опытом VoiceOver для пользовательского веб-компонента, и я столкнулся с несоответствием в поведении VoiceOver.

Мой пользовательский веб-компонент функционирует как раскрывающийся список с вариантами выбора. В следующем сценарии ios я описываю различные варианты поведения VoiceOver. Заранее благодарим за прочтение.

Сценарий 1:

В раскрывающемся списке доступны 3 варианта: Вариант 1, Вариант 2, Вариант 3

<custom-select label="Dropdown Label">
    <custom-option value="Option 1">Option 1</custom-option>
    <custom-option value="Option 2">Option 2</custom-option>
    <custom-option value="Option 3">Option 3</custom-option>
</custom-select>

Вы выбираете вариант 2. Это закрывает всплывающее окно и обновляет раскрывающийся компонент, чтобы отобразить выбранный параметр

Затем вы снова открываете раскрывающийся список, фокус переходит на ранее выбранный параметр (в этом случае вариант 2, который теперь имеет галочку рядом с ним), и VoiceOver говорит:

Галочка. Вариант 2. Кликабельный. В данный момент вы работаете с текстовым элементом.

Это поведение VoiceOver, которое вы будете последовательно использовать для любого параметра, который не является параметром last в списке. Следующий сценарий объясняет, что там происходит ...

Сценарий 2:

Опять 3 варианта на выбор: Вариант 1, Вариант 2, Вариант 3

Вы выбираете последний вариант, вариант 3. Это закрывает всплывающее окно и обновляет раскрывающийся компонент, чтобы отобразить выбранный вариант

Затем вы снова открываете раскрывающийся список, фокус переходит на ранее выбранный вариант (отмечен галочкой вариант 3), и VoiceOver сообщает:

вариант 1. вариант 2. Галочка. Вариант 3. Кликабельный. В данный момент вы работаете с текстовым элементом.

Поэтому, только когда вы выберете последний , VoiceOver решит прочитать все опций, прежде чем перейти к тому, который имеет фокус ...

Соответствующий HTML:

Родительский компонент содержит кнопку, которая переключает отображаемый div, содержащий параметры раскрывающегося списка («слот» для вложенных компонентов). Я сократил его до соответствующих атрибутов, классов и директив для презентации (написано на Svelte. js):

<button
    type="button"
    aria-required={ariaRequired}
    aria-haspopup="listbox"
    aria-label={ariaLabel}
    aria-disabled={ariaDisabled}
    aria-expanded={ariaExpanded}
    on:click={toggleOptions}>
    {display}
</button>
<div
    tabindex="-1"
    class:hidden={optionSelectVisable === false}>
    <slot />
</div>

А затем вложенный компонент option выглядит следующим образом:

<div
    on:click={dispatchOption}
    role="option"
    value={value}
    id="option-{inputID}"
    aria-selected={ariaSelected}
    aria-disabled={ariaDisabled}
    tabindex={tabindex}>
    <div>
        <custom-icon
            type="checkmark"
            aria-label="checkmark"
            class:hidden={displayCheckmark === false}/>
    </div>
    <div>
        <slot />
    </div>
</div>

Оказано HTML (пример с проверенным вариантом 1):

<custom-select label="Dropdown Label">
    →#shadow-root
    <custom-option value="Option 1">
        ↓#shadow-root
        <div
            role="option"
            aria-selected="true"
            aria-disabled="false"
            value="Option 1"
            tabindex="0">...</div>
        "Option 1"
    <custom-option>
    <custom-option value="Option 2">
        ↓#shadow-root
        <div
            role="option"
            aria-selected="false"
            aria-disabled="false"
            value="Option 2"
            tabindex="0">...</div>
        "Option 2"
    <custom-option>
    <custom-option value="Option 3">
        ↓#shadow-root
        <div
            role="option"
            aria-selected="false"
            aria-disabled="false"
            value="Option 3"
            tabindex="0">...</div>
        "Option 3"
    <custom-option>
</custom-select>

Любая помощь очень ценится. Спасибо.