"disabled" class blocks button pointer events

Mafalda Correa

Posted on 11/12/2019 17:43:59

Hi,

I noticed that when you make a button disabled, it doesn't only add the disabled attribute, but it also add a disabled class. I thought this would be to attribute the disabled CSS styles, but then I realised those are also being applied directly to the buttons with attribute disabled.

Furthermore, the disabled class has a pointer-events: none; rule which is unnecessary as the disable attribute already disables the button and makes the cursor style rule and title tooptip stop working.

See the video below:

https://www.screencast.com/t/a5SNThqp7S5k

How should I fix this issue? Should I remove the rule from the disabled class or should I stop the code from adding the disabled class to buttons?

Replies

Mafalda Correa

Posted on 09/04/2020 14:27:58

Bump?

Karsten Thuen

Posted on 23/04/2020 08:37:56

Hi Mafalda

The disabled css class is there to have something standard that can make a "disabled" styling for most elements. It is there to separate styling from function. I think the fix would simply be to add "cursor: not-allowed", to the genral .disabled class.

I am not sure we can simply remove the "pointer-events: none".

Are you looking at this due to the new Accesability requirements?

Best regards
Karsten Thuen

Mafalda Correa

Posted on 20/10/2020 17:42:00

Hi Karsten,

Sorry, I missed your reply in April and only revisited this now.

My previous post raised more questions, but the main thing is: the current code for the disabled class and attribute has contradicting styles.

.disabled, input[disabled] {
  cursor: not-allowed;
  opacity: .5;
  pointer-events: none;
  color: @gray-light;
}

Cursor styling will not work if pointer-events: none, so setting cursor: not-allowed becomes obsolete, as pointer-events:none is going to overwrite it. Using pointer-events: none will disable all mouse interactions with that element, including cursor styling.

Also: https://bitsofco.de/theres-no-reason-to-use-pointer-events-for-html-elements/

Even not necessarily agreenig with the overall article, it does make a good point why using pointer-events:none for disabled fields doesn't really work.

As for Accessibility requirements, it shouldn't matter as this is impacting mouse interactions and generally speaking, accessibility concerns don't include mouse usage (don't quote me on this though, because I didn't check how screen readers behaved with it).

Hope that clears things up (even though the answer is much too late)

Thanks

You must be logged in to post in the forum

Developer forum

"disabled" class blocks button pointer events

Replies