Add cursor-pointer class for greater accessibility

[timgavin]

Flux version

v1.1.2

Livewire version

v3.5.18

What is the problem?

Several elements, such as switches, checkboxes, radios, and segmented radio groups would benefit from having the cursor-pointer class applied to them.

The W3C APG shows a pointer on button and checkbox switches, and states:

To help people with visual impairments identify the switch as an interactive element, the cursor is changed to a pointer when hovering over the switch.

There are also examples of pointers on checkboxes and radio groups.

To make it easier to perceive that clicking either the label or checkbox will activate the checkbox, when a pointer hovers over either the checkbox or label, the background color changes, a border appears, and the cursor changes to a pointer

The cursor is changed to a pointer when hovering over the radio button to help people with visual impairments identify it as an interactive element.

The UK gov design guidelines also show pointers over checkboxes and radios. They do not cover switches or toggles.

Code snippets

$classes = Flux::classes()
    ->add('group h-5 w-8 relative inline-flex items-center outline-offset-2')
    ->add('rounded-full')
    ->add('transition')
    ->add('cursor-pointer')
    ->add('bg-zinc-800/15 [&[disabled]]:opacity-50 dark:bg-transparent dark:border dark:border-white/20 dark:[&[disabled]]:border-white/10')
    ->add('[print-color-adjust:exact]')
    ->add([
        'data-[checked]:bg-[var(--color-accent)]',
        'data-[checked]:border-0',
    ])
    ;

How do you expect it to work?

The mouse cursor should change to a pointer when hovering over each 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.

[calebporzio]

Gotcha yeah, this is a tricky one. Our current stance is:

• elements that trigger navigation events
• and buttons

should both use cursor-pointer. Everything else, should use default.

One reason behind this is that native controls like checkbox, radio, even button, are all cursor-default in browsers.

Also, we want to use the visuals as much as possible to signify interactivity rather than cursor because touch devices don't see a cursor at all.

Hope that makes sense, thanks for the request.