Skip to content

Commit dad5e6f

Browse files
akoremanakoreman
authoredJun 20, 2023
fix: Improve ARIA labelling fold controls (#5205)
* fix gutter element error * tweak * tweak * add aria-expanded state to gutter fold controls * refactor * update translation files * translated string fix * change how we get foldrange * refactor * add fall-back * whitespace fix * add test * remove unused import * update spanish files * add warning missing translatations * Tweak warn message * change label wording * test fix
·
v1.39.1v1.23.0
1 parent 5bdb944 commit dad5e6f

File tree

7 files changed

+72
-15
lines changed

7 files changed

+72
-15
lines changed
 

‎demo/i18n.html

+6-4
Original file line numberDiff line numberDiff line change
@@ -72,9 +72,9 @@
7272
"Autocomplete suggestions": "Предложения автозаполнения",
7373

7474
"Cursor at row $0": "",
75-
"Unfold rows $0 to $1": "",
75+
"Toggle code folding, rows $0 through $1": "",
76+
"Toggle code folding, row $0": "",
7677
"Unfold code": "",
77-
"Fold at row $0": "",
7878
"Fold code": "",
7979
"Read annotations row $0": "",
8080

@@ -109,9 +109,9 @@
109109
"Autocomplete suggestions": "Ավտոմատ լրացման առաջարկներ",
110110

111111
"Cursor at row $0": "",
112-
"Unfold rows $0 to $1": "",
112+
"Toggle code folding, rows $0 through $1": "",
113+
"Toggle code folding, row $0": "",
113114
"Unfold code": "",
114-
"Fold at row $0": "",
115115
"Fold code": "",
116116
"Read annotations row $0": "",
117117

@@ -147,6 +147,8 @@
147147
"Unfold rows $0 to $1": "Desplegar las filas desde $0 hasta $1",
148148
"Unfold code": "Desplegar el codigo",
149149
"Fold at row $0": "Plegar en fila $0",
150+
"Toggle code folding, rows $0 through $1": "",
151+
"Toggle code folding, row $0": "",
150152
"Fold code": "Plegar el codigo",
151153
"Read annotations row $0": "Leer anotaciones fila $0",
152154
"error": "error",

‎src/keyboard/gutter_handler_test.js

+40
Original file line numberDiff line numberDiff line change
@@ -256,6 +256,46 @@ module.exports = {
256256
assert.equal(document.activeElement, lines.cells[1].element.childNodes[2]);
257257
done();
258258
}, 20);
259+
},"test: aria attributes mode with getFoldWidgetRange" : function() {
260+
var editor = this.editor;
261+
var value = "x {" + "\n".repeat(5) + "}";
262+
editor.session.setMode(new Mode());
263+
editor.setOption("enableKeyboardAccessibility", true);
264+
editor.setValue(value, -1);
265+
editor.renderer.$loop._flush();
266+
267+
var lines = editor.renderer.$gutterLayer.$lines;
268+
var toggler = lines.cells[0].element.children[1];
269+
270+
assert.equal(toggler.getAttribute("aria-label"), "Toggle code folding, rows 1 through 6");
271+
assert.equal(toggler.getAttribute("aria-expanded"), "true");
272+
assert.equal(toggler.getAttribute("title"), "Fold code");
273+
274+
editor.session.$toggleFoldWidget(0, {});
275+
editor.renderer.$loop._flush();
276+
277+
assert.equal(toggler.getAttribute("aria-label"), "Toggle code folding, rows 1 through 6");
278+
assert.equal(toggler.getAttribute("aria-expanded"), "false");
279+
assert.equal(toggler.getAttribute("title"), "Unfold code");
280+
},
281+
"test: aria attributes mode without getFoldWidgetRange" : function() {
282+
var editor = this.editor;
283+
var value = "x {" + "\n".repeat(5) + "}";
284+
var mode = new Mode();
285+
mode.foldingRules.getFoldWidgetRange = function(session, foldStyle, row) {
286+
return null;
287+
};
288+
editor.session.setMode(mode);
289+
editor.setOption("enableKeyboardAccessibility", true);
290+
editor.setValue(value, -1);
291+
editor.renderer.$loop._flush();
292+
293+
var lines = editor.renderer.$gutterLayer.$lines;
294+
var toggler = lines.cells[0].element.children[1];
295+
296+
assert.equal(toggler.getAttribute("aria-label"), "Toggle code folding, row 1");
297+
assert.equal(toggler.getAttribute("aria-expanded"), "true");
298+
assert.equal(toggler.getAttribute("title"), "Fold code");
259299
},"test: should signal keyboard event" : function(done) {
260300
var editor = this.editor;
261301
var value = "x {" + "\n".repeat(50) + "}\n";

‎src/layer/gutter.js

+17-5
Original file line numberDiff line numberDiff line change
@@ -326,7 +326,8 @@ class Gutter{
326326

327327
if (c) {
328328
var foldClass = "ace_fold-widget ace_" + c;
329-
if (c == "start" && row == foldStart && row < fold.end.row){
329+
var isClosedFold = c == "start" && row == foldStart && row < fold.end.row;
330+
if (isClosedFold){
330331
foldClass += " ace_closed";
331332
var foldAnnotationClass = '';
332333
var annotationInFold = false;
@@ -360,13 +361,24 @@ class Gutter{
360361
// Set a11y properties.
361362
foldWidget.setAttribute("role", "button");
362363
foldWidget.setAttribute("tabindex", "-1");
363-
var fold = session.getFoldLine(rowText - 1);
364-
if (fold) {
365-
foldWidget.setAttribute("aria-label", nls("Unfold rows $0 to $1", [rowText, fold.end.row + 1]));
364+
var foldRange = session.getFoldWidgetRange(row);
365+
366+
// getFoldWidgetRange is optional to be implemented by fold modes, if not available we fall-back.
367+
if (foldRange)
368+
foldWidget.setAttribute("aria-label", nls("Toggle code folding, rows $0 through $1", [foldRange.start.row + 1, foldRange.end.row + 1]));
369+
else {
370+
if (fold)
371+
foldWidget.setAttribute("aria-label", nls("Toggle code folding, rows $0 through $1", [fold.start.row + 1, fold.end.row + 1]));
372+
else
373+
foldWidget.setAttribute("aria-label", nls("Toggle code folding, row $0", [row + 1]));
374+
}
375+
376+
if (isClosedFold) {
377+
foldWidget.setAttribute("aria-expanded", "false");
366378
foldWidget.setAttribute("title", nls("Unfold code"));
367379
}
368380
else {
369-
foldWidget.setAttribute("aria-label", nls("Fold at row $0", [rowText]));
381+
foldWidget.setAttribute("aria-expanded", "true");
370382
foldWidget.setAttribute("title", nls("Fold code"));
371383
}
372384
} else {

‎src/lib/app_config.js

+3
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,9 @@ class AppConfig {
131131
}
132132

133133
nls(string, params) {
134+
if (messages && !messages[string]) {
135+
warn("No message found for '" + string + "' in the provided messages, falling back to default English message.");
136+
}
134137
var translated = messages && messages[string] || string;
135138
if (params) {
136139
translated = translated.replace(/\$(\$|[\d]+)/g, function(_, name) {

‎translations/am.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,9 @@
1919
"Search In Selection": "Փնտրել նշվածում",
2020
"$0 of $1": "$1-ից $0",
2121
"Cursor at row $0": "",
22-
"Unfold rows $0 to $1": "",
22+
"Toggle code folding, rows $0 through $1": "",
23+
"Toggle code folding, row $0": "",
2324
"Unfold code": "",
24-
"Fold at row $0": "",
2525
"Fold code": "",
2626
"Read annotations row $0": "",
2727
"error": "սխալ",

‎translations/es.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,9 @@
1919
"Search In Selection": "Buscar en la selección",
2020
"$0 of $1": "$0 de $1",
2121
"Cursor at row $0": "Cursor en row $0",
22-
"Unfold rows $0 to $1": "Desplegar las filas desde $0 hasta $1",
2322
"Unfold code": "Desplegar el codigo",
24-
"Fold at row $0": "Plegar en fila $0",
23+
"Toggle code folding, rows $0 through $1": "",
24+
"Toggle code folding, row $0": "",
2525
"Fold code": "Plegar el codigo",
2626
"Read annotations row $0": "Leer anotaciones fila $0",
2727
"error": "error",

‎translations/ru.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,9 @@
1919
"Search In Selection": "Искать в выделенном",
2020
"$0 of $1": "$0 из $1",
2121
"Cursor at row $0": "",
22-
"Unfold rows $0 to $1": "",
22+
"Toggle code folding, rows $0 through $1": "",
23+
"Toggle code folding, row $0": "",
2324
"Unfold code": "",
24-
"Fold at row $0": "",
2525
"Fold code": "",
2626
"Read annotations row $0": "",
2727
"error": "ошибка",

0 commit comments

Comments
 (0)
Please sign in to comment.