Accessibility for Bilibili Web

Bilibili 可访问性优化。

// ==UserScript==
// @name Accessibility for Bilibili Web
// @namespace https://www.viyf.org
// @version 0.1.5
// @description Bilibili 可访问性优化。
// @author ABitGlow
// @match        https://www.bilibili.com/*
// @grant        none
// ==/UserScript==

/** 被扫除的障碍清单
 * “点赞”、“投币”、“收藏”、“分享” 按钮缺乏键盘操作能力;
 * “搜索” 按钮无可访问性文字描述;
 * 弹幕、 CC 字幕没有添加 ARIA Live Region 相关属性(Bilibili Web 端已修复);
 * “弹幕” 开关无可访问性文字描述(Bilibili Web 端已修复);
 * “发送” 弹幕按钮无键盘聚焦能力(Bilibili Web 端已修复);
 * 当播放器组件加载完成后 “播放”/“暂停” 按钮没有获取焦点;
 */

(function () {
    'use strict';

    /* 给选择器指定的元素添加属性值。 */
    function setElementAttribute(selector, name, value) {
        var list = document.querySelectorAll(selector);
        Array.prototype.forEach.call(list, function (e) {
            e.setAttribute(name, value);
        });
        return list.length;
    }

    /* 用于 KeyboardEvent 的回调函数。 当回车键和空格键按下引发该元素的 click 事件。 */
    function keySpaceOrEnterToClick(event) {
        if (event.key === 'Enter' || event.key === ' ') {
            this.click();
        }
    }

    /* 页面加载完成后对一些元素进行处理。 */
    function processLoadedHTML() {
        setElementAttribute('#arc_toolbar_report > div.ops > span', 'tabindex', '0');
        setElementAttribute('#arc_toolbar_report > div.ops > span', 'role', 'button');

        var list = document.querySelectorAll('#arc_toolbar_report > div.ops > span');
        Array.prototype.forEach.call(list, function (e) {
            e.addEventListener('keydown', keySpaceOrEnterToClick, null);
        });
    }

    setTimeout(processLoadedHTML, 1000);

    /* 处理搜索按钮。 */
    (function () {
        var countdown = 10;
        var intervalID = setInterval(function () {
            if (setElementAttribute('#nav_searchform > div > button', 'aria-label', '搜索') > 0) {
                clearInterval(intervalID);
            }
            if (countdown < 1) {
                clearInterval(intervalID);
            }
            countdown--;
        }, 1000);
    })();

    /* 处理播放器组件。 */
    function processPlayer() {
        /* 由于 Bilibili Web 端已修复下面的问题,故注释掉。
        setElementAttribute('div.subtitle-wrap, div.bilibili-player-video-danmaku', 'aria-live', 'polite');
        setElementAttribute('div.bilibili-player-video-danmaku', 'aria-live', 'polite');
        setElementAttribute('div.bui-button', 'role', 'button');
        setElementAttribute('div.bui-button', 'tabindex', '0');
        setElementAttribute('div.bilibili-player-video-danmaku-switch > input', 'aria-label', '弹幕');
        */

        /* 播放器加载完成后让 “播放/暂停” 按钮获取焦点。 */
        var btnElement = document.querySelector('div.bilibili-player-video-btn.bilibili-player-video-btn-start > button');
        if (btnElement) {
            btnElement.focus();
        }
    }

    /* 给播放器组件添加观察器。 */
    var elementToObserve = document.getElementById('bilibili-player');
    var config = {
        childList: true,
        subtree: true
    };
    var callback = function (mutationsList, observer) {
        mutationsList.forEach(function (record) {
            if (record.target.classList.contains('bilibili-player-video-wrap')) {
                processPlayer();
            }
        });
    };
    var observer = new MutationObserver(callback);
    observer.observe(elementToObserve, config);
})();