5214d89c88
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 `<select>` element, and changing the location when users select an option. This has several disadvantages. First, and most important, it's terrible for keyboard users. `<select>` 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
41 lines
1.8 KiB
Plaintext
41 lines
1.8 KiB
Plaintext
<% commentable = comment_tree.commentable %>
|
|
<% valuation = local_assigns.fetch(:valuation, false) %>
|
|
<% cache [locale_and_user_status, comment_tree.order, commentable_cache_key(commentable), comment_tree.comments, comment_tree.comment_authors, commentable.comments_count] do %>
|
|
<section class="expanded comments">
|
|
<div class="row">
|
|
<div id="comments" class="small-12 column">
|
|
<% if display_comments_count %>
|
|
<h2>
|
|
<%= comment_tree_title_text(commentable) %>
|
|
<span class="js-comments-count">(<%= commentable.comments_count %>)</span>
|
|
</h2>
|
|
<% end %>
|
|
|
|
<% if user_signed_in? %>
|
|
<% if comments_closed_for_commentable?(commentable) %>
|
|
<br>
|
|
<div data-alert class="callout primary">
|
|
<%= comments_closed_text(commentable) %>
|
|
</div>
|
|
<% elsif require_verified_resident_for_commentable?(commentable, current_user) %>
|
|
<br>
|
|
<div data-alert class="callout primary">
|
|
<%= sanitize(t("comments.verified_only", verify_account: link_to_verify_account)) %>
|
|
</div>
|
|
<% elsif !valuation || can?(:comment_valuation, commentable) %>
|
|
<%= render "comments/form", { commentable: commentable,
|
|
parent_id: nil,
|
|
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 %>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<% end %>
|