Steps to reproduce:

1. Enable NVDA screen reader in Windows 10
2. Go to https://bl.ocks.org/nolanlawson/raw/e63d2261406a15900ec6bd90e150e4b6/
3. Click the text input
4. Type "b"
5. Press up and down on the keyboard to cycle through dropdown options

Actual results:

NVDA speaks "1 of 1" for every list option.

Expected results:

NVDA should speak "1 of 5", "2 of 5", etc., because there are 5 total options.

The correct output is observed in Chrome+NVDA (Windows) and Chrome+VoiceOver (MacOS). This appears to be a Firefox-only issue.

This issue also only occurs if an ID is added to the element with style="display: contents". The HTML looks like this:

<ul aria-labelledby="ex1-label" role="listbox" id="ex1-listbox" class="listbox">
    <div id="id-31e9d5" style="display: contents;">
        <li class="result" role="option" id="result-item-0">Banana</li>
    </div>
    <div id="id-5ef236" style="display: contents;">
        <li class="result" role="option" id="result-item-1">Beets</li>
    </div>
    <!-- etc. -->
</ul>

(Note the "id" on the <div>s with style="display: contents;".)

In the JavaScript, you can remove this line (which adds the ID) and observe that Firefox behaves correctly afterwards:

resultWrapper.id = 'id-' + Math.floor(Math.random() * 10000000).toString(16)

The Bugbug bot thinks this bug should belong to the 'Core::Disability Access APIs' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

This is related to the intervening divs rather than display: contents. A workaround is to put role="presentation" on the intervening divs. This isn't ideal - it's certainly a bug in Firefox - but I mention it in case it's useful as a temporary measure.