Permalink
Browse files

Improve accessibility

- add a visually hidden element containing a colon so screenreaders pause between the navigation part of the link (ie. next/previous) and the label part, if present
- update accessibility criteria and test to include this
  • Loading branch information...
andysellick committed Aug 24, 2017
1 parent 32f0518 commit 5a830ff1be36dda99a7015986b34c1cbf8895360
@@ -15,6 +15,7 @@ accessibility-criteria: |
The component must:
- identify itself as pagination navigation
- provide a distinction between the navigation text and label text of the links both visually and for screenreaders
Links in the component must:
@@ -23,11 +24,11 @@ accessibility-criteria: |
- be focusable with a keyboard
- be usable with a keyboard
- indicate when it has focus
- Change in appearance when touched (in the touch-down state)
- Change in appearance when hovered
- Usable with touch
- Usable with speech
- Have visible text
- change in appearance when touched (in the touch-down state)
- change in appearance when hovered
- be usable with touch
- be usable with [voice commands](https://www.w3.org/WAI/perspectives/voice.html)
- have visible text
Icons in the component must not be announced by screen readers.
fixtures:
@@ -15,6 +15,7 @@
<%= previous_page[:title] %>
</span>
<% if previous_page[:label].present? %>
<span class="visually-hidden">:</span>
<span class="pub-c-pagination__link-label"><%= previous_page[:label] %></span>
<% end %>
</a>
@@ -30,6 +31,7 @@
</svg>
</span>
<% if next_page[:label].present? %>
<span class="visually-hidden">:</span>
<span class="pub-c-pagination__link-label"><%= next_page[:label] %></span>
<% end %>
</a>
@@ -33,4 +33,38 @@ def component_name
assert_select ".pub-c-pagination__link-label", text: "2 of 3"
assert_link("next-page")
end

test "there is a distinction between the navigation text and label text of the links when a label is present" do
render_component(
previous_page: {
url: "previous-page",
title: "Previous page",
label: "1 of 3"
},
next_page: {
url: "next-page",
title: "Next page",
label: "2 of 3"
}
)

assert_select ".pub-c-pagination__item--previous .pub-c-pagination__link .visually-hidden", text: ":"
assert_select ".pub-c-pagination__item--next .pub-c-pagination__link .visually-hidden", text: ":"
end

test "there is no distinction between the navigation text and label text of the links when labels are not present" do
render_component(
previous_page: {
url: "previous-page",
title: "Previous page"
},
next_page: {
url: "next-page",
title: "Next page"
}
)

assert_select ".pub-c-pagination__item--previous .pub-c-pagination__link .visually-hidden", false
assert_select ".pub-c-pagination__item--next .pub-c-pagination__link .visually-hidden", false
end
end

0 comments on commit 5a830ff

Please sign in to comment.