From ae59e82021a3b33f420c6847e8b52e9d83edcdb1 Mon Sep 17 00:00:00 2001
From: Unknown <benjaminwrighton@gmail.com>
Date: Thu, 1 Feb 2018 16:27:30 +1300
Subject: [PATCH] Improve A11y of comment reply.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Currently this is a link. Users will expect this link to take them to another part of the page or another page altogether.

There is no indication that it opens or closes an associated form on the same page, nor does it indicate the current state of the “reply to” form.

So, instead of a link, use a button. Add to that button an aria-controls attribute that references the id of the associated form’s container, and an aria-expanded attribute that indicates (true or false) the state of the associated form.
---
 javascript/CommentsInterface.js               | 27 +++++++++++--------
 .../CommentsInterface_singlecomment.ss        |  4 ++-
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/javascript/CommentsInterface.js b/javascript/CommentsInterface.js
index 255b517..ba37e0d 100755
--- a/javascript/CommentsInterface.js
+++ b/javascript/CommentsInterface.js
@@ -79,20 +79,25 @@
 		 * Toggle on/off reply form
 		 */
 		$( ".comment-reply-link" ).entwine({
-			onclick: function( e ) {
-				var allForms = $( ".comment-reply-form-holder" ),
-					formID = $( this ).prop('href').replace(/^[^#]*#/, '#'),
+		        onclick: function( e ) {
+					var allForms = $( ".comment-reply-form-holder" ),
+					formID = '#' + $( this ).attr('aria-controls');
 					form = $(formID).closest('.comment-reply-form-holder');
 
-				// Prevent focus
-				e.preventDefault();
-				if(form.is(':visible')) {
-					allForms.slideUp();
-				} else {
-					allForms.not(form).slideUp();
+					$(this).attr('aria-expanded', function (i, attr) {
+					    return attr == 'true' ? 'false' : 'true'
+					});
+
+					// Prevent focus
+					e.preventDefault();
+					
+					if(form.is(':visible')) {
+						allForms.slideUp();
+					} else {
+						allForms.not(form).slideUp();
 					form.slideDown();
-				}
-			}
+		      	}
+		    }
 		});
 
 
diff --git a/templates/Includes/CommentsInterface_singlecomment.ss b/templates/Includes/CommentsInterface_singlecomment.ss
index 0b185ed..7e34af6 100755
--- a/templates/Includes/CommentsInterface_singlecomment.ss
+++ b/templates/Includes/CommentsInterface_singlecomment.ss
@@ -33,7 +33,9 @@
 				<% end_if %>
 			</div>
 			<% if $RepliesEnabled && $canPostComment %>
-				<a class="comment-reply-link" href="#{$ReplyForm.FormName}"><% _t('CommentsInterface_singlecomment_ss.REPLYTO','Reply to') %> $AuthorName.XML</a>
+				<button class="comment-reply-link" type="button" aria-controls="$ReplyForm.FormName" aria-expanded="false">
++					<% _t('CommentsInterface_singlecomment_ss.REPLYTO','Reply to') %> $AuthorName.XML
++				</button>
 			<% end_if %>
 		</div>
 	<% end_if %>