From 7680bfc94b5cc1a28443bd57c44f67dfc7ac7fb6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Sat, 5 Dec 2020 18:46:02 +0100 Subject: [PATCH] Use aria-current to mark the current element This way screen reader users will be notified that the element is the current one. I'm not entirely sure whether `aria-current="page"` is more appropriate than `aria-current="true"`, since it's a general helper which can be used for any collection of links. --- app/assets/stylesheets/admin/menu.scss | 3 ++- app/helpers/link_list_helper.rb | 4 ++-- spec/helpers/link_list_helper_spec.rb | 4 ++-- 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/app/assets/stylesheets/admin/menu.scss b/app/assets/stylesheets/admin/menu.scss index a3ea2801d..f80f074cd 100644 --- a/app/assets/stylesheets/admin/menu.scss +++ b/app/assets/stylesheets/admin/menu.scss @@ -117,7 +117,8 @@ padding-left: $line-height / 2; } - &.is-active a { + &.is-active a, + &[aria-current] a { background: $sidebar-hover; border-left: 2px solid $sidebar-active; font-weight: bold; diff --git a/app/helpers/link_list_helper.rb b/app/helpers/link_list_helper.rb index 2fdfab0a0..5042d55c5 100644 --- a/app/helpers/link_list_helper.rb +++ b/app/helpers/link_list_helper.rb @@ -3,8 +3,8 @@ module LinkListHelper return "" if links.compact.empty? tag.ul(options) do - safe_join(links.compact.map do |text, url, is_active = false, **link_options| - tag.li(class: ("is-active" if is_active)) do + safe_join(links.compact.map do |text, url, current = false, **link_options| + tag.li(({ "aria-current": true } if current)) do link_to text, url, link_options end end) diff --git a/spec/helpers/link_list_helper_spec.rb b/spec/helpers/link_list_helper_spec.rb index e7e238201..8fd04f5ac 100644 --- a/spec/helpers/link_list_helper_spec.rb +++ b/spec/helpers/link_list_helper_spec.rb @@ -41,7 +41,7 @@ describe LinkListHelper do ) expect(page).to have_css "li", count: 3 - expect(page).to have_css "li.is-active", count: 1, exact_text: "Info" + expect(page).to have_css "li[aria-current='true']", count: 1, exact_text: "Info" end it "allows passing both the active condition and link options" do @@ -52,7 +52,7 @@ describe LinkListHelper do ) expect(page).to have_css "li", count: 3 - expect(page).to have_css "li.is-active", count: 1, exact_text: "Info" + expect(page).to have_css "li[aria-current='true']", count: 1, exact_text: "Info" expect(page).to have_css "a.root", count: 1, exact_text: "Home" expect(page).to have_css "a#info", count: 1, exact_text: "Info"