[wp-trac] [WordPress Trac] #59733: Disabled form controls should not use cursor: pointer

[WordPress Trac]

#59733: Disabled form controls should not use cursor: pointer
-----------------------------+-------------------------------------
 Reporter:  afercia          |       Owner:  (none)
     Type:  defect (bug)     |      Status:  new
 Priority:  normal           |   Milestone:  Awaiting Review
Component:  Administration   |     Version:
 Severity:  normal           |  Resolution:
 Keywords:  has-screenshots  |     Focuses:  ui, accessibility, css
-----------------------------+-------------------------------------
Description changed by afercia:

Old description:

> Traditionally, WordPress sets the CSS property `cursor: poin Althter`
> form all form controls and their `<label>` elements.
> [https://github.com/WordPress/gutenberg/issues/15343 That is a non-native
> styling], as by default form controls and labels use the `default`
> pointer. Anyways, long time ago it was decided to use the `pointer` value
> to highlight the form controls are 'interactive' elements.
>
> However, there is a problem when some form controls are disabled or have
> an `aria-disabled="true"` attribute: they still show a pointer cursor,
> which just feels wrong for disabled controls.
>
> This appears particularly true for checkboxes and radio buttons but all
> other form controls should be checked.
>
> I couldn't find many cases of disabled checkboxes and radio buttons in
> core and there's probably a reason: traditionally, WordPress doesn't
> disable settings, it hides them instead. However, there are a few cases
> and the Gutenberg editor does use to render disabled controls.
>
> This problem should be first be addressed in the core stylesheets and
> then addressed in the Gutenberg repository as well. I will create a
> GitHub issue for that.
>
> A couple ways to reproduce:
> - Install and activate the Link Manager plugin:
> https://wordpress.org/plugins/link-manager/
> - Add a new link.
> - In the form to create a new link, check the checkbox `another web
> address of mine`
> - Observe all the following checkboxes and radio buttons get disabled.
> - Hover the mouse on the disabled checkboxes and radio buttons.
> - Observe they all display the 'pointer' cursor despite the fact they are
> disabled.
> - Edit a post.
> - Add an Image block and add a link to the image.
> - While the block is selected, observe the lightbox setting in the
> settings sidebar.
> - Observe the toggle to enable the lightbox 'Expand on Click` is
> disabled.
> - Hover the mouse on the toggle and observe the displayed cursor is
> 'pointer'.

New description:

 Traditionally, WordPress sets the CSS property `cursor: pointer` for all
 form controls and their `<label>` elements.
 [https://github.com/WordPress/gutenberg/issues/15343 That is a non-native
 styling], as by default form controls and labels use the `default`
 pointer. Anyways, long time ago it was decided to use the `pointer` value
 to highlight the form controls are 'interactive' elements.

 However, there is a problem when some form controls are disabled or have
 an `aria-disabled="true"` attribute: they still show a pointer cursor,
 which just feels wrong for disabled controls.

 This appears particularly true for checkboxes and radio buttons but all
 other form controls should be checked.

 I couldn't find many cases of disabled checkboxes and radio buttons in
 core and there's probably a reason: traditionally, WordPress doesn't
 disable settings, it hides them instead. However, there are a few cases
 and the Gutenberg editor does use to render disabled controls.

 This problem should be first be addressed in the core stylesheets and then
 addressed in the Gutenberg repository as well. I will create a GitHub
 issue for that.

 A couple ways to reproduce:
 - Install and activate the Link Manager plugin:
 https://wordpress.org/plugins/link-manager/
 - Add a new link.
 - In the form to create a new link, check the checkbox `another web
 address of mine`
 - Observe all the following checkboxes and radio buttons get disabled.
 - Hover the mouse on the disabled checkboxes and radio buttons.
 - Observe they all display the 'pointer' cursor despite the fact they are
 disabled.
 - Edit a post.
 - Add an Image block and add a link to the image.
 - While the block is selected, observe the lightbox setting in the
 settings sidebar.
 - Observe the toggle to enable the lightbox 'Expand on Click` is disabled.
 - Hover the mouse on the toggle and observe the displayed cursor is
 'pointer'.

--

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/59733#comment:1>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform