Flux Slider missing some a11y labels?

[dansan92]

Flux version

v2.9.2

Livewire version

v4.0@beta

Tailwind version

v4.1.17

Browser and Operating System

Chrome on Windows

What is the problem?

The new slider component seems to be missing some recommended accessibility labels.

Even though I'm following the documentation, and adding a <flux:label>, it seems like it doesn't apply it to the necessary tags. I'm using the with input version, but the others seem to have the same problem.

This seems to be the case for the sr-only input, as well as the sibling number input element.

Code snippets to replicate the problem

<flux:field>
    <flux:label>I am slider</flux:label>
    <div class="-mt-2 flex items-center gap-4">
        <flux:slider wire:model="slider" />
        <flux:input wire:model="slider" type="number" size="sm" class="max-w-18" />
    </div>
</flux:field>

Screenshots/ screen recordings of the problem

How do you expect it to work?

I would expect the given <flux:label> text to be applied to every required element.

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.

[ganyicz]

Hi @dansan92,

Thanks for reporting!

I've submitted a PR with a fix.

The extra input was in fact missing a label.

Although the slider itself was already labeled and working correctly with screenreaders, not having a label on the native input elements would still trigger these recommendations you're seeing. I've now moved the labels to the native inputs instead which should get rid of the warnings.