maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Comment reaction button accessibility (#14256)

Browse source 
* added aria-pressed to comment buttons

* Added accessibility title

* updated set attribute and text content of aria-title

* removed 'x likes' from svg titles

* Added e2e tests to test behaviour of like toggle button

* changed reaction button's description to save instead of Saved

* Fixed cypress test
This commit is contained in:
Keshav Biswa 2021-08-10 14:50:14 +05:30 • committed by GitHub
parent 0a685e496e
commit b58fdd013b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 64 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
app/assets/javascripts/initializers/initializeCommentsPage.js.erb
View file

@ -43,6 +43,7 @@ function initializeCommentsPage() {
var buttForComment = document.getElementById('button-for-comment-' + reactions[i].reactable_id);
if (buttForComment) {
buttForComment.classList.add('reacted');
buttForComment.setAttribute('aria-pressed', 'true')
}
}
for (var i = 0; i < publicReactionCounts.length; i++) {
@ -51,7 +52,7 @@ function initializeCommentsPage() {
var reactionsCountWrapper = buttForComment.querySelector('.reactions-count');
var reactionsLabelWrapper = buttForComment.querySelector('.reactions-label');
if (publicReactionCounts[i].count > 0) {
if (publicReactionCounts[i].count > 1) {
reactionsLabelWrapper.innerHTML = "&nbsp;likes";
} else {
@ -65,6 +66,10 @@ function initializeCommentsPage() {
reactionsCountWrapper.classList.add("hidden");
reactionsCountWrapper.innerHTML = '0';
}
if (!buttForComment.classList.contains("reacted")) {
buttForComment.setAttribute('aria-pressed', 'false')
}
}
}
@ -112,6 +117,7 @@ function initializeCommentsPage() {
var reactionLabel = thisButt.querySelector('.reactions-label');
if (response.result === 'create') {
thisButt.classList.add('reacted');
thisButt.setAttribute('aria-pressed', 'true');
if (reactionCount) {
reactionCount.innerHTML = parseInt(reactionCount.innerHTML) + 1;
reactionCount.classList.remove("hidden");
@ -123,6 +129,7 @@ function initializeCommentsPage() {
}
} else {
thisButt.classList.remove('reacted');
thisButt.setAttribute('aria-pressed', 'false');
if (reactionCount) {
reactionCount.innerHTML = parseInt(reactionCount.innerHTML) - 1;
if(parseInt(reactionCount.innerHTML) == 0) {

2
app/views/articles/_actions.html.erb
View file

@ -21,7 +21,7 @@
<%= render partial: "articles/reaction_button",
locals: {
category: :readinglist,
description: "Saved",
description: "Save",
image_path: "save.svg",
image_active_path: "save-filled.svg",
aria_label: "Add to reading list"

7
app/views/comments/_comment_footer.html.erb
View file

@ -4,8 +4,11 @@
id="button-for-comment-<%= comment.id %>"
data-comment-id="<%= comment.id %>"
title="heart">
<%= inline_svg_tag("small-heart.svg", aria: true, class: "crayons-icon reaction-icon not-reacted", title: "Favorite heart outline button") %>
<%= inline_svg_tag("small-heart-filled.svg", aria: true, class: "crayons-icon reaction-icon--like reaction-icon reacted", title: "Favorite heart outline button") %>
<%= inline_svg_tag("small-heart.svg",
aria: true,
class: "crayons-icon reaction-icon not-reacted",
title: "Like comment:") %>
<%= inline_svg_tag("small-heart-filled.svg", aria: true, class: "crayons-icon reaction-icon--like reaction-icon reacted", title: "Like comment: ") %>
<span class="reactions-count">
<%= comment.public_reactions_count if comment.public_reactions_count.positive? %>
</span>

50
cypress/integration/seededFlows/articleFlows/commentOnArticle.spec.js
View file

@ -631,4 +631,54 @@ describe('Comment on articles', () => {
cy.findByRole('button', { name: /^Toggle dropdown menu$/i }).click();
cy.findByRole('link', { name: /^Edit this comment$/i }).should('not.exist');
});
it('should toggle aria-pressed button', () => {
cy.visitAndWaitForUserSideEffects('/admin_mcadmin/test-article-slug');
// SVG should exists with Like comment: as title
cy.findByRole('img', { name: 'Like comment:' });
cy.findByTestId('comments-container').within(() => {
cy.findByRole('button', { name: /^heart$/i })
.as('likeButton')
.should('exist')
.and('have.attr', 'aria-pressed', 'false')
.and('not.have.class', 'reacted');
cy.get('@likeButton').within(() => {
cy.get('span.reactions-count').should('have.text', '0');
cy.get('span.reactions-label').should(($span) => {
expect($span.text().trim()).equal('Like');
});
});
// React on comment
cy.get('@likeButton').click();
// Text should change and react class should be added along with aria-pressed
cy.get('@likeButton')
.and('have.attr', 'aria-pressed', 'true')
.and('have.class', 'reacted');
cy.get('@likeButton').within(() => {
cy.get('span.reactions-count').should('have.text', '1');
cy.get('span.reactions-label').should(($span) => {
expect($span.text().trim()).equal('like');
});
});
// Unreact on comment
cy.get('@likeButton').click();
// Text should change and react class should be added along with aria-pressed
cy.get('@likeButton')
.and('have.attr', 'aria-pressed', 'false')
.and('not.have.class', 'reacted');
cy.get('@likeButton').within(() => {
cy.get('span.reactions-count').should('have.text', '0');
cy.get('span.reactions-label').should(($span) => {
expect($span.text().trim()).equal('Like');
});
});
});
});
});