consul/grecia
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use aria-current to mark the current element

Browse Source 
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.
This commit is contained in:
Javi Martín
2020-12-05 18:46:02 +01:00
parent 55d2cfe5b1
commit 7680bfc94b
3 changed files with 6 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/assets/stylesheets/admin/menu.scss
View File

@@ -117,7 +117,8 @@
padding-left: $line-height / 2; padding-left: $line-height / 2;
} }
&.is-active a { &.is-active a,
&[aria-current] a {
background: $sidebar-hover; background: $sidebar-hover;
border-left: 2px solid $sidebar-active; border-left: 2px solid $sidebar-active;
font-weight: bold; font-weight: bold;

4
app/helpers/link_list_helper.rb
View File

@@ -3,8 +3,8 @@ module LinkListHelper
return "" if links.compact.empty? return "" if links.compact.empty?
tag.ul(options) do tag.ul(options) do
safe_join(links.compact.map do |text, url, is_active = false, **link_options| safe_join(links.compact.map do |text, url, current = false, **link_options|
tag.li(class: ("is-active" if is_active)) do tag.li(({ "aria-current": true } if current)) do
link_to text, url, link_options link_to text, url, link_options
end end
end) end)

4
spec/helpers/link_list_helper_spec.rb
View File

@@ -41,7 +41,7 @@ describe LinkListHelper do
) )
expect(page).to have_css "li", count: 3 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 end
it "allows passing both the active condition and link options" do 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", 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.root", count: 1, exact_text: "Home"
expect(page).to have_css "a#info", count: 1, exact_text: "Info" expect(page).to have_css "a#info", count: 1, exact_text: "Info"