tonyair/silverstripe-comments
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-comments synced 2024-10-22 11:05:49 +02:00
Code Issues Projects Releases Wiki Activity

Improve A11y of comment reply.

Browse Source 
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.
This commit is contained in:
Unknown 2018-02-01 16:27:30 +13:00
parent 4bf0a83ad3
commit ae59e82021
2 changed files with 19 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
javascript/CommentsInterface.js
View File

@ -79,20 +79,25 @@
* Toggle on/off reply form * Toggle on/off reply form
*/ */
$( ".comment-reply-link" ).entwine({ $( ".comment-reply-link" ).entwine({
onclick: function( e ) { onclick: function( e ) {
var allForms = $( ".comment-reply-form-holder" ), var allForms = $( ".comment-reply-form-holder" ),
formID = $( this ).prop('href').replace(/^[^#]*#/, '#'), formID = '#' + $( this ).attr('aria-controls');
form = $(formID).closest('.comment-reply-form-holder'); form = $(formID).closest('.comment-reply-form-holder');
// Prevent focus $(this).attr('aria-expanded', function (i, attr) {
e.preventDefault(); return attr == 'true' ? 'false' : 'true'
if(form.is(':visible')) { });
allForms.slideUp();
} else { // Prevent focus
allForms.not(form).slideUp(); e.preventDefault();
if(form.is(':visible')) {
allForms.slideUp();
} else {
allForms.not(form).slideUp();
form.slideDown(); form.slideDown();
} }
} }
}); });

4
templates/Includes/CommentsInterface_singlecomment.ss
View File

@ -33,7 +33,9 @@
<% end_if %> <% end_if %>
</div> </div>
<% if $RepliesEnabled && $canPostComment %> <% 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 %> <% end_if %>
</div> </div>
<% end_if %> <% end_if %>