Skip to content

Commit c65b0f0

Browse files
oliverfosteroliverfoster
committedSep 23, 2021
Language picker support, schema updates, notify shadow click, minor bugs, a11y fixes
·
v2.10.3v1.0.0
1 parent 6ff8473 commit c65b0f0

12 files changed

+189
-23
lines changed
 

‎README.md

+8-8
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
# adapt-visua11y
2-
3-
**Visua11y** is an *extension* for the [Adapt framework](https://github.com/adaptlearning/adapt_framework).
1+
# adapt-visua11y
2+
3+
**Visua11y** is an *extension* for the [Adapt framework](https://github.com/adaptlearning/adapt_framework).
44
It provides visual accessibility improvements.
55

66
* Color profiles (achromatopsia, protanopia, deuteranopia, tritanopia, dyslexia)
@@ -20,8 +20,8 @@ It provides visual accessibility improvements.
2020
IE11 cannot apply filters. This means that images and videos will not be transformed in IE11.
2121

2222
----------------------------
23-
**Version number:** 0.0.1 <a href="https://community.adaptlearning.org/" target="_blank"><img src="https://github.com/adaptlearning/documentation/blob/master/04_wiki_assets/plug-ins/images/adapt-logo-mrgn-lft.jpg" alt="adapt learning logo" align="right"></a>
24-
**Framework versions:** 5+
25-
**Author / maintainer:** Adapt Core Team with [contributors](https://github.com/adaptlearning/adapt-contrib-tutor/graphs/contributors)
26-
**Accessibility support:** WAI AA
27-
**Cross-platform coverage:** Chrome, Chrome for Android, Firefox (ESR + latest version), Edge, IE11, Safari 12+13 for macOS/iOS/iPadOS, Opera
23+
**Version number:** 1.0.0 <a href="https://community.adaptlearning.org/" target="_blank"><img src="https://github.com/adaptlearning/documentation/blob/master/04_wiki_assets/plug-ins/images/adapt-logo-mrgn-lft.jpg" alt="adapt learning logo" align="right"></a>
24+
**Framework versions:** 5.15+
25+
**Author / maintainer:** Adapt Core Team with [contributors](https://github.com/adaptlearning/adapt-contrib-tutor/graphs/contributors)
26+
**Accessibility support:** WAI AA
27+
**Cross-platform coverage:** Chrome, Chrome for Android, Firefox (ESR + latest version), Edge, IE11, Safari 12+13 for macOS/iOS/iPadOS, Opera

‎bower.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "adapt-visua11y",
3-
"version": "0.0.2",
4-
"framework": ">=5",
3+
"version": "1.0.0",
4+
"framework": ">=5.15",
55
"homepage": "https://github.com/cgkineo/adapt-visua11y",
66
"issues": "https://github.com/cgkineo/adapt-visua11y/issues/new",
77
"extension" : "visua11y",

‎example.json

+11
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,16 @@
11
// course.json
22
"_visua11y": {
33
"_isEnabled": false,
4+
"description": "Use the controls below to customise your learning experience to your individual needs.",
5+
"_groups": {
6+
"visualDisplay": "Enhance visual display",
7+
"distractions": "Reduce distractions",
8+
"readability": "Readability"
9+
},
10+
"_preview": {
11+
"title": "Title",
12+
"character": "A"
13+
},
414
"_colorProfiles": {
515
"default": "Default",
616
"achromatopsia": "Greyscale (Achromatopsia)",
@@ -100,6 +110,7 @@
100110
"_default": 1
101111
},
102112
"_button": {
113+
"navigationAriaLabel": "Visual accessibility settings",
103114
"resetText": "Reset",
104115
"closeText": "Close"
105116
}

‎js/DEFAULTS.js

+1
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,7 @@ export default {
111111
"_default": 1
112112
},
113113
"_button": {
114+
"navigationAriaLabel": "Visual accessibility settings",
114115
"resetText": "Reset",
115116
"closeText": "Close"
116117
}

‎js/Visua11yButtonView.js

+29-2
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,12 @@ import notify from 'core/js/notify';
44

55
class AnimationsButtonView extends Backbone.View {
66

7+
attributes() {
8+
return {
9+
'aria-label': Adapt.visua11y.config._button.navigationAriaLabel
10+
};
11+
}
12+
713
tagName() {
814
return 'button';
915
}
@@ -19,23 +25,44 @@ class AnimationsButtonView extends Backbone.View {
1925
}
2026

2127
initialize() {
28+
this.onNotifyClosed = this.onNotifyClosed.bind(this);
29+
this.onNotifyClicked = this.onNotifyClicked.bind(this);
2230
this.render();
2331
}
2432

2533
render() {
2634
const template = Handlebars.templates.visua11yButton;
27-
const data = {};
35+
const data = {
36+
_globals: Adapt.course?.get('_globals')
37+
};
2838
this.$el.html(template(data));
2939
}
3040

3141
onClick(event) {
3242
if (event && event.preventDefault) event.preventDefault();
33-
Adapt.visua11y.settingsPrompt = notify.prompt({
43+
Adapt.visua11y.settingsPrompt = notify.popup({
3444
_view: new Visua11ySettingsView(),
3545
_classes: 'is-visua11ysettings',
3646
_showCloseButton: false
3747
});
3848
this.render();
49+
Adapt.visua11y.settingsPrompt.$el.on('click', this.onNotifyClicked);
50+
this.listenTo(Adapt, 'notify:closed', this.onNotifyClosed);
51+
}
52+
53+
onNotifyClicked(event) {
54+
const $target = $(event.target);
55+
const isChild = ($target.parents('.visua11ysettings__inner').length !== 0);
56+
const isContainer = $target.is('.visua11ysettings__inner');
57+
if (isChild || isContainer) return;
58+
Adapt.visua11y.settingsPrompt.closeNotify();
59+
}
60+
61+
onNotifyClosed(notify) {
62+
if (notify !== Adapt.visua11y.settingsPrompt) return;
63+
Adapt.visua11y.settingsPrompt.$el.off('click', this.onNotifyClicked);
64+
Adapt.visua11y.settingsPrompt = null;
65+
this.stopListening(Adapt, 'notify:closed', this.onNotifyClosed);
3966
}
4067

4168
}

‎js/Visua11ySettings.js

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import Adapt from 'core/js/adapt';
2+
import Backbone from 'backbone';
3+
import React from 'react';
4+
import ReactDOM from 'react-dom';
5+
import { templates } from 'core/js/reactHelpers';
6+
7+
export default class Visua11ySettings extends Backbone.View {
8+
9+
initialize() {
10+
this.render();
11+
this.listenTo(Adapt.visua11y, 'changed', this.render);
12+
}
13+
14+
render() {
15+
ReactDOM.render(<templates.Visua11ySettings {...Adapt.visua11y.config} />, this.el);
16+
}
17+
18+
}

‎js/adapt-visua11y.js

+24-2
Original file line numberDiff line numberDiff line change
@@ -34,11 +34,13 @@ class Visua11y extends Backbone.Controller {
3434

3535
initialize() {
3636
this.apply = _.debounce(this.apply.bind(this), 50);
37+
this.listenTo(Adapt, 'configModel:dataLoaded', this.onPreAdaptStart);
3738
this.listenTo(Adapt, 'adapt:start', this.onAdaptStart);
39+
this._adaptStarted = false;
3840
}
3941

4042
get config () {
41-
return _deepDefaults(Adapt.course.get('_visua11y'), DEFAULTS);
43+
return _deepDefaults((this._adaptStarted ? Adapt.course : Adapt.config).get('_visua11y'), DEFAULTS);
4244
}
4345

4446
get colorProfiles() {
@@ -187,14 +189,29 @@ class Visua11y extends Backbone.Controller {
187189
return output;
188190
}
189191

190-
onAdaptStart() {
192+
onPreAdaptStart() {
193+
// Language picker support
194+
if (!this.config?._isEnabled) return;
191195
this.measure();
192196
this.restore();
193197
this.setupNavigationButton();
194198
this.rules = CSSRule.getAllModifiable(this);
195199
this.apply();
196200
}
197201

202+
onAdaptStart() {
203+
this._adaptStarted = true;
204+
if (this.rules) {
205+
this.setupNavigationButton();
206+
return;
207+
}
208+
this.measure();
209+
this.restore();
210+
this.setupNavigationButton();
211+
this.rules = this.rules || CSSRule.getAllModifiable(this);
212+
this.apply();
213+
}
214+
198215
measure() {
199216
const computedStyle = window.getComputedStyle(document.querySelector('html'));
200217
this._originalFontSize = computedStyle.fontSize;
@@ -314,6 +331,11 @@ class Visua11y extends Backbone.Controller {
314331
this.save();
315332
this.rules.forEach(rule => rule.reset());
316333
const $html = $('html');
334+
const documentStyle = document.documentElement.style;
335+
documentStyle.setProperty('--visua11y-color-profile-url', 'url(assets/visua11y-filters.svg#default)');
336+
documentStyle.setProperty('--visua11y-invert', '0%');
337+
documentStyle.setProperty('--visua11y-contrast', '100%');
338+
documentStyle.setProperty('--visua11y-brightness', '100%');
317339
$html
318340
.removeAttr('data-color-profile')
319341
.removeAttr('data-color-inverted');

‎less/preview.less

+3-3
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
border-radius: 3px;
77
width: 15rem;
88
//? max-width set to prevent overrunning on mobile when _fontSize is _large
9-
//? max-width value based on 320px screensize (smallest use case)
9+
//? max-width value based on 320px screensize (smallest use case)
1010
max-width: 270px;
1111
margin-bottom: 1rem;
1212

@@ -33,7 +33,7 @@
3333

3434
&__text {
3535
width: 47.5%;
36-
36+
3737
.top {
3838
display: flex;
3939
}
@@ -73,4 +73,4 @@
7373
background-color: @btn-color;
7474
}
7575
}
76-
}
76+
}

‎less/visua11ySettings.less

+1-1
Original file line numberDiff line numberDiff line change
@@ -211,4 +211,4 @@
211211
color: @notify-btn-hover;
212212
}
213213
}
214-
}
214+
}

‎package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "adapt-visua11y",
3-
"version": "0.0.1",
4-
"framework": ">=5",
3+
"version": "1.0.0",
4+
"framework": ">=5.15",
55
"homepage": "https://github.com/cgkineo/adapt-visua11y",
66
"issues": "https://github.com/cgkineo/adapt-visua11y/issues/new",
77
"extension" : "visua11y",

‎properties.schema

+89
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,25 @@
66
"pluginLocations": {
77
"type": "object",
88
"properties": {
9+
"config": {
10+
"type": "object",
11+
"properties": {
12+
"_visua11y": {
13+
"type": "object",
14+
"required": false,
15+
"legend": "Visua11y",
16+
"properties": {
17+
"_isEnabled": {
18+
"type": "boolean",
19+
"required": false,
20+
"title": "Enable Visua11y for Language Picker",
21+
"inputType": "Checkbox",
22+
"validators": []
23+
}
24+
}
25+
}
26+
}
27+
},
928
"course": {
1029
"type": "object",
1130
"properties": {
@@ -21,6 +40,68 @@
2140
"inputType": "Checkbox",
2241
"validators": []
2342
},
43+
"description": {
44+
"type": "string",
45+
"required": false,
46+
"default": "Use the controls below to customise your learning experience to your individual needs.",
47+
"title": "Popup body text",
48+
"inputType": "Text",
49+
"validators": []
50+
},
51+
"_groups": {
52+
"type": "object",
53+
"required": false,
54+
"title": "Grouping title text",
55+
"properties": {
56+
"visualDisplay": {
57+
"type": "string",
58+
"required": false,
59+
"default": "Enhance visual display",
60+
"title": "Visual display",
61+
"inputType": "Text",
62+
"validators": []
63+
},
64+
"distractions": {
65+
"type": "string",
66+
"required": false,
67+
"default": "Reduce distractions",
68+
"title": "Distractions",
69+
"inputType": "Text",
70+
"validators": []
71+
},
72+
"readability": {
73+
"type": "string",
74+
"required": false,
75+
"default": "Readability",
76+
"title": "Readability",
77+
"inputType": "Text",
78+
"validators": []
79+
}
80+
}
81+
},
82+
"_preview": {
83+
"type": "object",
84+
"required": false,
85+
"title": "Preview text",
86+
"properties": {
87+
"title": {
88+
"type": "string",
89+
"required": false,
90+
"default": "Title",
91+
"title": "Title",
92+
"inputType": "Text",
93+
"validators": []
94+
},
95+
"character": {
96+
"type": "string",
97+
"required": false,
98+
"default": "A",
99+
"title": "Character",
100+
"inputType": "Text",
101+
"validators": []
102+
}
103+
}
104+
},
24105
"_colorProfiles": {
25106
"type": "object",
26107
"required": false,
@@ -693,6 +774,14 @@
693774
"required": false,
694775
"title": "Buttons",
695776
"properties": {
777+
"navigationAriaLabel": {
778+
"type": "string",
779+
"required": false,
780+
"default": "Visual accessibility settings",
781+
"title": "Navigation button alt text",
782+
"inputType": "Text",
783+
"validators": []
784+
},
696785
"resetText": {
697786
"type": "string",
698787
"required": false,

‎templates/visua11yButton.hbs

+1-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
1-
{{! make the _globals object in course.json available to this template}}
2-
{{import_globals}}
31
<span class="tooltip">
4-
{{_globals._accessibility._ariaLabels.progress}}
2+
{{_globals._accessibility._ariaLabels.visua11y}}
53
</span>
64
<div class="icon"></div>
75
{{{name}}}

0 commit comments

Comments
 (0)
Please sign in to comment.