Countdown Accessibility Changes #871
Conversation
…rs-reduced-motion.
…into KAD-4904_count_down_pause_button
…/stellarwp/kadence-blocks into KAD-4904_count_down_pause_button
|
🎉 Zip build complete |
gilbert-hernandez
requested review from
alaca,
pramodjodhani and
ravinderk
and removed request for
oakesjosh
src/blocks/countdown/save.js
Outdated
| <button | ||
| type="button" | ||
| className={`kb-countdown-pause-button kb-countdown-pause-button-${pauseButtonPosition || 'top-right'}`} | ||
| aria-label="Pause countdown timer" |
There was a problem hiding this comment.
@gilbert-hernandez can we make this translatable?
src/blocks/countdown/save.js
Outdated
| title="Pause countdown" | ||
| > | ||
| <span className="kb-countdown-pause-icon" aria-hidden="true"> | ||
| ⏸ |
There was a problem hiding this comment.
@gilbert-hernandez I suggest using an SVG icon instead of a symbol for visual consistency.
src/blocks/countdown/edit.js
Outdated
| }} | ||
| > | ||
| <span className="kb-countdown-pause-icon" aria-hidden="true"> | ||
| ⏸ |
There was a problem hiding this comment.
@gilbert-hernandez I suggest using an SVG icon instead of a symbol for visual consistency.
src/assets/js/kb-countdown.js
Outdated
| newButton.setAttribute('title', 'Resume countdown'); | ||
| const icon = newButton.querySelector('.kb-countdown-pause-icon'); | ||
| if (icon) { | ||
| icon.textContent = '▶'; |
There was a problem hiding this comment.
@gilbert-hernandez I suggest using an SVG icon instead of a symbol for visual consistency.
src/assets/js/kb-countdown.js
Outdated
| if (window.kadenceCountdown.prefersReducedMotion) { | ||
| window.kadenceCountdown.cache[id].paused = true; | ||
| newButton.setAttribute('aria-pressed', 'true'); | ||
| newButton.setAttribute('aria-label', 'Resume countdown timer'); |
There was a problem hiding this comment.
@gilbert-hernandez can we make this translatable?
src/assets/js/kb-countdown.js
Outdated
| window.kadenceCountdown.cache[id].paused = true; | ||
| button.setAttribute('aria-pressed', 'true'); | ||
| button.setAttribute('aria-label', 'Resume countdown timer'); | ||
| button.setAttribute('title', 'Resume countdown'); |
There was a problem hiding this comment.
@gilbert-hernandez can we make this translatable?
src/assets/js/kb-countdown.js
Outdated
| window.kadenceCountdown.cache[id].paused = false; | ||
| button.setAttribute('aria-pressed', 'false'); | ||
| button.setAttribute('aria-label', 'Pause countdown timer'); | ||
| button.setAttribute('title', 'Pause countdown'); |
There was a problem hiding this comment.
@gilbert-hernandez can we make this translatable?
src/assets/js/kb-countdown.js
Outdated
| // Resume | ||
| window.kadenceCountdown.cache[id].paused = false; | ||
| button.setAttribute('aria-pressed', 'false'); | ||
| button.setAttribute('aria-label', 'Pause countdown timer'); |
There was a problem hiding this comment.
@gilbert-hernandez can we make this translatable?
| 'Countdown timer has ended. ' + completeText | ||
| ); | ||
| } else { | ||
| window.kadenceCountdown.announceToScreenReader( |
There was a problem hiding this comment.
@gilbert-hernandez can we make this translatable?
| completeContent.textContent || completeContent.innerText || '' | ||
| ); | ||
| if (completeText.trim()) { | ||
| window.kadenceCountdown.announceToScreenReader( |
There was a problem hiding this comment.
@gilbert-hernandez can we make this translatable?
src/assets/js/kb-countdown.js
Outdated
| button.setAttribute('title', 'Pause countdown'); | ||
| const icon = button.querySelector('.kb-countdown-pause-icon'); | ||
| if (icon) { | ||
| icon.textContent = '⏸'; |
There was a problem hiding this comment.
Replace with SVG
|
I reached out to Jeffrey regarding SVG play/pause icons. |
|
Updated translations and replaced play/pause buttons with SVG icons. |
https://stellarwp.atlassian.net/browse/KAD-4904
https://stellarwp.atlassian.net/browse/KAD-4905
https://stellarwp.atlassian.net/browse/KAD-4907
Several changes for accessibility for the countdown block. Adds a play/pause button, adds a "timer" role to the the html, and adds an announcement for screen readers.
Video:
https://share.zight.com/Kou27Z7G