Skip to content

Searchable select not working with screenreader #2261

@thijsvdanker

Description

@thijsvdanker

Flux version

v2.10.1

Livewire version

v3.7.2

Tailwind version

v4.1.18

Browser and Operating System

Safari and Firefox on MacOS

What is the problem?

When using the searchable select (https://fluxui.dev/components/select#searchable-select) with VoiceOver it does not announce all the options.

The combobox (https://fluxui.dev/components/select#combobox) does work as expected.

This issue looks a lot like #1566 but is about the searchable select.

Code snippets to replicate the problem

Listbox from searchable select example: not working with VoiceOver

<flux:select variant="listbox" searchable placeholder="Choose industries...">
    <flux:select.option>Photography</flux:select.option>
    <flux:select.option>Design services</flux:select.option>
    <flux:select.option>Web development</flux:select.option>
    <flux:select.option>Accounting</flux:select.option>
    <flux:select.option>Legal services</flux:select.option>
    <flux:select.option>Consulting</flux:select.option>
    <flux:select.option>Other</flux:select.option>
</flux:select>

Combobox from combobox example: working with VoiceOver

<flux:select variant="combobox" placeholder="Choose industry...">
    <flux:select.option>Photography</flux:select.option>
    <flux:select.option>Design services</flux:select.option>
    <flux:select.option>Web development</flux:select.option>
    <flux:select.option>Accounting</flux:select.option>
    <flux:select.option>Legal services</flux:select.option>
    <flux:select.option>Consulting</flux:select.option>
    <flux:select.option>Other</flux:select.option>
</flux:select>

Screenshots/ screen recordings of the problem

Sry, I'm struggling to make a screenrecording of VoiceOver

How do you expect it to work?

When I have focus on the searchable select and use arrow-down to navigate the options, VoiceOver should announce the active option.

Please confirm (incomplete submissions will not be addressed)

  • I have provided easy and step-by-step instructions to reproduce the bug.
  • I have provided code samples as text and NOT images.
  • I understand my bug report will be closed if I haven't met the criteria above.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions