From 3b870087f05b5d5b438cd891125a2eaa7d967407 Mon Sep 17 00:00:00 2001 From: Aaron Cannon Date: Wed, 18 Dec 2013 14:54:01 -0700 Subject: [PATCH] TinyMCE: Improved the accessibility of the equation editor. Fixes CNVS-6709 Test plan: - Open the equation editor from within TinyMCE. - Using the keyboard only, confirm that all controls are reachable and usable in both the simple and advanced views. - Using a screen reader: - Notice the hidden text recommending that screen reader users use the advanced view for improved accessibility. - Confirm that the advanced view is reachable and usable. - Confirm that the tabs are treated like tabs. - In the advanced view, confirm that each of the buttons within the toolbar has a label which says what will be inserted when pressing the button. - Confirm that the formula entry edit field in the advanced view has a meaningful label. Change-Id: Ic71124b443494cdceda5792892048fdd3b6b405e Reviewed-on: https://gerrit.instructure.com/27676 Tested-by: Jenkins Reviewed-by: Zach Pendleton QA-Review: Matt Fairbourn Product-Review: Aaron Cannon --- .../views/tinymce/EquationEditorView.coffee | 7 +- .../views/tinymce/EquationToolbarView.coffee | 24 +- .../jst/tinymce/EquationEditorView.handlebars | 14 +- .../tinymce/EquationToolbarView.handlebars | 498 ++++++++++-------- public/javascripts/mathquill.js | 40 +- 5 files changed, 341 insertions(+), 242 deletions(-) diff --git a/app/coffeescripts/views/tinymce/EquationEditorView.coffee b/app/coffeescripts/views/tinymce/EquationEditorView.coffee index 4103873f2eb..9ebc68c8956 100644 --- a/app/coffeescripts/views/tinymce/EquationEditorView.coffee +++ b/app/coffeescripts/views/tinymce/EquationEditorView.coffee @@ -102,7 +102,8 @@ define [ else if view == 'mathjax' return @$mathjaxEditor.val() - toggleView: => + toggleView: (e) => + e.preventDefault() view = @$el.data('view') equation = @getEquation() @$mathjaxMessage.empty() @@ -112,9 +113,13 @@ define [ if view == 'mathquill' @$mathjaxView.hide() @$mathquillView.show() + setTimeout( => + @$mathquillView.find('.mathquill-tab-bar li.mathquill-tab-selected a').focus() + , 200) else if view == 'mathjax' @$mathquillView.hide() @$mathjaxView.show() + @$mathjaxView.find('.mathquill-tab-bar li.mathquill-tab-selected a').focus() if !@renderEquation(view, equation) @setView('mathjax', equation) diff --git a/app/coffeescripts/views/tinymce/EquationToolbarView.coffee b/app/coffeescripts/views/tinymce/EquationToolbarView.coffee index 64215b7ce77..511bad72bb4 100644 --- a/app/coffeescripts/views/tinymce/EquationToolbarView.coffee +++ b/app/coffeescripts/views/tinymce/EquationToolbarView.coffee @@ -18,12 +18,29 @@ define [ @cacheEls() @$toolbar.append(@template()) - $('#mathjax-view .mathquill-tab-bar li a').click( -> + $tabLinks = $('#mathjax-view .mathquill-tab-bar li a') + $tabLinks.click( (e) -> + e.preventDefault() $('#mathjax-view .mathquill-tab-bar li').removeClass('mathquill-tab-selected') + $tabLinks.attr('aria-selected', 'false').attr('tabindex', '-1') $('#mathjax-view .mathquill-tab-pane').removeClass('mathquill-tab-pane-selected') $(this).parent().addClass('mathquill-tab-selected') + $(this).attr('aria-selected', 'true').attr('tabindex', 0).focus() $(this.href.replace(/.*#/, '#')).addClass('mathquill-tab-pane-selected') + ).keydown((e) -> + switch e.keyCode + when 37 then direction = 'l' + when 39 then direction = 'r' + else return true + e.preventDefault() + listIndex = $tabLinks.index this + # Don't fall off the right end of the list. + # No need to worry about falling off the left end, as .get accepts negative indexes. + if listIndex is ($tabLinks.length-1) and direction is 'r' then listIndex = -1 + if direction is 'r' then listIndex++ else listIndex-- + $($tabLinks.get(listIndex)).focus().click() ) + $('#mathjax-view .mathquill-tab-bar li:first-child').addClass('mathquill-tab-selected') $.getScript("https://c328740.ssl.cf1.rackcdn.com/mathjax/2.1-latest/MathJax.js?config=TeX-AMS_HTML.js", @addMathJaxEvents) @@ -37,11 +54,11 @@ define [ $('#mathjax-view a.mathquill-rendered-math').mousedown( (e) -> e.stopPropagation() - ).click( -> + ).click( (e) -> + e.preventDefault() text = this.title + ' ' field = document.getElementById('mathjax-editor') if document.selection - field.focus() sel = document.selection.createRange() sel.text = text else if field.selectionStart || field.selectionStart == '0' @@ -51,6 +68,7 @@ define [ field.value = val.substring(0, s) + text + val.substring(e, val.length) else field.value += text + $(field).focus() renderPreview() ) diff --git a/app/views/jst/tinymce/EquationEditorView.handlebars b/app/views/jst/tinymce/EquationEditorView.handlebars index acb0afb8367..5f34d08b8ac 100644 --- a/app/views/jst/tinymce/EquationEditorView.handlebars +++ b/app/views/jst/tinymce/EquationEditorView.handlebars @@ -1,8 +1,14 @@
+
- + {{#t "#editor.switch_to_mathquill"}}Switch View to Advanced{{/t}}
@@ -13,11 +19,13 @@
- + {{#t "#editor.switch_to_mathjax"}}Switch View to Basic{{/t}}
-
diff --git a/app/views/jst/tinymce/EquationToolbarView.handlebars b/app/views/jst/tinymce/EquationToolbarView.handlebars index ed13e12af78..f51a2cebb1a 100644 --- a/app/views/jst/tinymce/EquationToolbarView.handlebars +++ b/app/views/jst/tinymce/EquationToolbarView.handlebars @@ -1,477 +1,519 @@ -