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
ajaxorg · Jun 20, 2023 · dad5e6f · dad5e6f
1 parent 5bdb944
commit dad5e6f
Show file tree

Hide file tree

Showing 7 changed files with 72 additions and 15 deletions.
diff --git a/demo/i18n.html b/demo/i18n.html
@@ -72,9 +72,9 @@
         "Autocomplete suggestions": "Предложения автозаполнения",
 
         "Cursor at row $0": "",
-        "Unfold rows $0 to $1": "",
+        "Toggle code folding, rows $0 through $1": "",
+        "Toggle code folding, row $0": "",
         "Unfold code": "",
-        "Fold at row $0": "",
         "Fold code": "",
         "Read annotations row $0": "",
 
@@ -109,9 +109,9 @@
         "Autocomplete suggestions": "Ավտոմատ լրացման առաջարկներ",
 
         "Cursor at row $0": "",
-        "Unfold rows $0 to $1": "",
+        "Toggle code folding, rows $0 through $1": "",
+        "Toggle code folding, row $0": "",
         "Unfold code": "",
-        "Fold at row $0": "",
         "Fold code": "",
         "Read annotations row $0": "",
 
@@ -147,6 +147,8 @@
         "Unfold rows $0 to $1": "Desplegar las filas desde $0 hasta $1",
         "Unfold code": "Desplegar el codigo",
         "Fold at row $0": "Plegar en fila $0",
+        "Toggle code folding, rows $0 through $1": "",
+        "Toggle code folding, row $0": "",
         "Fold code": "Plegar el codigo",
         "Read annotations row $0": "Leer anotaciones fila $0",
         "error": "error",

diff --git a/src/keyboard/gutter_handler_test.js b/src/keyboard/gutter_handler_test.js
@@ -256,6 +256,46 @@ module.exports = {
             assert.equal(document.activeElement, lines.cells[1].element.childNodes[2]);
             done();
         }, 20);
