The copyable and viewable input actions are not accessible for screenreaders

[stuininga1]

Flux version

1.0.23

Livewire version

3.5.12

What is the problem?

Currently if you add the copyable or viewable properties to an input the button that Flux generates is not accessible to screenreaders. It's just an empty button with an icon in it which screenreaders can't read. I've worked around this by publishing the input component and manually adding some sr-only text within the buttons for screenreaders to reference, but ideally Flux would be able to handle this and be fully accessible without requiring me to publish components and edit them! The clearable action has an aria-label on it, but the other two don't have any kind of aria labels or sr-only text.

Originally posted in this discussion thread: #835

Code snippets

You can recreate this by just including an input on your page with the copyable or viewable attribute.

e.g. flux/input/copyable.blade.php
My screenreader sees this as just "button" which gives no clues as to what this action actually does if I choose to interact with it.

<flux:button
    :$attributes
    :size="$size === 'sm' ? 'xs' : 'sm'"
    x-data="{ copied: false }"
    x-on:click="copied = ! copied; navigator.clipboard && navigator.clipboard.writeText($el.closest('[data-flux-input]').querySelector('input').value); setTimeout(() => copied = false, 2000)"
    x-bind:data-copyable-copied="copied"
>
    <flux:icon.clipboard-document-check variant="mini" class="hidden [[data-copyable-copied]>&]:block" />
    <flux:icon.clipboard-document variant="mini" class="block [[data-copyable-copied]>&]:hidden" />
</flux:button>

How do you expect it to work?

I expect the action buttons to have text in them (not just an icon) so it can pass accessibility tests and the buttons can be used by a screenreader.

e.g. flux/input/copyable.blade.php
I manually published and adjusted this to add sr-only text which allows this button to have a label for screenreaders so it reads something like "Copy to clipboard, button" instead which makes a lot more sense.

<flux:button
    :$attributes
    :size="$size === 'sm' ? 'xs' : 'sm'"
    x-data="{ copied: false }"
    x-on:click="copied = ! copied; navigator.clipboard && navigator.clipboard.writeText($el.closest('[data-flux-input]').querySelector('input').value); setTimeout(() => copied = false, 2000)"
    x-bind:data-copyable-copied="copied"
>
    <div class="hidden [[data-copyable-copied]>&]:block">
        <flux:icon.clipboard-document-check variant="mini" />
        <span class="sr-only">Copied to clipboard</span>
    </div>

    <div class="block [[data-copyable-copied]>&]:hidden">
        <flux:icon.clipboard-document variant="mini" />
        <span class="sr-only">Copy to clipboard</span>
    </div>
</flux:button>

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.