From b58fdd013b6e362fe5e120decb5ab9f0cec00375 Mon Sep 17 00:00:00 2001 From: Keshav Biswa Date: Tue, 10 Aug 2021 14:50:14 +0530 Subject: [PATCH] Comment reaction button accessibility (#14256) * 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 --- .../initializeCommentsPage.js.erb | 9 +++- app/views/articles/_actions.html.erb | 2 +- app/views/comments/_comment_footer.html.erb | 7 ++- .../articleFlows/commentOnArticle.spec.js | 50 +++++++++++++++++++ 4 files changed, 64 insertions(+), 4 deletions(-) diff --git a/app/assets/javascripts/initializers/initializeCommentsPage.js.erb b/app/assets/javascripts/initializers/initializeCommentsPage.js.erb index 03f514ba9..3d187444e 100644 --- a/app/assets/javascripts/initializers/initializeCommentsPage.js.erb +++ b/app/assets/javascripts/initializers/initializeCommentsPage.js.erb @@ -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 = " 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) { diff --git a/app/views/articles/_actions.html.erb b/app/views/articles/_actions.html.erb index 7fc383129..2c50c8372 100644 --- a/app/views/articles/_actions.html.erb +++ b/app/views/articles/_actions.html.erb @@ -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" diff --git a/app/views/comments/_comment_footer.html.erb b/app/views/comments/_comment_footer.html.erb index 4a1a9d3a1..4b5fb0605 100644 --- a/app/views/comments/_comment_footer.html.erb +++ b/app/views/comments/_comment_footer.html.erb @@ -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: ") %> <%= comment.public_reactions_count if comment.public_reactions_count.positive? %> diff --git a/cypress/integration/seededFlows/articleFlows/commentOnArticle.spec.js b/cypress/integration/seededFlows/articleFlows/commentOnArticle.spec.js index 3b7a1f9fe..c16cf0c91 100644 --- a/cypress/integration/seededFlows/articleFlows/commentOnArticle.spec.js +++ b/cypress/integration/seededFlows/articleFlows/commentOnArticle.spec.js @@ -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'); + }); + }); + }); + }); });