From 6c1bcb1044ea5812964b8012b649cd04de15f669 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Val=C3=A9rie=20Michaud?= <valerie.michaud@ad.econcordia.com>
Date: Tue, 11 Aug 2020 14:20:35 -0400
Subject: [PATCH 1/3] Initial commit Accessibility

---
 css/jquery-comments.css |  96 ++++++++++++++++++++++++-----------
 js/jquery-comments.js   | 110 ++++++++++++++++++++++++++--------------
 2 files changed, 138 insertions(+), 68 deletions(-)

diff --git a/css/jquery-comments.css b/css/jquery-comments.css
index fed5aba..7143702 100644
--- a/css/jquery-comments.css
+++ b/css/jquery-comments.css
@@ -10,6 +10,14 @@ http://viima.github.io/jquery-comments/*/
 	text-shadow: none;
 }
 
+.jquery-comments input,
+.jquery-comments select,
+.jquery-comments button,
+.jquery-comments textarea {
+	font-family: 'Arial';
+	font-size: 1em;
+}
+
 .jquery-comments a[href]:not(.tag) {
 	color: #2793e6;
 	text-decoration: none;
@@ -232,6 +240,8 @@ http://viima.github.io/jquery-comments/*/
 }
 
 .jquery-comments .textarea-wrapper .close {
+	position: absolute;
+	top: 0;
 	width: 1em;
 	height: 1em;
 }
@@ -259,7 +269,8 @@ http://viima.github.io/jquery-comments/*/
 	padding-top: .3em;
 }
 
