WordPress.org

Make WordPress Core

Opened 7 years ago

Closed 6 years ago

#26785 closed defect (bug) (fixed)

Disabled buttons should not have any pointer events

Reported by: chiragswadia Owned by: nacin
Milestone: 3.9 Priority: normal
Severity: normal Version: 3.8
Component: Administration Keywords: has-patch commit
Focuses: ui Cc:

Description

Added CSS rule for disabled buttons.

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

Attachments (3)

disabled_button_css.patch (434 bytes) - added by chiragswadia 7 years ago.
CSS Patch
26785.2.patch (651 bytes) - added by mordauk 6 years ago.
Disable pointer on disabled buttons
26785.diff (454 bytes) - added by helen 6 years ago.

Download all attachments as: .zip

Change History (14)

@chiragswadia
7 years ago

CSS Patch

#1 @chiragswadia
7 years ago

  • Keywords has-patch added

#2 @chiragswadia
6 years ago

  • Component changed from General to Administration

@mordauk
6 years ago

Disable pointer on disabled buttons

#3 @mordauk
6 years ago

  • Focuses ui added

Makes sense to me.

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

#4 @nacin
6 years ago

  • Keywords commit added
  • Milestone changed from Awaiting Review to 3.9

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

@helen
6 years ago

#5 @helen
6 years ago

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?

#6 @chiragswadia
6 years ago

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'

#7 follow-up: @helen
6 years ago

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

#8 in reply to: ↑ 7 ; follow-up: @chiragswadia
6 years ago

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.

#9 in reply to: ↑ 8 ; follow-up: @nacin
6 years ago

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.

#10 in reply to: ↑ 9 @chiragswadia
6 years ago

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.

#11 @nacin
6 years ago

  • Owner set to nacin
  • Resolution set to fixed
  • Status changed from new to closed

In 27282:

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

props helen.
fixes #26785.

Note: See TracTickets for help on using tickets.