Vimiumでクリックできない要素をクリック可能にするユーザースクリプト

はじめに

クリックできない!

Vimiumでのクリック

Vimiumは、ブラウジング操作をVimのようなキーバインドで可能にする、Chrome及びFirefox用の拡張機能です。

VimiumではLinkHintsという方法でクリッカブルな要素をクリックできます。
LinkHintsというのは、上のスクリーンショットのように要素のところに文字列を表示し、その文字列がキーボードで入力されたらクリックイベントを発火させるというものです。

が、上のスクリーンショットでは通知(ベルのマーク)などがクリック可能であるにもかかわらずヒントが表示されていません。
これではVimiumだけでクリックすることができません。

なぜクリックできないのか

Vimiumは、要素のタグ名や要素の属性、CSSであてられたスタイルなどからクリック可能かどうかを判別しています。
該当する部分(GitHub)

大体の要素は正しく判別できますが、HTMLの書き方があんまりよろしくない場合などはクリック可能であると判別されずヒントが表示されません。

やるべきことはこれだけ

なら、ユーザースクリプトでHTMLを編集し、クリック可能であることを明示してあげればよいのです。
幸い、Vimiumはよくできていて、属性をちょこっといじるだけで済みます。

targetElm.setAttribute('role', 'button');

要素のrole属性をbuttonに設定しています。

role属性というのは、要素の意味付けのための属性で、WAI-ARIAというアクセシビリティをより良くするための、HTMLに付け加える形の言語によるものです。
(詳しくは私もわからないのですが、buttonタグを使えなかったときに、読み上げツールなどに対し「ボタンである」と示すために使われるものだそうです)。

これで、クリック可能になります。

ユーザースクリプト

Tampermonkey用ユーザースクリプト書きました。

// ==UserScript==  
// @name         Make it clickable for qrunch.net  
// @namespace    https://okayu.qrunch.io/  
// @version      1.0  
// @description  いくつかのボタンをVimiumでもクリック可能にします  
// @author       okayu  
// @match        https://qrunch.net/  
// @grant        none  
// ==/UserScript==  

(function () {  
    'use strict';  

    const clickable = {  
        button: [  
            '.buttons > .notice',  
            '.buttons > .user',  
        ]  
    };  

    Object.entries(clickable)  
        .forEach(([key, val]) => {  
            val  
                .map(selector => document.querySelector(selector))  
                .forEach(elm => {  
                    elm.setAttribute('role', key);  
                })  
                ;  
        });  
})();

こんなもんですかね。

おわりに

Qrunch、nodeType3TEXT_NODEがたくさんあって気になる〜!!!(細かい)