From b08c279c314d3bf9bd9e0425d98564226bc15442 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Wed, 26 Feb 2025 12:15:10 +0100 Subject: [PATCH] Make links to annotation comments accessible The link to the comments page was an "expand" icon, which was confusing because it wasn't really expanding the contents of the sidebar but going to an entirely different page. Furthermore, it didn't have any text for people using screen readers, which is why Axe was reporting the following accessibility error: ``` link-name: Links must have discernible text (serious) https://dequeuniversity.com/rules/axe/4.10/link-name?application=axeAPI The following 1 node violate this rule: Selector: #annotation-link > a HTML: Fix all of the following: - Element is in tab order and does not have accessible text Fix any of the following: - Element does not have text that is visible to screen readers - aria-label attribute does not exist or is empty - aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty - Element has no title attribute ``` So we're removing the icon and turning the "N comments" text into a link, so it's easier to guess that the link takes us to the page showing all the comments for this annotation. --- .../stylesheets/legislation_process.scss | 6 ------ .../annotations/_annotation_link.html.erb | 3 --- .../annotations/_comment_header.html.erb | 9 ++++++--- .../legislation/annotations/comments.js.erb | 4 ++-- .../comments/legislation_annotations_spec.rb | 20 +++++++------------ 5 files changed, 15 insertions(+), 27 deletions(-) delete mode 100644 app/views/legislation/annotations/_annotation_link.html.erb diff --git a/app/assets/stylesheets/legislation_process.scss b/app/assets/stylesheets/legislation_process.scss index 5e7f78fc7..b752d3688 100644 --- a/app/assets/stylesheets/legislation_process.scss +++ b/app/assets/stylesheets/legislation_process.scss @@ -596,12 +596,6 @@ border-bottom: 1px solid $border; margin-bottom: rem-calc(16); padding-bottom: rem-calc(8); - - a .icon-expand { - color: #838383; - float: right; - font-size: $small-font-size; - } } .comments-wrapper { diff --git a/app/views/legislation/annotations/_annotation_link.html.erb b/app/views/legislation/annotations/_annotation_link.html.erb deleted file mode 100644 index b047f52cb..000000000 --- a/app/views/legislation/annotations/_annotation_link.html.erb +++ /dev/null @@ -1,3 +0,0 @@ -<%= link_to legislation_process_draft_version_annotation_path(annotation.draft_version.process, annotation.draft_version, annotation, sub_annotation_ids: "") do %> - -<% end %> diff --git a/app/views/legislation/annotations/_comment_header.html.erb b/app/views/legislation/annotations/_comment_header.html.erb index f767cf7a3..80d55cdb9 100644 --- a/app/views/legislation/annotations/_comment_header.html.erb +++ b/app/views/legislation/annotations/_comment_header.html.erb @@ -1,5 +1,8 @@ -<%= render Shared::CommentsCountComponent.new(annotation.comments.roots.count) %> - - <%= render "annotation_link", annotation: annotation %> + <%= render Shared::CommentsCountComponent.new( + annotation.comments.roots.count, + url: legislation_process_draft_version_annotation_path( + annotation.draft_version.process, annotation.draft_version, annotation, sub_annotation_ids: "" + ) + ) %> diff --git a/app/views/legislation/annotations/comments.js.erb b/app/views/legislation/annotations/comments.js.erb index 1e0985217..46550b8cd 100644 --- a/app/views/legislation/annotations/comments.js.erb +++ b/app/views/legislation/annotations/comments.js.erb @@ -14,11 +14,11 @@ if ($(".comment").length == 0) { $("#annotation-link a").attr("href", new_annotation_link) - var current_comment_text = $(".comments-count").text() + var current_comment_text = $("#annotation-link a").text() var current_comment_count = current_comment_text.match(/\d+/)[0] var new_comment_count = parseInt(current_comment_count) + parseInt(<%= @annotation.comments.roots.count %>) var new_comment_count_text = current_comment_text.replace(/(\d+)/, new_comment_count); - $(".comments-count").text(new_comment_count_text) + $("#annotation-link a").text(new_comment_count_text) } <%= render "comments_box_form", comment: @comment, annotation: @annotation %> diff --git a/spec/system/comments/legislation_annotations_spec.rb b/spec/system/comments/legislation_annotations_spec.rb index 6fbab0f7a..d547d282e 100644 --- a/spec/system/comments/legislation_annotations_spec.rb +++ b/spec/system/comments/legislation_annotations_spec.rb @@ -35,9 +35,7 @@ describe "Commenting legislation annotations" do end scenario "View comments of annotations in an included range" do - within("#annotation-link") do - find(".icon-expand").click - end + click_link "2 comment" expect(page).to have_content "Comments about" expect(page).to have_css ".comment", count: 2 @@ -71,20 +69,16 @@ describe "Commenting legislation annotations" do expect(page).to have_content "my other annotation" end - within("#annotation-link") do - find(".icon-expand").click - end + click_link "2 comment" - expect(page).to have_css(".comment", count: 3) - expect(page).to have_content("my annotation") - expect(page).to have_content("my other annotation") - expect(page).to have_content("replying in single annotation thread") + expect(page).to have_css ".comment", count: 3 + expect(page).to have_content "my annotation" + expect(page).to have_content "my other annotation" + expect(page).to have_content "replying in single annotation thread" end scenario "Reply on a multiple annotation thread and display it in the single annotation thread" do - within("#annotation-link") do - find(".icon-expand").click - end + click_link "2 comment" within("#comment_#{comment2.id}") do click_link "Reply"