How can I make my element clickable for Vimium?

Question

I'm using Vimium on Firefox and Chrome and it helps me a lot https://github.com/philc/vimium

I noticed that some divs can be clicked and I found that class='demo-button' is one of them

<div class='demo-button'>demo-button</div>
<div class='demobutton'>demobutton</div>
<div class='demobuttonnn'>demobuttonn</div>
<div class='demobutto'>demobutto</div>

Here is a screenshot of Vimium links https://jsfiddle.net/qnvujfs6/

As you can see, only the last div demobutto can not be clicked using Vimium. I tried to search Vimium source for demo-button or demobutton but no results.

Does anyone have an idea why there is a difference between this demo button div-s ?

I want to be able to click on some generated elements using bootstrap plugins, for example Bootstrap Toggle. Here is code for two toggles, but only second one can be clicked because it contains demo-button class

https://codepen.io/duleorlovic/pen/VqWaEg

Answer 1

The first three are clickable because the class attribute contains the word "button" (See source).

For usability purposes it preferred to simply use the elements that are meant to do that job. For instance anchors (<a>) and buttons (<button>).

But if that is not possible (which seems to be the case here) you can also add the role attribute to the element. Elements with the attribute role with one of the following values will also be considered clickable:

• button
• tab
• link
• checkbox
• menuitem
• menuitemcheckbox
• menuitemradio

(Source)

So if your div elements represent check boxes, your code would look like this:

<div class="demo-button" role="checkbox">demo-button</div>
<div class="demobutton" role="checkbox">demobutton</div>
<div class="demobuttonnn" role="checkbox">demobuttonn</div>
<div class="demobutto" role="checkbox">demobutto</div>

In this case you are not depending on specific class names, which are by the extension considered "as unreliable".