MDL-58515 assignfeedback_editpdf: Fix comment tabbing and focus outline

rudivdme · Apr 17, 2017 · e082fbd · e082fbd
1 parent 0714bcb
commit e082fbd
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 9 deletions.
diff --git a/mod/assign/feedback/editpdf/styles.css b/mod/assign/feedback/editpdf/styles.css
@@ -314,6 +314,12 @@ ul.assignfeedback_editpdf_menu {
     min-height: 1.2em;
 }
 
+.assignfeedback_editpdf_widget .commentdrawable textarea:focus {
+    outline: thin dotted #333;
+    outline: 5px auto -webkit-focus-ring-color;
+    outline-offset: -2px;
+}
+
 .assignfeedback_editpdf_widget .commentdrawable {
     display: inline-block;
     z-index: 1;

diff --git a/.../build/moodle-assignfeedback_editpdf-editor/moodle-assignfeedback_editpdf-editor-debug.js b/.../build/moodle-assignfeedback_editpdf-editor/moodle-assignfeedback_editpdf-editor-debug.js
@@ -2562,6 +2562,7 @@ var COMMENT = function(editor, gradeid, pageno, x, y, width, colour, rawtext) {
         container.setAttribute('tabindex', '-1');
         label.setAttribute('tabindex', '0');
         node.setAttribute('tabindex', '-1');
+        menu.setAttribute('tabindex', '0');
 
         if (!this.editor.get('readonly')) {
             container.append(menu);
@@ -2681,6 +2682,8 @@ var COMMENT = function(editor, gradeid, pageno, x, y, width, colour, rawtext) {
             if (node.collapse.delay) {
                 node.collapse.delay.cancel();
             }
+            // Give comment a tabindex to prevent focus outline being suppressed.
+            node.setAttribute('tabindex', '0');
             // Expand comment and pass focus to it.
             node.expand();
             node.focus();
@@ -2697,7 +2700,10 @@ var COMMENT = function(editor, gradeid, pageno, x, y, width, colour, rawtext) {
             label.setAttribute('tabindex', '0');
         }, this);
 
-        // Always restore label tabindex when leaving.
+        // Always restore the default tabindex states when moving away.
+        node.on('blur', function() {
+            node.setAttribute('tabindex', '-1');
+        }, this);
         label.on('blur', function() {
             label.setAttribute('tabindex', '0');
         }, this);

diff --git a/...ui/build/moodle-assignfeedback_editpdf-editor/moodle-assignfeedback_editpdf-editor-min.js b/...ui/build/moodle-assignfeedback_editpdf-editor/moodle-assignfeedback_editpdf-editor-min.js
diff --git a/...df/yui/build/moodle-assignfeedback_editpdf-editor/moodle-assignfeedback_editpdf-editor.js b/...df/yui/build/moodle-assignfeedback_editpdf-editor/moodle-assignfeedback_editpdf-editor.js
@@ -2562,6 +2562,7 @@ var COMMENT = function(editor, gradeid, pageno, x, y, width, colour, rawtext) {
         container.setAttribute('tabindex', '-1');
         label.setAttribute('tabindex', '0');
         node.setAttribute('tabindex', '-1');
+        menu.setAttribute('tabindex', '0');
 
         if (!this.editor.get('readonly')) {
             container.append(menu);
@@ -2681,6 +2682,8 @@ var COMMENT = function(editor, gradeid, pageno, x, y, width, colour, rawtext) {
             if (node.collapse.delay) {
                 node.collapse.delay.cancel();
             }
+            // Give comment a tabindex to prevent focus outline being suppressed.
+            node.setAttribute('tabindex', '0');
             // Expand comment and pass focus to it.
             node.expand();
             node.focus();
@@ -2697,7 +2700,10 @@ var COMMENT = function(editor, gradeid, pageno, x, y, width, colour, rawtext) {
             label.setAttribute('tabindex', '0');
         }, this);
 
-        // Always restore label tabindex when leaving.
+        // Always restore the default tabindex states when moving away.
+        node.on('blur', function() {
+            node.setAttribute('tabindex', '-1');
+        }, this);
         label.on('blur', function() {
             label.setAttribute('tabindex', '0');
         }, this);

diff --git a/mod/assign/feedback/editpdf/yui/src/editor/js/comment.js b/mod/assign/feedback/editpdf/yui/src/editor/js/comment.js
@@ -185,6 +185,7 @@ var COMMENT = function(editor, gradeid, pageno, x, y, width, colour, rawtext) {
         container.setAttribute('tabindex', '-1');
         label.setAttribute('tabindex', '0');
         node.setAttribute('tabindex', '-1');
+        menu.setAttribute('tabindex', '0');
 
         if (!this.editor.get('readonly')) {
             container.append(menu);
@@ -304,6 +305,8 @@ var COMMENT = function(editor, gradeid, pageno, x, y, width, colour, rawtext) {
             if (node.collapse.delay) {
                 node.collapse.delay.cancel();
             }
+            // Give comment a tabindex to prevent focus outline being suppressed.
+            node.setAttribute('tabindex', '0');
             // Expand comment and pass focus to it.
             node.expand();
             node.focus();
@@ -320,7 +323,10 @@ var COMMENT = function(editor, gradeid, pageno, x, y, width, colour, rawtext) {
             label.setAttribute('tabindex', '0');
         }, this);
 
-        // Always restore label tabindex when leaving.
+        // Always restore the default tabindex states when moving away.
+        node.on('blur', function() {
+            node.setAttribute('tabindex', '-1');
+        }, this);
         label.on('blur', function() {
             label.setAttribute('tabindex', '0');
         }, this);