Single-select listbox gets aria-multiselectable="true"

Open Beginner friendly
  • Is something wrong?
#2,885 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
76/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
javascript
Domain
accessibility, frontend

Research direction

The report points to the helper calls in dist/flux.min.js and describes the argument mix-up. Read the helper and the select and pillbox call sites, then check whether the repository has corresponding source files or tests. Done means a single-select listbox exposes aria-multiselectable="false", while setting multiple keeps it "true".

Written by the indexing model from the issue text.

Description

Flux version

v2.21.0 (Flux Pro 2.21.0)

Livewire version

v4.4.7

Tailwind version

v4.3.3

Browser and Operating System

Chrome 150 on macOS (also Safari)

What is the problem?

A single-select flux:select variant="listbox" renders its listbox with aria-multiselectable="true", so screen readers announce every single-select listbox as a multi-select. The attribute should be "false" unless multiple is set.

It looks like an argument mix-up in dist/flux.min.js: the helper that sets up the options element takes two parameters, the element and the "multiple" flag, and sets aria-multiselectable from the second one. The select (and the pillbox) call it with three arguments, (element, "options", multiple), so the string "options" lands in the flag position and is always truthy.

Setting the attribute back from userland JS does not stick, because Flux writes it again on every change.

The same was present in 2.20.1.

Code snippets to replicate the problem
<flux:select variant="listbox" name="colour" placeholder="Choose…">
    <flux:select.option value="red">Red</flux:select.option>
    <flux:select.option value="blue">Blue</flux:select.option>
</flux:select>

Open the select and inspect the element with role="listbox", or run this in the console:

document.querySelector('ui-select [role=listbox]').getAttribute('aria-multiselectable') // "true"

Expected: "false", and "true" only with the multiple attribute.

Dominant language
Blade
Stars
979
Forks
110
Avg merge
2d 4h
Merged PRs (30d)
7

Getting set up

  • No Dockerfile or Docker Compose file
  • Has a pull request template
  • No contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from livewire/flux

All issues in livewire/flux

Similar issues

More Accessibility issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.