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.
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user