+    },"test: aria attributes mode with getFoldWidgetRange" : function() {
+        var editor = this.editor;
+        var value = "x {" + "\n".repeat(5) + "}";
+        editor.session.setMode(new Mode());
+        editor.setOption("enableKeyboardAccessibility", true);
+        editor.setValue(value, -1);
+        editor.renderer.$loop._flush();
+
+        var lines = editor.renderer.$gutterLayer.$lines;
+        var toggler = lines.cells[0].element.children[1];
+
+        assert.equal(toggler.getAttribute("aria-label"), "Toggle code folding, rows 1 through 6");
+        assert.equal(toggler.getAttribute("aria-expanded"), "true");
+        assert.equal(toggler.getAttribute("title"), "Fold code");
+
+        editor.session.$toggleFoldWidget(0, {});
+        editor.renderer.$loop._flush();
+
+        assert.equal(toggler.getAttribute("aria-label"), "Toggle code folding, rows 1 through 6");
+        assert.equal(toggler.getAttribute("aria-expanded"), "false");
+        assert.equal(toggler.getAttribute("title"), "Unfold code");    
+    },
+    "test: aria attributes mode without getFoldWidgetRange" : function() {
+        var editor = this.editor;
+        var value = "x {" + "\n".repeat(5) + "}";
+        var mode = new Mode();
+        mode.foldingRules.getFoldWidgetRange = function(session, foldStyle, row) {
+            return null;
+        };
+        editor.session.setMode(mode);
+        editor.setOption("enableKeyboardAccessibility", true);
+        editor.setValue(value, -1);
+        editor.renderer.$loop._flush();
+
+        var lines = editor.renderer.$gutterLayer.$lines;
+        var toggler = lines.cells[0].element.children[1];
+
+        assert.equal(toggler.getAttribute("aria-label"), "Toggle code folding, row 1");
+        assert.equal(toggler.getAttribute("aria-expanded"), "true");
+        assert.equal(toggler.getAttribute("title"), "Fold code"); 
     },"test: should signal keyboard event" : function(done) {
         var editor = this.editor;
         var value = "x {" + "\n".repeat(50) + "}\n";

diff --git a/src/layer/gutter.js b/src/layer/gutter.js
@@ -326,7 +326,8 @@ class Gutter{
 
         if (c) {
             var foldClass = "ace_fold-widget ace_" + c;
-            if (c == "start" && row == foldStart && row < fold.end.row){
+            var isClosedFold = c == "start" && row == foldStart && row < fold.end.row;
+            if (isClosedFold){
                 foldClass += " ace_closed";
                 var foldAnnotationClass = '';
                 var annotationInFold = false;
@@ -360,13 +361,24 @@ class Gutter{
             // Set a11y properties.
             foldWidget.setAttribute("role", "button");
             foldWidget.setAttribute("tabindex", "-1");
-            var fold = session.getFoldLine(rowText - 1);
-            if (fold) {
-                foldWidget.setAttribute("aria-label", nls("Unfold rows $0 to $1", [rowText, fold.end.row + 1]));
+            var foldRange = session.getFoldWidgetRange(row);
+
+            // getFoldWidgetRange is optional to be implemented by fold modes, if not available we fall-back.
+            if (foldRange)
+                foldWidget.setAttribute("aria-label", nls("Toggle code folding, rows $0 through $1", [foldRange.start.row + 1, foldRange.end.row + 1]));
+            else {
+                if (fold)
+                    foldWidget.setAttribute("aria-label", nls("Toggle code folding, rows $0 through $1", [fold.start.row + 1, fold.end.row + 1]));
+                else
+                    foldWidget.setAttribute("aria-label", nls("Toggle code folding, row $0", [row + 1]));
+            }
+
+            if (isClosedFold) {
+                foldWidget.setAttribute("aria-expanded", "false");
                 foldWidget.setAttribute("title", nls("Unfold code"));
             }
             else {
-                foldWidget.setAttribute("aria-label", nls("Fold at row $0", [rowText]));
+                foldWidget.setAttribute("aria-expanded", "true");
                 foldWidget.setAttribute("title", nls("Fold code"));
             }
         } else {

diff --git a/src/lib/app_config.js b/src/lib/app_config.js
@@ -131,6 +131,9 @@ class AppConfig {
     }
 
     nls(string, params) {
+        if (messages && !messages[string])  {
+            warn("No message found for '" + string + "' in the provided messages, falling back to default English message.");
+        }
         var translated = messages && messages[string] || string;
         if (params) {
             translated = translated.replace(/\$(\$|[\d]+)/g, function(_, name) {

diff --git a/translations/am.json b/translations/am.json
@@ -19,9 +19,9 @@
     "Search In Selection": "Փնտրել նշվածում",
     "$0 of $1": "$1-ից $0",
     "Cursor at row $0": "",
-    "Unfold rows $0 to $1": "",
+    "Toggle code folding, rows $0 through $1": "",
+    "Toggle code folding, row $0": "",
     "Unfold code": "",
-    "Fold at row $0": "",
     "Fold code": "",
     "Read annotations row $0": "",
     "error": "սխալ",

diff --git a/translations/es.json b/translations/es.json
@@ -19,9 +19,9 @@
     "Search In Selection": "Buscar en la selección",
     "$0 of $1": "$0 de $1",
     "Cursor at row $0": "Cursor en row $0",
-    "Unfold rows $0 to $1": "Desplegar las filas desde $0 hasta $1",
     "Unfold code": "Desplegar el codigo",
-    "Fold at row $0": "Plegar en fila $0",
+    "Toggle code folding, rows $0 through $1": "",
+    "Toggle code folding, row $0": "",
     "Fold code": "Plegar el codigo",
     "Read annotations row $0": "Leer anotaciones fila $0",
     "error": "error",

diff --git a/translations/ru.json b/translations/ru.json
@@ -19,9 +19,9 @@
     "Search In Selection": "Искать в выделенном",
     "$0 of $1": "$0 из $1",
     "Cursor at row $0": "",
-    "Unfold rows $0 to $1": "",
+    "Toggle code folding, rows $0 through $1": "",
+    "Toggle code folding, row $0": "",
     "Unfold code": "",
-    "Fold at row $0": "",
     "Fold code": "",
     "Read annotations row $0": "",
     "error": "ошибка",