-.jquery-comments .textarea-wrapper .control-row > span {
+.jquery-comments .textarea-wrapper .control-row > span,
+.jquery-comments .textarea-wrapper .control-row > button {
 	float: right;
 	line-height: 1.6em;
 	margin-top: .4em;
@@ -270,30 +281,31 @@ http://viima.github.io/jquery-comments/*/
 	opacity: .5;
 }
 
-.jquery-comments .textarea-wrapper .control-row > span:not(:first-child) {
+.jquery-comments .textarea-wrapper .control-row > *:not(:first-child) {
 	margin-right: .5em;
 }
 
-.jquery-comments .textarea-wrapper .control-row > span.enabled {
+.jquery-comments .textarea-wrapper .control-row > .enabled {
 	opacity: 1;
 	cursor: pointer;
 }
 
-.jquery-comments .textarea-wrapper .control-row > span:not(.enabled) {
+.jquery-comments .textarea-wrapper .control-row > span:not(.enabled),
+.jquery-comments .textarea-wrapper .control-row > button:not(.enabled) {
 	pointer-events: none;
 }
 
-.jquery-comments .textarea-wrapper .control-row > span.enabled:hover {
+.jquery-comments .textarea-wrapper .control-row > .enabled:hover {
 	opacity: .9;
 }
 
-.jquery-comments .textarea-wrapper .control-row > span.upload {
+.jquery-comments .textarea-wrapper .control-row > .upload {
 	position: relative;
 	overflow: hidden;
 	background-color: #999;
 }
 
-.jquery-comments ul.navigation {
+.jquery-comments .navigation {
 	clear: both;
 
 	color: #999;
@@ -303,14 +315,15 @@ http://viima.github.io/jquery-comments/*/
 	margin-bottom: 0.5em;
 }
 
-.jquery-comments ul.navigation .navigation-wrapper {
+.jquery-comments .navigation .navigation-wrapper {
 	position: relative;
 }
 
-.jquery-comments ul.navigation li {
+.jquery-comments .navigation button {
 	display: inline-block;
 	position: relative;
 	padding: 0 1em;
+	line-height: 2em;
 	cursor: pointer;
 	text-align: center;
 
@@ -320,12 +333,12 @@ http://viima.github.io/jquery-comments/*/
 	user-select: none;
 }
 
-.jquery-comments ul.navigation li.active,
-.jquery-comments ul.navigation li:hover {
+.jquery-comments .navigation button.active,
+.jquery-comments .navigation button:hover {
 	color: #000;
 }
 
-.jquery-comments ul.navigation li.active:after {
+.jquery-comments .navigation button.active:after {
 	content: " ";
 	display: block;
 	right: 0;
@@ -336,39 +349,39 @@ http://viima.github.io/jquery-comments/*/
 	left: 0;
 }
 
-.jquery-comments ul.navigation li[data-sort-key="attachments"] {
+.jquery-comments .navigation button[data-sort-key="attachments"] {
 	float: right;
 }
 
-.jquery-comments ul.navigation li[data-sort-key="attachments"] i {
+.jquery-comments .navigation button[data-sort-key="attachments"] i {
 	margin-right: 0.25em;
 }
 
-.jquery-comments ul.navigation .navigation-wrapper.responsive {
+.jquery-comments .navigation .navigation-wrapper.responsive {
 	display: none;
 }
 
 @media screen and (max-width: 600px) {
-	.jquery-comments ul.navigation .navigation-wrapper {
+	.jquery-comments .navigation .navigation-wrapper {
 		display: none;
 	}
-	.jquery-comments ul.navigation .navigation-wrapper.responsive {
+	.jquery-comments .navigation .navigation-wrapper.responsive {
 		display: inline;
 	}
 }
 
-.jquery-comments.responsive ul.navigation .navigation-wrapper {
+.jquery-comments.responsive .navigation .navigation-wrapper {
 	display: none;
 }
-.jquery-comments.responsive ul.navigation .navigation-wrapper.responsive {
+.jquery-comments.responsive .navigation .navigation-wrapper.responsive {
 	display: inline;
 }
 
-.jquery-comments ul.navigation .navigation-wrapper.responsive li.title {
+.jquery-comments .navigation .navigation-wrapper.responsive li.title {
 	padding: 0 1.5em;
 }
 
-.jquery-comments ul.navigation .navigation-wrapper.responsive li.title header:after {
+.jquery-comments .navigation .navigation-wrapper.responsive li.title header:after {
     display: inline-block;
     content: "";
     border-left: 0.3em solid rgba(0, 0, 0, 0) !important;
@@ -379,8 +392,8 @@ http://viima.github.io/jquery-comments/*/
     top: -0.1em;
 }
 
-.jquery-comments ul.navigation .navigation-wrapper.responsive li.title.active header:after,
-.jquery-comments ul.navigation .navigation-wrapper.responsive li.title:hover header:after {
+.jquery-comments .navigation .navigation-wrapper.responsive li.title.active header:after,
+.jquery-comments .navigation .navigation-wrapper.responsive li.title:hover header:after {
 	border-top-color: #000;
 }
 
@@ -524,6 +537,9 @@ http://viima.github.io/jquery-comments/*/
 }
 
 .jquery-comments ul.main li.comment .comment-header .name {
+	margin: 0 0.5rem 0 0;
+	font-size: 1em;
+	display: inline-block;
 	font-weight: bold;
 }
 
@@ -684,20 +700,21 @@ http://viima.github.io/jquery-comments/*/
 	font-size: 2.4em;
 }
 
-.jquery-comments ul.main li.comment .child-comments li.toggle-all {
-	padding-top: 0;
+.jquery-comments ul.main li.comment .toggle-all {
+	margin-left: calc(3.6em + .5em);
+	padding: .5em;
 }
 
-.jquery-comments ul.main li.comment .child-comments li.toggle-all span:first-child {
+.jquery-comments ul.main li.comment .toggle-all span:first-child {
 	vertical-align: middle;
 }
 
-.jquery-comments ul.main li.comment .child-comments li.toggle-all span:first-child:hover {
+.jquery-comments ul.main li.comment .toggle-all span:first-child:hover {
 	cursor: pointer;
 	text-decoration: underline;
 }
 
-.jquery-comments ul.main li.comment .child-comments li.toggle-all .caret {
+.jquery-comments ul.main li.comment .toggle-all .caret {
 	display: inline-block;
 	vertical-align: middle;
 	width: 0;
@@ -712,7 +729,7 @@ http://viima.github.io/jquery-comments/*/
 	border-right-color: rgba(0, 0, 0, 0);
 }
 
-.jquery-comments ul.main li.comment .child-comments li.toggle-all .caret.up {
+.jquery-comments ul.main li.comment .toggle-all .caret.up {
 	border-top-color: rgba(0, 0, 0, 0);
 	border-bottom-color: inherit;
 	margin-top: -.2em;
@@ -784,3 +801,24 @@ http://viima.github.io/jquery-comments/*/
 .jquery-comments.read-only .actions {
 	display: none;
 }
+
+/* Accessibility */
+input:focus, input:active,
+textarea:focus, textarea:active
+select:focus, select:active,
+button:focus, button:active,
+a:focus, a:active {
+	outline: 2px dotted #2793e6;
+}
+
+.sr-only {
+	position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}
\ No newline at end of file
diff --git a/js/jquery-comments.js b/js/jquery-comments.js
index 1814098..d4e1f9a 100644
--- a/js/jquery-comments.js
+++ b/js/jquery-comments.js
@@ -62,11 +62,11 @@
             'blur [contenteditable]' : 'checkEditableContentForChange',
 
             // Navigation
-            'click .navigation li[data-sort-key]' : 'navigationElementClicked',
+            'click .navigation button[data-sort-key]' : 'navigationElementClicked',
             'click .navigation li.title' : 'toggleNavigationDropdown',
 
             // Main comenting field
-            'click .commenting-field.main .textarea': 'showMainCommentingField',
+            'focus .commenting-field.main .textarea': 'showMainCommentingField',
             'click .commenting-field.main .close' : 'hideMainCommentingField',
 
             // All commenting fields
@@ -88,7 +88,7 @@
             'click li.comment .ping' : 'pingClicked',
 
             // Other
-            'click li.comment ul.child-comments .toggle-all': 'toggleReplies',
+            'click li.comment .toggle-all': 'toggleReplies',
             'click li.comment button.reply': 'replyButtonClicked',
             'click li.comment button.edit': 'editButtonClicked',
 
@@ -138,7 +138,7 @@
                 attachmentsText: 'Attachments',
                 sendText: 'Send',
                 replyText: 'Reply',
-                editText: 'Edit',
+                editText: 'Edit <span class="sr-only">this comment</span>',
                 editedText: 'Edited',
                 youText: 'You',
                 saveText: 'Save',
@@ -205,7 +205,15 @@
                 hashtagClicked: function(hashtag) {},
                 pingClicked: function(userId) {},
                 refresh: function() {},
-                timeFormatter: function(time) {return new Date(time).toLocaleDateString()}
+                timeFormatter: function(time) {return new Date(time).toLocaleDateString()},
+
+                // Accessibility
+                replyToText: 'Replied to ',
+                upvoteText: 'Upvote this comment',
+                downvoteText: 'Downvote this comment',
+                likedText: ' people upvoted this comment',
+                deleteAttachmentText: 'Delete this attachment',
+                closeButtonText: 'Clear this comment'
             }
         },
 
@@ -593,7 +601,7 @@
 
             var childCommentsEl = parentEl.find('.child-comments');
             var childComments = childCommentsEl.find('.comment').not('.hidden');
-            var toggleAllButton = childCommentsEl.find('li.toggle-all');
+            var toggleAllButton = parentEl.find('.toggle-all');
             childComments.removeClass('togglable-reply');
 
             // Select replies to be hidden
@@ -617,8 +625,10 @@
                 // Append button to toggle all replies if necessary
                 if(!toggleAllButton.length) {
 
-                    toggleAllButton = $('<li/>', {
-                        'class': 'toggle-all highlight-font-bold'
+                    toggleAllButton = $('<button/>', {
+                        'class': 'toggle-all highlight-font-bold',
+                        'aria-expanded': false,
+                        'aria-controls': childCommentsEl.attr('id'),
                     });
                     var toggleAllButtonText = $('<span/>', {
                         'class': 'text'
@@ -629,7 +639,7 @@
 
                     // Append toggle button to DOM
                     toggleAllButton.append(toggleAllButtonText).append(caret);
-                    childCommentsEl.prepend(toggleAllButton);
+                    toggleAllButton.insertBefore(childCommentsEl);
                 }
 
                 // Update the text of toggle all -button
@@ -706,10 +716,10 @@
         },
 
         showActiveSort: function() {
-            var activeElements = this.$el.find('.navigation li[data-sort-key="' + this.currentSortKey + '"]');
+            var activeElements = this.$el.find('.navigation button[data-sort-key="' + this.currentSortKey + '"]');
 
             // Indicate active sort
-            this.$el.find('.navigation li').removeClass('active');
+            this.$el.find('.navigation button').removeClass('active');
             activeElements.addClass('active');
 
             // Update title for dropdown
@@ -1123,7 +1133,7 @@
 
         toggleReplies: function(ev) {
             var el = $(ev.currentTarget);
-            el.siblings('.togglable-reply').toggleClass('visible');
+            el.siblings('.child-comments').find('.togglable-reply').toggleClass('visible');
             this.setToggleAllButtonText(el, true);
         },
 
@@ -1268,7 +1278,8 @@
             // Comments container
             var commentsContainer = $('<div/>', {
                 'class': 'data-container',
-                'data-container': 'comments'
+                'data-container': 'comments',
+                'aria-live': 'polite',
             });
             this.$el.append(commentsContainer);
 
@@ -1407,6 +1418,9 @@
             var textarea = $('<div/>', {
                 'class': 'textarea',
                 'data-placeholder': this.options.textFormatter(this.options.textareaPlaceholderText),
+                'role': 'textarea',
+                'aria-multiline': true,
+                'aria-label': this.options.textareaPlaceholderText,
                 contenteditable: true
             });
 
@@ -1420,7 +1434,7 @@
             // Save button
             var saveButtonClass = existingCommentId ? 'update' : 'send';
             var saveButtonText = existingCommentId ? this.options.textFormatter(this.options.saveText) : this.options.textFormatter(this.options.sendText);
-            var saveButton = $('<span/>', {
+            var saveButton = $('<button/>', {
                 'class': saveButtonClass + ' save highlight-background',
                 'text': saveButtonText
             });
@@ -1432,7 +1446,7 @@
 
                 // Delete button
                 var deleteButtonText = this.options.textFormatter(this.options.deleteText);
-                var deleteButton = $('<span/>', {
+                var deleteButton = $('<button/>', {
                     'class': 'delete enabled',
                     text: deleteButtonText
                 }).css('background-color', this.options.deleteButtonColor);
@@ -1451,8 +1465,13 @@
                 var uploadIcon = $('<i/>', {
                     'class': 'fa fa-paperclip'
                 });
+                var labelFileInput = $('<label/>', {
+                    'for': 'file-upload-main',
+                    'html': '<span class="sr-only">Upload an attachment to your comment</span>',
+                });
                 var fileInput = $('<input/>', {
                     'type': 'file',
+                    'id': 'file-upload-main',
                     'multiple': 'multiple',
                     'data-role': 'none' // Prevent jquery-mobile for adding classes
                 });
@@ -1461,7 +1480,7 @@
                     uploadIcon.css('background-image', 'url("'+this.options.uploadIconURL+'")');
                     uploadIcon.addClass('image');
                 }
-                uploadButton.append(uploadIcon).append(fileInput);
+                uploadButton.append(uploadIcon).append(labelFileInput).append(fileInput);
 
                 // Main upload button
                 var mainUploadButton = uploadButton.clone();
@@ -1488,7 +1507,7 @@
 
 
             // Populate the element
-            textareaWrapper.append(closeButton).append(textarea).append(controlRow);
+            textareaWrapper.append(textarea).append(closeButton).append(controlRow);
             commentingField.append(profilePicture).append(textareaWrapper);
 
 
@@ -1640,8 +1659,9 @@
         },
 
         createNavigationElement: function() {
-            var navigationEl = $('<ul/>', {
-                'class': 'navigation'
+            var navigationEl = $('<div/>', {
+                'class': 'navigation',
+                'role': 'navigation',
             });
             var navigationWrapper = $('<div/>', {
                 'class': 'navigation-wrapper'
@@ -1649,28 +1669,28 @@
             navigationEl.append(navigationWrapper);
 
             // Newest
-            var newest = $('<li/>', {
+            var newest = $('<button/>', {
                 text: this.options.textFormatter(this.options.newestText),
                 'data-sort-key': 'newest',
                 'data-container-name': 'comments'
             });
 
             // Oldest
-            var oldest = $('<li/>', {
+            var oldest = $('<button/>', {
                 text: this.options.textFormatter(this.options.oldestText),
                 'data-sort-key': 'oldest',
                 'data-container-name': 'comments'
             });
 
             // Popular
-            var popular = $('<li/>', {
+            var popular = $('<button/>', {
                 text: this.options.textFormatter(this.options.popularText),
                 'data-sort-key': 'popularity',
                 'data-container-name': 'comments'
             });
 
             // Attachments
-            var attachments = $('<li/>', {
+            var attachments = $('<button/>', {
                 text: this.options.textFormatter(this.options.attachmentsText),
                 'data-sort-key': 'attachments',
                 'data-container-name': 'attachments'
@@ -1740,8 +1760,9 @@
         },
 
         createCloseButton: function(className) {
-            var closeButton = $('<span/>', {
-                'class': className || 'close'
+            var closeButton = $('<button/>', {
+                'class': className || 'close',
+                'aria-label': this.options.closeButtonText,
             });
 
             var icon = $('<i/>', {
@@ -1770,7 +1791,8 @@
 
             // Child comments
             var childComments = $('<ul/>', {
-                'class': 'child-comments'
+                'class': 'child-comments',
+                'id': 'child-comments-' + commentModel.id
             });
 
             // Comment wrapper
@@ -1803,7 +1825,7 @@
             });
 
             // Name element
-            var nameEl = $('<span/>', {
+            var nameEl = $('<h2/>', {
                 'class': 'name',
                 'data-user-id': commentModel.creator,
                 'text': commentModel.createdByCurrentUser ? this.options.textFormatter(this.options.youText) : commentModel.fullname
@@ -1820,7 +1842,7 @@
                 if(parent.parent) {
                     var replyTo = $('<span/>', {
                         'class': 'reply-to',
-                        'text': parent.fullname,
+                        'html': '<span class="sr-only">' + this.options.replyToText + '</span>' + parent.fullname,
                         'data-user-id': parent.creator
                     });
 
@@ -1960,7 +1982,7 @@
 
             // Upvote icon
             var upvoteIcon = $('<i/>', {
-                'class': 'fa fa-thumbs-up'
+                'class': 'fa fa-thumbs-up',
             });
             if(this.options.upvoteIconURL.length) {
                 upvoteIcon.css('background-image', 'url("'+this.options.upvoteIconURL+'")');
@@ -1977,7 +1999,7 @@
             if(commentModel.createdByCurrentUser || this.options.currentUserIsAdmin) {
                 var editButton = $('<button/>', {
                     'class': 'action edit',
-                    text: this.options.textFormatter(this.options.editText)
+                    html: this.options.textFormatter(this.options.editText)
                 });
                 actions.append(editButton);
             }
@@ -2007,10 +2029,12 @@
             }
 
             // Upvotes
+            var upvoteButtonText = commentModel.userHasUpvoted ? this.options.downvoteText : this.options.upvoteText;
             var upvoteEl = $('<button/>', {
-                'class': 'action upvote' + (commentModel.userHasUpvoted ? ' highlight-font' : '')
+                'class': 'action upvote' + (commentModel.userHasUpvoted ? ' highlight-font' : ''),
+                'aria-label': upvoteButtonText,
             }).append($('<span/>', {
-                text: commentModel.upvoteCount,
+                html: commentModel.upvoteCount + '<span class="sr-only">' + this.options.likedText + '</span>',
                 'class': 'upvote-count'
             })).append(upvoteIcon);
 
@@ -2033,10 +2057,16 @@
         createAttachmentTagElement: function(attachment, deletable) {
             
             // Tag element
-            var attachmentTag = $('<a/>', {
-                'class': 'tag attachment',
-                'target': '_blank'
-            });
+            var attachmentTag;
+            if(!deletable) {
+                attachmentTag = $('<a/>', {
+                    'class': 'tag attachment',
+                });
+            } else {
+                attachmentTag = $('<span/>', {
+                    'class': 'tag attachment',
+                });
+            }
 
             // Set href attribute if not deletable
             if(!deletable) {
@@ -2083,6 +2113,7 @@
 
                 // Append close button
                 var closeButton = this.createCloseButton('delete');
+                closeButton.attr('aria-label', this.options.deleteAttachmentText)
                 attachmentTag.append(closeButton);
             }
 
@@ -2232,7 +2263,7 @@
 
             var showExpandingText = function() {
                 var text = self.options.textFormatter(self.options.viewAllRepliesText);
-                var replyCount = toggleAllButton.siblings('.comment').not('.hidden').length;
+                var replyCount = toggleAllButton.siblings('.child-comments').find('.comment').not('.hidden').length;
                 text = text.replace('__replyCount__', replyCount);
                 textContainer.text(text);
             };
@@ -2243,15 +2274,16 @@
 
                 // Toggle text
                 if(textContainer.text() == hideRepliesText) {
+                    toggleAllButton.attr('aria-expanded', false);
                     showExpandingText();
                 } else {
+                    toggleAllButton.attr('aria-expanded', true);
                     textContainer.text(hideRepliesText);
                 }
                 // Toggle direction of the caret
                 caret.toggleClass('up');
-
             } else {
-
+                toggleAllButton.attr('aria-expanded', false);
                 // Update text if necessary
                 if(textContainer.text() != hideRepliesText) {
                     showExpandingText();

From 40cf455b343ca945a888a0db5aab49cd629028c9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Val=C3=A9rie=20Michaud?= <valerie.michaud@ad.econcordia.com>
Date: Mon, 28 Sep 2020 14:18:56 -0400
Subject: [PATCH 2/3] Add more Accessibility after some reviews

---
 css/jquery-comments.css | 26 ++++++-----
 js/jquery-comments.js   | 96 ++++++++++++++++++++++++++++++++++-------
 2 files changed, 95 insertions(+), 27 deletions(-)

diff --git a/css/jquery-comments.css b/css/jquery-comments.css
index 7143702..bb3d12a 100644
--- a/css/jquery-comments.css
+++ b/css/jquery-comments.css
@@ -19,7 +19,7 @@ http://viima.github.io/jquery-comments/*/
 }
 
 .jquery-comments a[href]:not(.tag) {
-	color: #2793e6;
+	color: #0a6ab2;
 	text-decoration: none;
 }
 
@@ -98,7 +98,7 @@ http://viima.github.io/jquery-comments/*/
 
 .jquery-comments .tag:not(.deletable):hover {
 	background-color: #d8edf8;
-	border-color: #2793e6;
+	border-color: #0a6ab2;
 }
 
 .jquery-comments [contentEditable=true]:empty:not(:focus):before{
@@ -302,13 +302,17 @@ http://viima.github.io/jquery-comments/*/
 .jquery-comments .textarea-wrapper .control-row > .upload {
 	position: relative;
 	overflow: hidden;
-	background-color: #999;
+	background-color: #575757;
+}
+
+.jquery-comments .textarea-wrapper .control-row > .upload.focus {
+	outline: 2px dotted #0a6ab2;
 }
 
 .jquery-comments .navigation {
 	clear: both;
 
-	color: #999;
+	color: #575757;
 	border-bottom: 2px solid #CCC;
 	line-height: 2em;
 	font-size: 1em;
@@ -454,7 +458,7 @@ http://viima.github.io/jquery-comments/*/
 }
 
 .jquery-comments ul.dropdown li .email {
-	color: #999;
+	color: #575757;
 	font-size: 0.95em;
 	margin-top: 0.1em;
 }
@@ -544,7 +548,7 @@ http://viima.github.io/jquery-comments/*/
 }
 
 .jquery-comments ul.main li.comment .comment-header .reply-to {
-	color: #999;
+	color: #575757;
 	font-size: .8em;
 	font-weight: normal;
 	vertical-align: top;
@@ -555,7 +559,7 @@ http://viima.github.io/jquery-comments/*/
 }
 
 .jquery-comments ul.main li.comment .comment-header .new {
-	background: #2793e6;
+	background: #0a6ab2;
 	font-size: 0.8em;
 	padding: 0.2em 0.6em;
 	color: #fff;
@@ -585,7 +589,7 @@ http://viima.github.io/jquery-comments/*/
 	margin: 0;
 	font-size: .9em;
 	font-style: italic;
-	color: #999;
+	color: #575757;
 }
 
 .jquery-comments ul.main li.comment .wrapper .content time.edited:before {
@@ -620,7 +624,7 @@ http://viima.github.io/jquery-comments/*/
 }
 
 .jquery-comments ul.main li.comment .actions > * {
-	color: #999;
+	color: #575757;
 	font-weight: bold;
 }
 
@@ -787,7 +791,7 @@ http://viima.github.io/jquery-comments/*/
 }
 
 .jquery-comments .droppable-overlay .droppable-container .droppable.drag-over {
-	color: #999;
+	color: #575757;
 }
 
 .jquery-comments .droppable-overlay .droppable-container .droppable i {
@@ -808,7 +812,7 @@ textarea:focus, textarea:active
 select:focus, select:active,
 button:focus, button:active,
 a:focus, a:active {
-	outline: 2px dotted #2793e6;
+	outline: 2px dotted #0a6ab2;
 }
 
 .sr-only {
diff --git a/js/jquery-comments.js b/js/jquery-comments.js
index d4e1f9a..b8cd058 100644
--- a/js/jquery-comments.js
+++ b/js/jquery-comments.js
@@ -107,6 +107,10 @@
             'click .dropdown.autocomplete': 'stopPropagation',
             'mousedown .dropdown.autocomplete': 'stopPropagation',
             'touchstart .dropdown.autocomplete': 'stopPropagation',
+
+            // Accessibility
+            'focus #file-upload-main': 'handleFocusAttachment',
+            'blur #file-upload-main': 'handleBlurAttachment'
         },
 
 
@@ -167,8 +171,8 @@
                 defaultNavigationSortKey: 'newest',
 
                 // Colors
-                highlightColor: '#2793e6',
-                deleteButtonColor: '#C9302C',
+                highlightColor: '#0a6ab2',
+                deleteButtonColor: '#575757',
 
                 scrollContainer: this.$el,
                 roundProfilePictures: false,
@@ -211,9 +215,17 @@
                 replyToText: 'Replied to ',
                 upvoteText: 'Upvote this comment',
                 downvoteText: 'Downvote this comment',
+                commentUpvoted: 'The comment has been upvoted.',
+                commentDownvoted: 'The comment has been downvoted.',
                 likedText: ' people upvoted this comment',
                 deleteAttachmentText: 'Delete this attachment',
-                closeButtonText: 'Clear this comment'
+                closeButtonText: 'Clear this comment',
+                message: '.js-message',
+                commentAddedLoading: 'Your comment is being added.',
+                commentAdded: 'Your comment has been added.',
+                commentUpdated: 'Your comment has been updated.',
+                commentDeletedLoading: 'Your comment is being deleted.',
+                commentDeleted: 'Your comment has been deleted.',
             }
         },
 
@@ -719,8 +731,8 @@
             var activeElements = this.$el.find('.navigation button[data-sort-key="' + this.currentSortKey + '"]');
 
             // Indicate active sort
-            this.$el.find('.navigation button').removeClass('active');
-            activeElements.addClass('active');
+            this.$el.find('.navigation button').removeClass('active').attr('aria-selected', 'false');
+            activeElements.addClass('active').attr('aria-selected', 'true');
 
             // Update title for dropdown
             var titleEl = this.$el.find('.navigation .title');
@@ -851,7 +863,7 @@
             mainControlRow.hide();
             closeButton.hide();
             mainTextarea.parent().find('.upload.inline-button').show();
-            mainTextarea.blur();
+            mainTextarea.text('').focus();
         },
 
         increaseTextareaHeight: function(ev) {
@@ -951,6 +963,9 @@
             var sendButton = $(ev.currentTarget);
             var commentingField = sendButton.parents('.commenting-field').first();
 
+            // Accessibility, add retroaction message
+            $(self.options.message).text(self.options.commentAddedLoading);
+
             // Set button state to loading
             this.setButtonState(sendButton, false, true);
 
@@ -966,6 +981,9 @@
 
                 // Reset button state
                 self.setButtonState(sendButton, false, false);
+
+                // Accessibility, add retroaction message
+                $(self.options.message).text(self.options.commentAdded);
             };
 
             var error = function() {
@@ -996,6 +1014,7 @@
             var saveButton = $(ev.currentTarget);
             var commentingField = saveButton.parents('.commenting-field').first();
             var textarea = commentingField.find('.textarea');
+            var id = textarea.attr('data-comment');
 
             // Set button state to loading
             this.setButtonState(saveButton, false, true);
@@ -1031,6 +1050,10 @@
 
                 // Reset button state
                 self.setButtonState(saveButton, false, false);
+
+                // Accessibility, add retroaction message and put focus on the comment
+                $(self.options.message).text(self.options.commentUpdated);
+                $('li[data-id="' + id + '"]').focus().attr('tabindex', '-1');
             };
 
             var error = function() {
@@ -1053,6 +1076,9 @@
             // Set button state to loading
             this.setButtonState(deleteButton, false, true);
 
+            // Accessibility, add retroaction message and put focus on the comment
+            $(self.options.message).text(self.options.commentDeletedLoading);
+
             // Reverse mapping
             commentJSON = this.applyExternalMappings(commentJSON);
 
@@ -1062,6 +1088,10 @@
 
                 // Reset button state
                 self.setButtonState(deleteButton, false, false);
+
+                // Accessibility, add retroaction message and put focus on the comment
+                $(self.options.message).text(self.options.commentDeleted);
+                //$('li[data-id="' + id + '"]').focus().attr('tabindex', '-1');
             };
 
             var error = function() {
@@ -1114,10 +1144,16 @@
             var commentJSON = $.extend({}, commentModel);
             commentJSON = this.applyExternalMappings(commentJSON);
 
+            // Accessibility, get the right message
+            var message = commentModel.userHasUpvoted ? this.options.commentUpvoted : this.options.commentDownvoted;
+
             var success = function(commentJSON) {
                 var commentModel = self.createCommentModel(commentJSON);
                 self.updateCommentModel(commentModel);
                 self.reRenderUpvotes(commentModel.id);
+
+                // Accessibility, output the message to the screen reader
+                $(this.options.message).text(message);
             };
 
             var error = function() {
@@ -1126,6 +1162,9 @@
                 commentModel.userHasUpvoted = !commentModel.userHasUpvoted;
                 commentModel.upvoteCount = previousUpvoteCount;
                 self.reRenderUpvotes(commentModel.id);
+
+                // Accessibility, output the message to the screen reader
+                $(this.options.message).text(message);
             };
 
             this.options.upvoteComment(commentJSON, success, error);
@@ -1249,6 +1288,16 @@
             ev.stopPropagation();
         },
 
+        // Accessibility
+        handleFocusAttachment: function(ev) {
+            $(ev.target).parents('.upload').addClass('focus');
+        },
+
+        handleBlurAttachment: function(ev) {
+            $(ev.target).parents('.upload').removeClass('focus');
+        },
+
+
 
         // HTML elements
         // =============
@@ -1256,6 +1305,13 @@
         createHTML: function() {
             var self = this;
 
+            // Accesibility, add a div for messaging
+            var messageField = $('<div/>', {
+                'class': 'sr-only js-message',
+                'aria-live': 'polite'
+            });
+            this.$el.append(messageField);
+
             // Commenting field
             var mainCommentingField = this.createMainCommentingFieldElement();
             this.$el.append(mainCommentingField);
@@ -1279,7 +1335,7 @@
             var commentsContainer = $('<div/>', {
                 'class': 'data-container',
                 'data-container': 'comments',
-                'aria-live': 'polite',
+                //'aria-live': 'polite',
             });
             this.$el.append(commentsContainer);
 
@@ -1664,7 +1720,8 @@
                 'role': 'navigation',
             });
             var navigationWrapper = $('<div/>', {
-                'class': 'navigation-wrapper'
+                'class': 'navigation-wrapper',
+                'role': 'tablist',
             });
             navigationEl.append(navigationWrapper);
 
@@ -1672,28 +1729,36 @@
             var newest = $('<button/>', {
                 text: this.options.textFormatter(this.options.newestText),
                 'data-sort-key': 'newest',
-                'data-container-name': 'comments'
+                'data-container-name': 'comments',
+                'role': 'tab',
+                'aria-selected': 'false',
             });
 
             // Oldest
             var oldest = $('<button/>', {
                 text: this.options.textFormatter(this.options.oldestText),
                 'data-sort-key': 'oldest',
-                'data-container-name': 'comments'
+                'data-container-name': 'comments',
+                'role': 'tab',
+                'aria-selected': 'false',
             });
 
             // Popular
             var popular = $('<button/>', {
                 text: this.options.textFormatter(this.options.popularText),
                 'data-sort-key': 'popularity',
-                'data-container-name': 'comments'
+                'data-container-name': 'comments',
+                'role': 'tab',
+                'aria-selected': 'false',
             });
 
             // Attachments
             var attachments = $('<button/>', {
                 text: this.options.textFormatter(this.options.attachmentsText),
                 'data-sort-key': 'attachments',
-                'data-container-name': 'attachments'
+                'data-container-name': 'attachments',
+                'role': 'tab',
+                'aria-selected': 'false',
             });
 
             // Attachments icon
@@ -1830,7 +1895,7 @@
                 'data-user-id': commentModel.creator,
                 'text': commentModel.createdByCurrentUser ? this.options.textFormatter(this.options.youText) : commentModel.fullname
             });
-            commentHeaderEl.append(nameEl);
+            commentHeaderEl.append(nameEl).append(time);
 
 
             // Highlight admin names
@@ -2014,7 +2079,7 @@
             wrapper.append(content);
             wrapper.append(attachments);
             wrapper.append(actions);
-            commentWrapper.append(profilePicture).append(time).append(commentHeaderEl).append(wrapper);
+            commentWrapper.append(profilePicture).append(commentHeaderEl).append(wrapper);
             return commentWrapper;
         },
 
@@ -2032,9 +2097,8 @@
             var upvoteButtonText = commentModel.userHasUpvoted ? this.options.downvoteText : this.options.upvoteText;
             var upvoteEl = $('<button/>', {
                 'class': 'action upvote' + (commentModel.userHasUpvoted ? ' highlight-font' : ''),
-                'aria-label': upvoteButtonText,
             }).append($('<span/>', {
-                html: commentModel.upvoteCount + '<span class="sr-only">' + this.options.likedText + '</span>',
+                html: commentModel.upvoteCount + '<span class="sr-only">' + this.options.likedText + '. ' + upvoteButtonText + '</span>',
                 'class': 'upvote-count'
             })).append(upvoteIcon);
 

From 188a64c1962dcfe938d1bd5006fd8f4f93b6c720 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Val=C3=A9rie=20Michaud?= <valerie.michaud@ad.econcordia.com>
Date: Tue, 6 Oct 2020 11:29:03 -0400
Subject: [PATCH 3/3] Add focus on right elements after posting. Fix maximum
 stack issue on focus of main field

---
 js/jquery-comments.js | 34 ++++++++++++++++++++++++++++++----
 1 file changed, 30 insertions(+), 4 deletions(-)

diff --git a/js/jquery-comments.js b/js/jquery-comments.js
index b8cd058..73323ee 100644
--- a/js/jquery-comments.js
+++ b/js/jquery-comments.js
@@ -67,6 +67,7 @@
 
             // Main comenting field
             'focus .commenting-field.main .textarea': 'showMainCommentingField',
+            'click .commenting-field.main .textarea': 'showMainCommentingFieldClick',
             'click .commenting-field.main .close' : 'hideMainCommentingField',
 
             // All commenting fields
@@ -835,6 +836,14 @@
         },
 
         showMainCommentingField: function(ev) {
+            var mainTextarea = $(ev.currentTarget);
+            mainTextarea.siblings('.control-row').show();
+            mainTextarea.parent().find('.close').show();
+            mainTextarea.parent().find('.upload.inline-button').hide();
+            //mainTextarea.focus();
+        },
+
+        showMainCommentingFieldClick: function(ev) {
             var mainTextarea = $(ev.currentTarget);
             mainTextarea.siblings('.control-row').show();
             mainTextarea.parent().find('.close').show();
@@ -983,6 +992,7 @@
                 self.setButtonState(sendButton, false, false);
 
                 // Accessibility, add retroaction message
+                $(commentingField).find('.send').focus();
                 $(self.options.message).text(self.options.commentAdded);
             };
 
@@ -1053,7 +1063,7 @@
 
                 // Accessibility, add retroaction message and put focus on the comment
                 $(self.options.message).text(self.options.commentUpdated);
-                $('li[data-id="' + id + '"]').focus().attr('tabindex', '-1');
+                $('li[data-id="' + id + '"]').attr('tabindex', '1').focus();
             };
 
             var error = function() {
@@ -1072,6 +1082,10 @@
             var commentJSON =  $.extend({}, this.commentsById[commentEl.attr('data-id')]);
             var commentId = commentJSON.id;
             var parentId = commentJSON.parent;
+            var afterFocusId;
+
+            console.log('commentId', commentId)
+            console.log('parentId', parentId)
 
             // Set button state to loading
             this.setButtonState(deleteButton, false, true);
@@ -1083,6 +1097,15 @@
             commentJSON = this.applyExternalMappings(commentJSON);
 
             var success = function() {
+                if (!parentId) {
+                    if ($('li[data-id="' + commentId + '"]').prev().length > 0) {
+                        afterFocusId = $('li[data-id="' + commentId + '"]').prev().data('id');
+                    } else {
+                        afterFocusId = $('li[data-id="' + commentId + '"]').next().data('id');
+                    }
+                } else {
+                    afterFocusId = parentId;
+                }
                 self.removeComment(commentId);
                 if(parentId) self.reRenderCommentActionBar(parentId);
 
@@ -1091,7 +1114,7 @@
 
                 // Accessibility, add retroaction message and put focus on the comment
                 $(self.options.message).text(self.options.commentDeleted);
-                //$('li[data-id="' + id + '"]').focus().attr('tabindex', '-1');
+                $('li[data-id="' + afterFocusId + '"]').focus();
             };
 
             var error = function() {
@@ -1124,6 +1147,7 @@
         upvoteComment: function(ev) {
             var self = this;
             var commentEl = $(ev.currentTarget).parents('li.comment').first();
+            var id = $(commentEl).data('id');
             var commentModel = commentEl.data().model;
 
             // Check whether user upvoted the comment or revoked the upvote
@@ -1153,7 +1177,9 @@
                 self.reRenderUpvotes(commentModel.id);
 
                 // Accessibility, output the message to the screen reader
-                $(this.options.message).text(message);
+                $('li.comment[data-id="' + id +'"]').find('.action.upvote').first().focus();
+                
+                $(self.options.message).text(message);
             };
 
             var error = function() {
@@ -1164,7 +1190,7 @@
                 self.reRenderUpvotes(commentModel.id);
 
                 // Accessibility, output the message to the screen reader
-                $(this.options.message).text(message);
+                $(self.options.message).text(message);
             };
 
             this.options.upvoteComment(commentJSON, success, error);