LG-9816: Add accepted special characters to hint text on ID number page#8435
LG-9816: Add accepted special characters to hint text on ID number page#8435gina-yamada merged 12 commits intomainfrom
Conversation
and increase input size
|
@allis-green I have two questions.
|
…d number hint text
|
This looks good to me. One weird thing I noticed when testing with a screen reader though, the '-' is not read using VoiceOver. Looks like this is known behavior: https://www.deque.com/blog/dont-screen-readers-read-whats-screen-part-1-punctuation-typographic-symbols/ One thing you could try is using &ndash (you would have to escape it in the yml file I think), or just putting a space behind the '-' before the final quote in the translation files. |
|
@WheresHJ Standard break point is for tablet at min-width 640px. Any screen size 640 and greater will display text on the second line. See conversation above. Here are a few screenshots for you 👇. If it looks good, can you approve this PR? Thank you Harlan 
|
|
I wanted to respond back to your comment about the screen reader and the '-'. I first attempted modifying the yml file with no luck. After more research I learned the work arounds are can be more confusing for most (and for our purpose, not helpful). This article has a list of 2023 safe and unread characters. All forms of dash are not supported consistently. The alternative is to include the word in the hint text itself rather than the symbol. Also, space is okay but not read. Thinking about it too. Maybe the text should be updated from: @WheresHJ What are your thoughts? Extra info:
|
|
Maybe we can use screen-reader-only text to read out a full text description of the symbol as an alternative to the visual symbol? e.g. May include letters, numbers, and the following symbols: <span class="usa-sr-only">forward slash,</span><span aria-hidden="true">/</span> <span class="usa-sr-only">asterisk,</span><span aria-hidden="true">*</span> <span class"usa-sr-only">dash</span><span aria-hidden="true">-</span> |
|
Update: I will be using @aduth 's solution above. The screen reader will read the text rather than attempt to interpret the symbol which is proving problematic for all characters/symbols in some sort. (Space is ignored, / is slash and not forward slash, * is star and not asterisks, and - is also ignored.) 
This PR is still in draft. I will update when I get translations. (I made request in issue.) |
WheresHJ
left a comment
WheresHJ
left a comment
There was a problem hiding this comment.
LGTM! @JackRyan1989, I'm assuming your tag for me was resolved by using @aduth's solution; if not, lemme know!
|
@JackRyan1989 @aduth Translations came in! Files have been updated. Please have another review and approve if you think this is ready. Thanks for everyones input/suggestions here. |
JackRyan1989
left a comment
JackRyan1989
left a comment
There was a problem hiding this comment.
Overall this looks good to me! Great job!
| state_id_jurisdiction_prompt: '- Select -' | ||
| state_id_number: ID number | ||
| state_id_number_hint: May include letters and numbers | ||
| state_id_number_hint_html: "May include letters, numbers, and the following |
There was a problem hiding this comment.
Looking at this again, it looks, not great. But since the classes used are not for styling per se, and thus not super likely to change anytime soon, I think this is ok.
aduth
left a comment
aduth
left a comment
There was a problem hiding this comment.
LGTM! Tested to confirm this appears visually with the symbols and announces the text description for screen reader:
4 participants
🎫 Ticket
LG-9816 Implementation: Add accepted special characters to hint text on ID number page
🛠 Summary of changes
📜 Testing Plan
Create an account. Attempt to verify your identity via /verify.
Upload front/back of ID to fail identity verification. Click Try in person and Continue.
Get to view Enter the information on your ID. Confirm ID number hint text has been updated from "May include letters and numbers" to "May include letters, numbers, and the following symbols: / * - "
👀 Screenshots
Before:
After:
See screenshots below in conversation. The text now breaks so that the characters are not hanging out on a line with no other text when the screen size is 640px or larger.
Responsive Samples After:
See screenshots below in conversation. The text now breaks so that the characters are not hanging out on a line with no other text when the screen size is 640px or larger.