Pointer-Events Not allowed doesn't stop keyboard inputs

Question

The pointer-events doesn't stop the keyboard from tabing to the dropdown arrow and hitting space-bar to open up the dropdown. Is there CSS to block the keyboard interactions? Below is an example of what I tried to block the pointer/keybard/cursor from interacting with the dropdown. It seems to work in the code snippet but doesn't work on my site. I am using chrome to test. Using bootstrap 3.

.disabled{
   pointer-events: none !important;
    cursor: not-allowed !important;
    -moz-user-focus: none !important;
    -webkit-user-focus: none !important;
    -ms-user-focus: none !important;
    user-focus: none !important;
    -moz-user-modify: read-only !important;
    -webkit-user-modify: read-only !important;
    -ms-user-modify: read-only !important;
    user-modify: read-only !important;
    -moz-user-select: none !important;
    -webkit-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div><a href="#">Above Link</a></div>
<div class="btn-group disabled"><a href="#" class="btn btn-warning">Warning</a><a href="#" data-toggle="dropdown" class="btn btn-warning dropdown-toggle" aria-expanded="true"><span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li class="divider"></li><li><a href="#">Separated link</a></li></ul></div>  
<div><a href="#">After Link</a></div>

[tabIndex=-1](https://stackoverflow.com/questions/1561021/prevent-tabstop-on-a-element-anchor-link-in-html#:~:text=Modern%2C%20HTML5%20compliant%2C%20browsers%20support,element%20from%20being%20tabbed%20to.&text=The%20user%20agent%20must%20allow,reached%20using%20sequential%20focus%20navigation). Alternatively you could use a button instead of an anchor link and just set disabled on it like [here](https://getbootstrap.com/docs/4.0/components/dropdowns/#single-button-dropdowns). It's more semantically correct to use a button as opposed to an `anchor` tag anyway (is semantic HTML still a thing?) — Adam Jenkins, Sep 09 '20 at 18:43
Semantics will always be a thing. You could make `anchor` tag appear as a button to a screen reader by applying correct aria tags and apply javascript to accept `Spacebar` input from the keyboard, but why do that extra work when you could use `button` instead. — Caleb Taylor, Nov 12 '20 at 01:58

score 0 · Answer 1 · answered Sep 09 '20 at 18:38

links in a button group will not follow the disabled setting of the button group because they're links; you can't disable a link. Even if you could find a hacky way to make it work in a certain browser (and there a number online), the code will never be universally supported.

The best way of doing this would be hide the link in the button group.

You could create 2 links that look exactly the same. Only one of them has the 'data-toggle="dropdown"' attribute. If you want the dropdown disabled, show the link without the attribute and hide the one with the attribute. if you want to enable the dropdown, do the opposite.

This is the closest to a pure CSS solution I can offer.

Pointer-Events Not allowed doesn't stop keyboard inputs

1 Answers1