From 998d39cd4cfffed93a9ee5b00d10879808c53d1c Mon Sep 17 00:00:00 2001 From: Jhonatan Hidalgo <108900469+jhonatan-kmt@users.noreply.github.com> Date: Thu, 28 Jul 2022 14:17:46 -0500 Subject: [PATCH] Focus comment box when entering by "comments" button from home feed (#18132) --- .../javascripts/utilities/buildArticleHTML.js | 7 +------ .../__tests__/__snapshots__/Article.test.jsx.snap | 4 ++-- .../articles/components/CommentsCount.jsx | 2 +- app/javascript/packs/articlePage.jsx | 6 ++++++ app/views/articles/_single_story.html.erb | 6 +++--- config/locales/views/articles/en.yml | 2 +- config/locales/views/articles/fr.yml | 2 +- .../homeFeedFlows/feedNavigation.spec.js | 14 ++++++++++++++ 8 files changed, 29 insertions(+), 14 deletions(-) diff --git a/app/assets/javascripts/utilities/buildArticleHTML.js b/app/assets/javascripts/utilities/buildArticleHTML.js index 13eaec9a2..0f877fb28 100644 --- a/app/assets/javascripts/utilities/buildArticleHTML.js +++ b/app/assets/javascripts/utilities/buildArticleHTML.js @@ -88,12 +88,7 @@ function buildArticleHTML(article, currentUserId = null) { commentsCount = article.comments_count || '0'; } - var commentsAriaLabelText = - ' aria-label="Comments for post ' + - article.title + - ' (' + - commentsCount + - ')" '; + var commentsAriaLabelText = `aria-label="Add a comment to post - ${article.title}"`; if (article.class_name !== 'User') { commentsDisplay = diff --git a/app/javascript/articles/__tests__/__snapshots__/Article.test.jsx.snap b/app/javascript/articles/__tests__/__snapshots__/Article.test.jsx.snap index e1c1427ee..0ca509625 100644 --- a/app/javascript/articles/__tests__/__snapshots__/Article.test.jsx.snap +++ b/app/javascript/articles/__tests__/__snapshots__/Article.test.jsx.snap @@ -207,7 +207,7 @@ Object { class="crayons-story__details" > { ); - const commentsAriaLabelText = `Comments for post ${articleTitle} (${count})`; + const commentsAriaLabelText = `Add a comment to post - ${articleTitle}`; if (count > 0) { return ( diff --git a/app/javascript/packs/articlePage.jsx b/app/javascript/packs/articlePage.jsx index 3b6610e95..45d4efe7b 100644 --- a/app/javascript/packs/articlePage.jsx +++ b/app/javascript/packs/articlePage.jsx @@ -101,6 +101,12 @@ function trackCommentsSectionDisplayed() { ahoy.track('Comment section viewable', { page: location.href }); observer.disconnect(); } + if (location.hash === '#comments') { + //handle focus event on text area + const element = document.getElementById('text-area'); + const event = new FocusEvent('focus'); + element.dispatchEvent(event); + } }); }; diff --git a/app/views/articles/_single_story.html.erb b/app/views/articles/_single_story.html.erb index cddde25b5..7395180bd 100644 --- a/app/views/articles/_single_story.html.erb +++ b/app/views/articles/_single_story.html.erb @@ -120,7 +120,7 @@
<% if story.public_reactions_count > 0 %> - "> + "> <%= crayons_icon_tag("small-heart", title: t("views.reactions.summary.title")) %> <%= t("views.reactions.summary.count_html", count: story.public_reactions_count, @@ -129,7 +129,7 @@ <% end %> <% if story.comments_count > 0 %> - "> + "> <%= crayons_icon_tag("small-comment", title: t("views.comments.summary.title")) %> <%= t("views.comments.summary.count_html", count: story.comments_count, @@ -137,7 +137,7 @@ end: "".html_safe) %> <% else %> - "> + "> <%= crayons_icon_tag("small-comment", title: t("views.comments.summary.title")) %> diff --git a/config/locales/views/articles/en.yml b/config/locales/views/articles/en.yml index 0d4e3790a..5d9d5beb5 100644 --- a/config/locales/views/articles/en.yml +++ b/config/locales/views/articles/en.yml @@ -7,7 +7,7 @@ en: actions: aria_label: Article actions comments: - aria_label: Comments for post %{title} (%{num}) + aria_label: Add a comment to post - %{title} subtitle_html: Discussion %{num} num: "(%{num})" subscribe: Subscribe diff --git a/config/locales/views/articles/fr.yml b/config/locales/views/articles/fr.yml index 002897b41..fec64bc66 100644 --- a/config/locales/views/articles/fr.yml +++ b/config/locales/views/articles/fr.yml @@ -7,7 +7,7 @@ fr: actions: aria_label: Article actions comments: - aria_label: Comments for post %{title} (%{num}) + aria_label: Add a comment to post - %{title} subtitle_html: Discussion %{num} num: "(%{num})" subscribe: Subscribe diff --git a/cypress/e2e/seededFlows/homeFeedFlows/feedNavigation.spec.js b/cypress/e2e/seededFlows/homeFeedFlows/feedNavigation.spec.js index 6f35a9588..2b0705339 100644 --- a/cypress/e2e/seededFlows/homeFeedFlows/feedNavigation.spec.js +++ b/cypress/e2e/seededFlows/homeFeedFlows/feedNavigation.spec.js @@ -157,4 +157,18 @@ describe('Home Feed Navigation', () => { cy.url().should('contain', '/latest'); cy.findByRole('heading', { name: '#tag1' }); }); + + it('should navigate to article comment area', function () { + cy.get('article.crayons-story') + .first() + .within(() => { + cy.findByRole('link', { name: /^Add a comment to post -/ }).click(); + }); + + cy.url().should('contain', '#comments'); + + cy.findByRole('textbox', { + name: 'Add a comment to the discussion', + }).should('have.focus'); + }); });