Add tags plugin.

TNL-1924

lms/static/js/edxnotes/plugins/accessibility.js

@@ -131,19 +131,27 @@ define(['jquery', 'underscore', 'annotator_1.2.9'], function ($, _, Annotator) {
         },
 
         getEditorTabControls: function () {
-            var editor, editorControls, textArea, saveButton, cancelButton, tabControls = [];
+            var editor, editorControls, textArea, saveButton, cancelButton, tabControls = [], annotatorItems,
+                tagInput = null;
 
             // Editor elements
             editor = this.annotator.element.find('.annotator-editor');
             editorControls = editor.find('.annotator-controls');
-            textArea = editor.find('.annotator-listing')
-                             .find('.annotator-item')
-                             .first()
-                             .children('textarea');
+            annotatorItems = editor.find('.annotator-listing').find('.annotator-item');
+            textArea = annotatorItems.first().children('textarea');
             saveButton  = editorControls.find('.annotator-save');
             cancelButton = editorControls.find('.annotator-cancel');
 
-            tabControls.push(textArea, saveButton, cancelButton);
+            // If the tags plugin is enabled, add the ability to tab into it.
+            if (annotatorItems.length > 1) {
+                tagInput = annotatorItems.first().next().children('input');
+            }
+
+            tabControls.push(textArea);
+            if (tagInput){
+                tabControls.push(tagInput);
+            }
+            tabControls.push(saveButton, cancelButton);
 
             return tabControls;
         },

lms/static/js/edxnotes/views/notes_factory.js

@@ -6,7 +6,7 @@ define([
      'js/edxnotes/plugins/events', 'js/edxnotes/plugins/accessibility',
      'js/edxnotes/plugins/caret_navigation'
 ], function ($, _, Annotator, NotesLogger) {
-    var plugins = ['Auth', 'Store', 'Scroller', 'Events', 'Accessibility', 'CaretNavigation'],
+    var plugins = ['Auth', 'Store', 'Scroller', 'Events', 'Accessibility', 'CaretNavigation', 'Tags'],
         getOptions, setupPlugins, updateHeaders, getAnnotator;
 
     /**

lms/static/js/edxnotes/views/shim.js

@@ -58,6 +58,34 @@ define([
         return (timeToExpiry > 0) ? timeToExpiry : 0;
     };
 
+
+    Annotator.Plugin.Tags.prototype.updateField = _.compose(
+        function() {
+            // Add screen reader label for edit mode. Note that the id of the tags element will not always be "1".
+            // It depends on the number of annotatable components on the page.
+            var tagsField = $("li.annotator-item >input", this.annotator.editor.element).attr('id');
+            if ($("label.sr[for='"+ tagsField + "']", this.annotator.editor.element).length === 0) {
+                $('<label class="sr" for='+ tagsField +'>' + _t('Tags (space-separated)') + '</label>').insertBefore(
+                    $('#'+tagsField, this.annotator.editor.element)
+                );
+            }
+            return this;
+        },
+        Annotator.Plugin.Tags.prototype.updateField
+    );
+
+    Annotator.Plugin.Tags.prototype.updateViewer = _.compose(
+        function() {
+            // Add ARIA information for viewing mode.
+            $('div.annotator-tags', this.wrapper).attr({
+                'role': 'region',
+                'aria-label': 'tags'
+            });
+            return this;
+        },
+        Annotator.Plugin.Tags.prototype.updateViewer
+    );
+
     /**
      * Modifies Annotator.highlightRange to add "tabindex=0" and role="link"
      * attributes to the <span class="annotator-hl"> markup that encloses the
@@ -186,25 +214,24 @@ define([
         '</div>'
     ].join('');
 
-    /**
-     * Modifies Annotator._setupEditor to add a label for textarea#annotator-field-0.
-     **/
-    Annotator.prototype._setupEditor = _.compose(
-        function () {
-            $('<label class="sr" for="annotator-field-0">Edit note</label>').insertBefore(
-                $('#annotator-field-0', this.wrapper)
-            );
-            return this;
-        },
-        Annotator.prototype._setupEditor
-    );
 
     /**
      * Modifies Annotator.Editor.show, in the case of a keydown event, to remove
      * focus from Save button and put it on form.annotator-widget instead.
+     *
+     * Also add a sr label for note textarea.
      **/
     Annotator.Editor.prototype.show = _.compose(
         function (event) {
+            // Add screen reader label for the note area. Note that the id of the tags element will not always be "0".
+            // It depends on the number of annotatable components on the page.
+            var noteField = $("li.annotator-item >textarea", this.element).attr('id');
+            if ($("label.sr[for='"+ noteField + "']", this.element).length === 0) {
+                $('<label class="sr" for='+ noteField +'>' + _t('Note') + '</label>').insertBefore(
+                    $('#'+noteField, this.element)
+                );
+            }
+
             if (event.type === 'keydown') {
                 this.element.find('.annotator-save').removeClass(this.classes.focus);
                 this.element.find('form.annotator-widget').focus();