pointer-events styles breaks title prop and cursor styles on disabled buttons

[vdh]

Checklist

• I'm using Bulma version [0.1.0]
• My browser is: Chrome 52.0.2743.82 (64-bit)

Description

The pointer-events: none styles being used on .is-disabled or .button[disabled] selectors breaks any title/alt properties applied to button tags, and also prevents the cursor: not-allowed style from being applied to the button.

• .is-disabled on =control: sass/utilities/controls.sass:30
• .is-disabled on %control-with-element: sass/elements/form.sass:53, sass/elements/form.sass:55
• The global .is-disabled: sass/base/helpers.sass:98
• In a related style, .is-loading uses pointer-events: none as a hack to disable buttons: sass/elements/button.sass:106

I think it's a dangerous precedent to rely on pointer-events to control browser behaviour for disabling form controls. The disabled property is the more accurate and reliable way to disable a control. I can see how using this CSS style could make it easier to disable multiple elements at once by applying the is-disabled class and cascade it down to child elements, but that behaviour could be replicated with a disabled fieldset.

As noted on the MDN article about pointer-events:

Note that preventing an element from being the target of mouse events by using pointer-events does not necessarily mean that mouse event listeners on that element cannot or will not be triggered.
[…]

So without a dedicated disabled property, buttons and controls could still potentially be interacted with by non-mouse events such as keyboard input, or browser plugins (e.g. autofill or spellcheck plugins)

Steps to Reproduce

<button class="button is-disabled" title="Cannot remove the last item" disabled type="button">
  Remove
</button>

<!-- Or wrapped in a control -->
<div class="control is-disabled" title="Cannot remove the last set">
  <button class="button" disabled type="button">
    Remove
  </button>
</div>

Expected behavior: When hovered over, the browser toggles the not-allowed cursor and shows the title text in a tooltip.

Actual behavior: Both the tooltip and cursor style are not activated.

[jgthms]

Fixed by #615

[homeworkprod]

@jgthms:
It seems to me that the disabled attribute is not applicable to anchors as per the HTML5 standard.

However, you have changed examples to use the attribute on anchors.

This seems to be invalid (anyone, please correct me if I'm wrong).

I am under the impression that in order to style anchors as "disabled", the re-introduction of a corresponding CSS class is necessary.

[vdh]

The issue I raised technically only applied to form controls (buttons and inputs), I'm not quite sure why that change was also done for anchor tags.

@homeworkprod But even if a CSS class (or something like a[disabled] { pointer-events: none; }) were (re)added, it wouldn't completely disable anchors. Keyboard events will still be able to interact with them. Unfortunately, AFAIK the only way to completely disable anchors in the current spec is to bind a Javascript click event handler that calls event.preventDefault();.

[markedro]

Is this getting reverted back specifically on the tags? disabled doesn't appear to be considered as a valid attribute for anchors. It does appear that if disabled gets hard coded to an anchor directly when defining that, yes the element seems to show in a "disabled" state but subsequently it isn't able to be programmatically enabled / disabled beyond its original definition which means you are stuck with having to specifically define 2 separate anchors (specifically one enabled and one disabled) and then perform some type of show/hide toggle between them which is very sub-optimal. Or is there something I'm missing?

[janat08]

Yes this is still an issue in regard to anchors.

[hovancik]

Still issue (with anchors) in 2018. If anyone comes here, check the status at #885

[vans163]

This is a two edged sword. By not relying on a class, you cannot click things inside the disabled element. For example we have an input box that is disabled, but when clicking the little lock which is INSIDE the input box, we want to enable it.

Cannot do that if disabled is a property of the input box, as the browser blocks onclick events.