Created
January 14, 2020 14:49
-
-
Save MarcoZehe/0c1d3cd6f9c8f4c7809fb6ad0e047dc3 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ==UserScript== | |
// @name InternetWorx Accessibility Fixes | |
// @namespace http://axSgrease.nvaccess.org/ | |
// @description Improves the accessibility of InternetWorx. | |
// @author Marco Zehe <marcozehe@mailbox.org> | |
// @copyright 2019 Marco Zehe, Mozilla Corporation, Derek Riemer | |
// @license Mozilla Public License version 2.0 | |
// @version 2019.1 | |
// @include https://www.inwx.de/* | |
// ==/UserScript== | |
/*** Functions for common tweaks. ***/ | |
function makeHeading(el, level) { | |
el.setAttribute("role", "heading"); | |
el.setAttribute("aria-level", level); | |
} | |
function makeRegion(el, label) { | |
el.setAttribute("role", "region"); | |
el.setAttribute("aria-label", label); | |
} | |
function makeButton(el, label) { | |
el.setAttribute("role", "button"); | |
el.setAttribute("aria-label", label); | |
} | |
function makePresentational(el) { | |
el.setAttribute("role", "presentation"); | |
} | |
function setLabel(el, label) { | |
el.setAttribute("aria-label", label); | |
} | |
function makeHidden(el) { | |
el.setAttribute("aria-hidden", "true"); | |
} | |
function setExpanded(el, expanded) { | |
el.setAttribute("aria-expanded", expanded ? "true" : "false"); | |
} | |
var idCounter = 0; | |
// Get a node's id. If it doesn't have one, make and set one first. | |
function setAriaIdIfNecessary(elem) { | |
if (!elem.id) { | |
elem.setAttribute("id", "axsg-" + idCounter++); | |
} | |
return elem.id; | |
} | |
function makeElementOwn(parentElement, listOfNodes){ | |
ids = []; | |
for(let node of listOfNodes){ | |
ids.push(setAriaIdIfNecessary(node)); | |
} | |
parentElement.setAttribute("aria-owns", ids.join(" ")); | |
} | |
/*** Code to apply the tweaks when appropriate. ***/ | |
function applyTweak(el, tweak) { | |
if (Array.isArray(tweak.tweak)) { | |
let [func, ...args] = tweak.tweak; | |
func(el, ...args); | |
} else { | |
tweak.tweak(el); | |
} | |
} | |
function applyTweaks(root, tweaks, checkRoot) { | |
for (let tweak of tweaks) { | |
for (let el of root.querySelectorAll(tweak.selector)) { | |
applyTweak(el, tweak); | |
} | |
if (checkRoot && root.matches(tweak.selector)) { | |
applyTweak(root, tweak); | |
} | |
} | |
} | |
let observer = new MutationObserver(function(mutations) { | |
for (let mutation of mutations) { | |
try { | |
if (mutation.type === "childList") { | |
for (let node of mutation.addedNodes) { | |
if (node.nodeType != Node.ELEMENT_NODE) { | |
continue; | |
} | |
applyTweaks(node, DYNAMIC_TWEAKS, true); | |
} | |
} else if (mutation.type === "attributes") { | |
applyTweaks(mutation.target, DYNAMIC_TWEAKS, true); | |
} | |
} catch (e) { | |
// Catch exceptions for individual mutations so other mutations are still handled. | |
console.log("Exception while handling mutation: " + e); | |
} | |
} | |
}); | |
function init() { | |
applyTweaks(document, LOAD_TWEAKS, false); | |
applyTweaks(document, DYNAMIC_TWEAKS, false); | |
options = {childList: true, subtree: true}; | |
if (DYNAMIC_TWEAK_ATTRIBS.length > 0) { | |
options.attributes = true; | |
options.attributeFilter = DYNAMIC_TWEAK_ATTRIBS; | |
} | |
observer.observe(document, options); | |
} | |
/*** Define the actual tweaks. ***/ | |
// Tweaks that only need to be applied on load. | |
const LOAD_TWEAKS = [ | |
]; | |
// Attributes that should be watched for changes and cause dynamic tweaks to be | |
// applied. For example, if there is a dynamic tweak which handles the state of | |
// a check box and that state is determined using an attribute, that attribute | |
// should be included here. | |
const DYNAMIC_TWEAK_ATTRIBS = []; | |
// Tweaks that must be applied whenever a node is added/changed. | |
const DYNAMIC_TWEAKS = [ | |
// Various buttons. | |
{selector: '.fa-pencil', | |
tweak: [makeButton, "Zone bearbeiten"]}, | |
{selector: '.fa-eye', | |
tweak: [makeButton, "Anzeigen"]}, | |
{selector: '.fa-download', | |
tweak: [makeButton, "Herunterladen"]}, | |
{selector: '.fa-remove', | |
tweak: [makeButton, "Entfernen"]}, | |
{selector: '.fa-pencil-square-o', | |
tweak: [makeButton, "Bearbeiten"]}, | |
]; | |
/*** Lights, camera, action! ***/ | |
init(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment