From 5214d89c88101726b5801c9785e5431753872f40 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Sun, 27 Jun 2021 15:46:51 +0200 Subject: [PATCH] Use order links to sort comments and topics We use order links in many places in the web. However, in the comments section and the list of community topics, we were displaying a `` fields allow using the arrow keys to navigate through their options, and typing a letter will select the first option starting with that letter. This will trigger the "change" event and so users will navigate through a new page while they were probably just checking the available options [1]. For these reasons, WCAG Success Criterion 3.2.2 [2] states: > Changing the setting of any user interface component does not > automatically cause a change of context unless the user has been > advised of the behavior before using the component. Second, the form didn't have a submit button. This might confuse screen reader users, who might not know how that form is supposed to be submitted. Finally, dropdowns have usability issues of their own [3], particularly on mobile phones [4] The easiest solution is to use the same links we generally use to allow users select an order, so using them here we make the user experience more consistent. They offer one disadvantage, though; on small screens and certain languages, these links might take too much space and not look that great. This issue affects pretty much every place where we use order or filter links, so we might revisit it in the future. Note we're moving the links to order comments after the form to add a new comment. In my opinion, having an element such as a form to add a new comment between the element to select the desired order of the comments and the comments themselves is a bit confusing. [1] https://webaim.org/techniques/forms/controls#javascript [2] https://www.w3.org/WAI/WCAG21/Understanding/on-input.html [3] https://www.youtube.com/watch?v=CUkMCQR4TpY [4] https://www.lukew.com/ff/entry.asp?1950 --- app/assets/stylesheets/community.scss | 4 ---- app/assets/stylesheets/layout.scss | 5 +++++ app/assets/stylesheets/participation.scss | 5 +++++ app/components/shared/comments_component.html.erb | 4 +--- app/views/comments/_comment_tree.html.erb | 4 +--- app/views/shared/_order_links.html.erb | 2 +- app/views/topics/_topics.html.erb | 2 +- config/locales/en/general.yml | 1 - config/locales/es/general.yml | 1 - spec/system/comments/budget_investments_spec.rb | 6 ++++-- spec/system/comments/debates_spec.rb | 6 ++++-- spec/system/comments/legislation_annotations_spec.rb | 12 ++++-------- spec/system/comments/legislation_questions_spec.rb | 6 ++++-- spec/system/comments/polls_spec.rb | 6 ++++-- spec/system/comments/proposals_spec.rb | 6 ++++-- spec/system/comments/topics_spec.rb | 12 ++++++++---- spec/system/communities_spec.rb | 7 +++++-- 17 files changed, 51 insertions(+), 38 deletions(-) diff --git a/app/assets/stylesheets/community.scss b/app/assets/stylesheets/community.scss index c06d5c5d2..41e40994d 100644 --- a/app/assets/stylesheets/community.scss +++ b/app/assets/stylesheets/community.scss @@ -4,10 +4,6 @@ pointer-events: none; } - .wide-order-selector { - margin-top: 0; - } - .panel { min-height: auto; margin: 0.375rem 0; diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index 88ab4e31c..25f7f641e 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -1856,6 +1856,11 @@ table { } } + .order-links { + margin-bottom: $line-height; + margin-top: $line-height; + } + .comment { line-height: $list-lineheight; margin: $line-height / 4 0; diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss index 7257f9940..5c48631ec 100644 --- a/app/assets/stylesheets/participation.scss +++ b/app/assets/stylesheets/participation.scss @@ -393,6 +393,11 @@ font-size: rem-calc(15); margin-bottom: rem-calc(15); } + + .order-links > li { + font-size: inherit; + margin-bottom: 0; + } } .geozone { diff --git a/app/components/shared/comments_component.html.erb b/app/components/shared/comments_component.html.erb index b6b12f691..cb29bf459 100644 --- a/app/components/shared/comments_component.html.erb +++ b/app/components/shared/comments_component.html.erb @@ -3,15 +3,13 @@
<%= content %> - <%= render "shared/wide_order_selector", i18n_namespace: "comments" %> - <% if current_user %> <%= render "comments/form", { commentable: record, parent_id: nil } %> <% else %> -
<%= render "shared/login_to_comment" %> <% end %> + <%= render "shared/order_links", i18n_namespace: "comments" %> <%= render "comments/comment_list", comments: comment_tree.root_comments %> <%= paginate comment_tree.root_comments %>
diff --git a/app/views/comments/_comment_tree.html.erb b/app/views/comments/_comment_tree.html.erb index c8014178c..3d058eed2 100644 --- a/app/views/comments/_comment_tree.html.erb +++ b/app/views/comments/_comment_tree.html.erb @@ -11,8 +11,6 @@ <% end %> - <%= render "shared/wide_order_selector", i18n_namespace: "comments" %> - <% if user_signed_in? %> <% if comments_closed_for_commentable?(commentable) %>
@@ -30,10 +28,10 @@ valuation: valuation } %> <% end %> <% else %> -
<%= render "shared/login_to_comment" %> <% end %> + <%= render "shared/order_links", i18n_namespace: "comments" %> <%= render "comments/comment_list", comments: comment_tree.root_comments, valuation: valuation %> <%= paginate comment_tree.root_comments %> diff --git a/app/views/shared/_order_links.html.erb b/app/views/shared/_order_links.html.erb index 5bdcdfd56..5266a566c 100644 --- a/app/views/shared/_order_links.html.erb +++ b/app/views/shared/_order_links.html.erb @@ -1,4 +1,4 @@ -