Accessibility of AJAX search: aria-live, focus restoration, loader semantics#169
Open
loevgaard wants to merge 1 commit into
Open
Accessibility of AJAX search: aria-live, focus restoration, loader semantics#169loevgaard wants to merge 1 commit into
loevgaard wants to merge 1 commit into
Conversation
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## issue-123-accessible-pagination #169 +/- ##
==================================================================
Coverage ? 49.21%
Complexity ? 797
==================================================================
Files ? 140
Lines ? 2544
Branches ? 0
==================================================================
Hits ? 1252
Misses ? 1292
Partials ? 0 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
loevgaard
force-pushed
the
issue-133-ajax-accessibility
branch
from
60186b3 to
345085c
Compare
loevgaard
force-pushed
the
issue-123-accessible-pagination
branch
2 times, most recently
from
3f9ed37 to
5b2f77a
Compare
loevgaard
force-pushed
the
issue-133-ajax-accessibility
branch
from
345085c to
2fc32d3
Compare
After every AJAX filter/sort/page change the whole #search-form node is
swapped, which was a triple problem for assistive-technology users.
- Wrap the hits count in a role=status aria-live=polite region so the
updated "N results" is announced after each update.
- Give the loader overlay role=status and a translated aria-label
("Loading results…", added to all 12 locales) so "loading" is conveyed.
- In search.js #replaceContent(): record the active element's id/name
before the swap and restore focus to the equivalent element afterwards,
falling back to focusing the results region (tabindex=-1) so focus is
never dumped back on <body>.
Closes #133
loevgaard
force-pushed
the
issue-123-accessible-pagination
branch
from
5b2f77a to
f33f2e3
Compare
loevgaard
force-pushed
the
issue-133-ajax-accessibility
branch
from
2fc32d3 to
a29ff3a
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
After every AJAX filter/sort/page change the whole
#search-formnode is swapped, which was a triple problem for assistive-technology users:role="status" aria-live="polite"region, so "N results" is announced after each update.replaceWith()removes the element the user just operated, resetting focus to<body>.search.js#replaceContent()now records the active element's id/name before the swap and restores focus to the equivalent element afterwards (fallback: focus the results region withtabindex="-1"), so keyboard users don't have to tab from the top after every interaction.role="status"and a translatedaria-label("Loading results…", added to all 12 locales).Testing
announces the result count and restores focus after an AJAX swap: asserts thearia-livehits-count region and thatdocument.activeElementis the equivalent field (f[brand][]) after the swap.Closes #133
Stacked on #168 (#123).