forked from jcsteh/axSGrease
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathCultureAmpA11yFixes.user.js
More file actions
146 lines (128 loc) · 4.32 KB
/
CultureAmpA11yFixes.user.js
File metadata and controls
146 lines (128 loc) · 4.32 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
// ==UserScript==
// @name Culture Amp Accessibility Fixes
// @namespace http://axSgrease.nvaccess.org/
// @description Improves the accessibility of Culture Amp.
// @author James Teh <jteh@mozilla.com>
// @copyright 2018 Mozilla Corporation
// @license Mozilla Public License version 2.0
// @version 2018.1
// @grant GM_log
// @include https://*.cultureamp.com/*
// ==/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");
}
/*** 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.
GM_log("Exception while handling mutation: " + e);
}
}
});
function init() {
applyTweaks(document, LOAD_TWEAKS, false);
applyTweaks(document, DYNAMIC_TWEAKS, false);
observer.observe(document, {childList: true, attributes: DYNAMIC_TWEAK_ATTRIBS.length > 0,
subtree: true, attributeFilter: DYNAMIC_TWEAK_ATTRIBS});
}
/*** Define the actual tweaks. ***/
// Tweaks that only need to be applied on load.
const LOAD_TWEAKS = [
// Make individual questions headings.
{selector: '.question p',
tweak: [makeHeading, 4]},
// Answers should be radio buttons.
{selector: '.option, .heatbarraterRatingUnit',
tweak: el => el.setAttribute("role", "radio")},
// The screen reader only text "You Have Answered" appears after each question.
// It serves absolutely no purpose, so kill it.
{selector: '.heatbarraterContainer > .screenreader',
tweak: makeHidden},
]
// 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 = ["class", "data-score", "selected"];
// Tweaks that must be applied whenever a node is added/changed.
const DYNAMIC_TWEAKS = [
// Expose whether a survey section is expanded or collapsed.
{selector: '.survey > li',
tweak: section => {
let heading = section.querySelector("h3");
if (!heading) return;
let expanded = section.classList.contains("selected");
heading.setAttribute("aria-expanded", expanded ? "true" : "false");
}},
// Expose whether an answer is selected.
{selector: '.option',
tweak: option => {
let checked = option.classList.contains("on");
option.setAttribute("aria-checked", checked ? "true" : "false");
}},
{selector: '.heatbarraterContainer',
tweak: container => {
// Individual options don't have an attribute we can use to determine
// selection. However, the container does.
let score = container.getAttribute("data-score");
for (let option of container.querySelectorAll('.heatbarraterRatingUnit')) {
let checked = option.getAttribute("value") == score;
option.setAttribute("aria-checked", checked ? "true" : "false");
}
}},
]
/*** Lights, camera, action! ***/
init();