Disabled buttons should not have any pointer events

[chiragswadia]

Added CSS rule for disabled buttons.

Ideally a button whose property is disabled, should not have any pointer events.

[chiragswadia]

CSS Patch

[mordauk]

Disable pointer on disabled buttons

[mordauk]

Makes sense to me.

26785.2.patch is a refreshed patch that also removes the point for secondary buttons.

[nacin]

Seems good to me. Will want to double-check this is the proper use per the spec.

[helen]

I think we need to fix the CSS issues first, as in 26785.diff​. What's the benefit of adding the pointer-events property here?

[chiragswadia]

By using any other css property, the disabled buttons will still be 'clickable', but by disabling the pointers-events we are making sure that they are not 'clickable' but only 'visible'

[helen]

I get that. I'm asking what benefit this has for WordPress. Not opposed to it, just want to have more information first.

[chiragswadia]

Replying to helen:

I get that. I'm asking what benefit this has for WordPress. Not opposed to it, just want to have more information first.

This is actually a ideal UI convention followed while including disabled buttons anywhere on a website. If everybody uses it, then why should WordPress core ignore it!
Regarding the benefits, this css rule adds something to the disabled buttons styling as per the standards.

[nacin]

Replying to chiragswadia:

This is actually a ideal UI convention followed while including disabled buttons anywhere on a website. If everybody uses it, then why should WordPress core ignore it!
Regarding the benefits, this css rule adds something to the disabled buttons styling as per the standards.

Hi, this still isn't quite enough information for us to go on. WordPress primary buttons are styled to not react to pointer events, even without this line of CSS. (The secondary gray buttons are, which is a bug — covered by 26785.diff​.)

A disabled button in WordPress is already not 'clickable'. It doesn't visibly react to hover, focus, or click.

The spec seems to indicate that, while it has its role in HTML land, pointer-events was/is primarily for SVG. While we could use it, I don't see an actual tangible benefit in this case.

It seems like the only benefit would be making it so we don't need to specifically style the hover/active states of disabled buttons. But we already do that and we would continue to need to do that anyway for browsers that don't support this property.

[chiragswadia]

Replying to nacin:

Replying to chiragswadia:

This is actually a ideal UI convention followed while including disabled buttons anywhere on a website. If everybody uses it, then why should WordPress core ignore it!
Regarding the benefits, this css rule adds something to the disabled buttons styling as per the standards.

Hi, this still isn't quite enough information for us to go on. WordPress primary buttons are styled to not react to pointer events, even without this line of CSS. (The secondary gray buttons are, which is a bug — covered by 26785.diff​.)

A disabled button in WordPress is already not 'clickable'. It doesn't visibly react to hover, focus, or click.

The spec seems to indicate that, while it has its role in HTML land, pointer-events was/is primarily for SVG. While we could use it, I don't see an actual tangible benefit in this case.

It seems like the only benefit would be making it so we don't need to specifically style the hover/active states of disabled buttons. But we already do that and we would continue to need to do that anyway for browsers that don't support this property.

Yeah I guess the background-color css solves the problem and it will be supported by all browsers. No need to add pointer-events if you are adding that patch instead.

[nacin]

In 27282:

Ensure disabled secondary buttons do not change background on hover or active.

props helen.
fixes #26785.