Accessibility: Adding a withAssertiveMessages Higher Order Component
#2107
Conversation
youknowriad
added
the
[Focus] Accessibility (a11y)
|
Should this be specific to the assertive tone, or should it be generalized to "speak" (polite and assertive). |
From an accessibility perspective, there's the need of both. So far, Gutenberg is mostly using "assertive" to give an immediate audible feedback. In other cases there might be the need to have a "polite" message. The only difference is about timing: |
afercia
left a comment
afercia
left a comment
There was a problem hiding this comment.
For the a11y part, please see my comment. Fo the architectural part I'd leave that to people more expert than me with React 🙂
|
I made the HoC more generic with props taking a second parameter. |
youknowriad
force-pushed
the
add/speak-assertive-hoc
branch
from
ba7aa9e to
99ed929
Compare
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { Component } from 'element'; |
There was a problem hiding this comment.
Note with #2172, these need to be updated to prefix the dependencies with @wordpress/. You will need to perform a rebase against the latest version of master and apply your changes:
git fetch origin
git rebase origin/master
youknowriad
force-pushed
the
add/speak-assertive-hoc
branch
from
99ed929 to
e5bb0aa
Compare
|
If no more concerns, I'll merge this soon. |
Codecov Report
@@ Coverage Diff @@
## master #2107 +/- ##
=========================================
+ Coverage 22.14% 22.94% +0.8%
=========================================
Files 139 143 +4
Lines 4322 4532 +210
Branches 727 791 +64
=========================================
+ Hits 957 1040 +83
- Misses 2841 2925 +84
- Partials 524 567 +43
Continue to review full report at Codecov.
|
| this.debouncedSpeak = debounce( this.speak.bind( this ), 500 ); | ||
| } | ||
|
|
||
| speak( message, type = 'assertive' ) { |
There was a problem hiding this comment.
#2107 (comment) notwithstanding, packages/a11y the default type was chosen as 'polite'
https://github.com/WordPress/packages/blob/2eb0aac/packages/a11y/src/index.js#L31
Inconsistency could be confusing
|
I think with "withSpokenMessage" may be more clear here than just A11y. |
…-to-po2android-script Add a new androidReplacements function to comply with Android Typography lint rules
closes #2105
This PR adds a new Higher Order Component called "withAssertiveMessages" that adds two props "speakAssertive" and "debouncedSpeakAssertive". The pattern of adding these methods was duplicated across multiple components.
This PR tries to resolve #2105 but I'm not sure about the "Term selected" message.