Format and transition numbers #1668
Conversation
| <h2 class="subtitle"> | ||
| {page.total, plural, =1 {1 result} other {{{page.total | transitionNumbers}} results}} | ||
| @if (page.total > 5) { | ||
| Showing results {{pageResults.from$ | async | transitionNumbers}} | ||
| - | ||
| {{(pageResults.to$ | async)}} | ||
| {{(pageResults.to$ | async | transitionNumbers)}} | ||
| } | ||
| </h2> |
There was a problem hiding this comment.
I've been meaning to make the hit count a live region - similar to how it's used on the download tab. I'm concerned that updating the numbers like this would spawn a barrage of updates in that case.
There was a problem hiding this comment.
Maybe the aria-live="polite" should be enough?
"aria-live="polite" indicates that the screen reader should wait until the user is idle before presenting updates to the user. This is the most commonly used value, as interrupting the user with "assertive" might interrupt their flow."
And there is also this interesting attribute aria-busy
Used in ARIA live regions, the global aria-busy state indicates an element is being modified and that assistive technologies may want to wait until the changes are complete before informing the user about the update.
There was a problem hiding this comment.
aria-live=polite basically means the message is queued and will be read the next time the screen reader is idle. But that's why I was worried this might queue a bunch of updates that are all read after one another.
But it looks like aria-busy would be the right solution here!
|
Btw, another question: could you use a media query to disable the animation with prefers-reduced motion? This isn't strictly necessary, since this animation doesn't count as motion. However, some people (including myself) use the setting to just reduce the amount of animation on webpages. |
Formats the hit count. Adds some transition effects. Borrowed from MiMA