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

Focus comment box when entering by "comments" button from home feed (#18132)

Browse source
This commit is contained in:
Jhonatan Hidalgo 2022-07-28 14:17:46 -05:00 • committed by GitHub
parent 8a8aea80ff
commit 998d39cd4c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 29 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
app/assets/javascripts/utilities/buildArticleHTML.js
View file

@ -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 =

4
app/javascript/articles/__tests__/__snapshots__/Article.test.jsx.snap
View file

@ -207,7 +207,7 @@ Object {
class="crayons-story__details"
>
<a
aria-label="Comments for post Unbranded Home Loan Account (0)"
aria-label="Add a comment to post - Unbranded Home Loan Account"
class="crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-left"
data-testid="add-a-comment"
href="/some-post/path#comments"
@ -462,7 +462,7 @@ Object {
class="crayons-story__details"
>
<a
aria-label="Comments for post Unbranded Home Loan Account (0)"
aria-label="Add a comment to post - Unbranded Home Loan Account"
class="crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-left"
data-testid="add-a-comment"
href="/some-post/path#comments"

2
app/javascript/articles/components/CommentsCount.jsx
View file

@ -14,7 +14,7 @@ export const CommentsCount = ({ count, articlePath, articleTitle }) => {
<path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z" />
</svg>
);
const commentsAriaLabelText = `Comments for post ${articleTitle} (${count})`;
const commentsAriaLabelText = `Add a comment to post - ${articleTitle}`;
if (count > 0) {
return (

6
app/javascript/packs/articlePage.jsx
View file

@ -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);
}
});
};

6
app/views/articles/_single_story.html.erb
View file

@ -120,7 +120,7 @@
<div class="crayons-story__bottom">
<div class="crayons-story__details">
<% if story.public_reactions_count > 0 %>
<a href="<%= story.path %>" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="<%= story.id %>" aria-label="<%= t("views.articles.comments.aria_label", title: story.title, num: story.public_reactions_count) %>">
<a href="<%= story.path %>" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="<%= story.id %>" aria-label="<%= t("views.articles.comments.aria_label", title: story.title) %>">
<%= 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 @@
</a>
<% end %>
<% if story.comments_count > 0 %>
<a href="<%= story.path %>#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" aria-label="<%= t("views.articles.comments.aria_label", title: story.title, num: story.public_reactions_count) %>">
<a href="<%= story.path %>#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" aria-label="<%= t("views.articles.comments.aria_label", title: story.title) %>">
<%= 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: "</span>".html_safe) %>
</a>
<% else %>
<a href="<%= story.path %>#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" aria-label="<%= t("views.articles.comments.aria_label", title: story.title, num: story.public_reactions_count) %>">
<a href="<%= story.path %>#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" aria-label="<%= t("views.articles.comments.aria_label", title: story.title) %>">
<%= crayons_icon_tag("small-comment", title: t("views.comments.summary.title")) %>
<span class="hidden s:inline"><%= t("views.comments.add") %></span>
</a>

2
config/locales/views/articles/en.yml
View file

@ -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

2
config/locales/views/articles/fr.yml
View file

@ -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

14
cypress/e2e/seededFlows/homeFeedFlows/feedNavigation.spec.js
View file

@ -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');
});
});