feat: improve accessibility for single field components tckt-393 #387
Conversation
|
Terraform plan for tts-10x-atj-dev Plan: 0 to add, 2 to change, 0 to destroy.Terraform used the selected providers to generate the following execution
plan. Resource actions are indicated with the following symbols:
!~ update in-place
Terraform will perform the following actions:
# cloudfoundry_app.tts-10x-atj-dev-server-doj_tts-10x-atj-dev-server-doj-app_380DB029 will be updated in-place
!~ resource "cloudfoundry_app" "tts-10x-atj-dev-server-doj_tts-10x-atj-dev-server-doj-app_380DB029" {
!~ docker_image = "ghcr.io/gsa-tts/forms/server-doj:47ea8ce4d918a6c2e82782097e07eb1aba09d078" -> "ghcr.io/gsa-tts/forms/server-doj:0aa87c95543c9d835bd1d9ab5cb731513490e3a8"
id = "8a9fc8b6-af5e-45a2-abb6-2c24ecbcdfaa"
name = "tts-10x-atj-dev-server-doj-app"
# (17 unchanged attributes hidden)
# (3 unchanged blocks hidden)
}
# cloudfoundry_app.tts-10x-atj-dev-server-kansas_tts-10x-atj-dev-server-kansas-app_337A9CF1 will be updated in-place
!~ resource "cloudfoundry_app" "tts-10x-atj-dev-server-kansas_tts-10x-atj-dev-server-kansas-app_337A9CF1" {
!~ docker_image = "ghcr.io/gsa-tts/forms/server-kansas:47ea8ce4d918a6c2e82782097e07eb1aba09d078" -> "ghcr.io/gsa-tts/forms/server-kansas:0aa87c95543c9d835bd1d9ab5cb731513490e3a8"
id = "e885e531-11b7-4906-9cc3-0ddf483868f5"
name = "tts-10x-atj-dev-server-kansas-app"
# (17 unchanged attributes hidden)
# (3 unchanged blocks hidden)
}
Plan: 0 to add, 2 to change, 0 to destroy.📝 Plan generated in Post Terraform plan to PR comment #450 |
There was a problem hiding this comment.
I really appreciate you taking the time to do this! I left some comments for you on this one. The changes are minor tweaks to the aria labels, so I don't need to review again and can trust you to make the changes. I'll give it a conditional approval as long as the changes are implemented. Just merge it when the changes are complete.
| id={monthId} | ||
| {...register(monthId)} | ||
| aria-describedby="mdHint" | ||
| aria-describedby={ | ||
| error ? `${monthId} input-error-message-${monthId}}` : monthId |
There was a problem hiding this comment.
I left a comment for you on your other PR about the logic for the aria-describedby attribute. The same comment is true here where I think you'll want to have 4 branches of a conditional - error only, hint only, both error and hint, neither error nor hint.
There was a problem hiding this comment.
Thank you for the comments!
Updated this PR accordingly.
| id={dayId} | ||
| {...register(dayId)} | ||
| minLength={2} | ||
| maxLength={2} | ||
| pattern="[0-9]*" | ||
| inputMode="numeric" | ||
| aria-describedby={ |
There was a problem hiding this comment.
This is described by hint-${monthId} as well. You'll have identical aria-describedby logic for all 3 form fields, so you many want to make a function for it.
There was a problem hiding this comment.
Good idea! Updated!
| id={yearId} | ||
| {...register(yearId)} | ||
| minLength={4} | ||
| maxLength={4} | ||
| pattern="[0-9]*" | ||
| inputMode="numeric" | ||
| aria-describedby={ | ||
| error ? `${yearId} input-error-message-${yearId}}}` : yearId |
There was a problem hiding this comment.
Same as my comment above.
| id={emailId} | ||
| type="email" | ||
| autoCapitalize="off" | ||
| autoCorrect="off" | ||
| {...register(emailId, { required })} | ||
| aria-describedby={error ? `${emailId} ${errorId}}` : emailId} |
There was a problem hiding this comment.
The emailId can be safely removed.
| @@ -49,7 +46,7 @@ export const PhoneNumberPattern: PatternComponent<PhoneNumberProps> = ({ | |||
| type="tel" | |||
| defaultValue={value} | |||
| {...register(phoneId, { required })} | |||
| aria-describedby="primaryPnHint" | |||
| aria-describedby={error ? `${phoneId} ${errorId}` : phoneId} | |||
There was a problem hiding this comment.
Same comment as before with the 4 branches of the conditional.
| })} | ||
| id={selectId} | ||
| {...register(selectId, { required })} | ||
| aria-describedby={error ? `${selectId} ${errorId}` : selectId} |
There was a problem hiding this comment.
selectId can be safely removed from this.
kalasgarov
force-pushed
the
fix/accessibility
branch
from
246a6c5
to
81d49d2
Compare
kalasgarov
changed the title
Addressed some accessibility issues for single field components.
Improved error handling for single field components.