Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(a11y): Remove placeholders in DateInput #3207

Merged
merged 2 commits into from
May 29, 2024

Conversation

DafyddLlyr
Copy link
Contributor

@DafyddLlyr DafyddLlyr commented May 28, 2024

This is the only public facing placeholder in PlanX - all others are in the Editor. To meet the requirements set out in the report, we'd need to increase font size to 18pt which is a fair bit bigger than the current size.

Removing placeholder text also meets the GDS recommendation, as well as the pattern currently used in their Date Input components -

Avoid placeholder text

Do not use placeholder text in place of a label, or for hints or examples, as:

  • it vanishes when the user starts typing, which can cause problems for users with memory conditions or when reviewing answers
  • not all screen readers read it out
  • its browser default styles often do not meet minimum contrast requirements
image image

@DafyddLlyr DafyddLlyr requested a review from a team May 28, 2024 20:59
@DafyddLlyr DafyddLlyr force-pushed the dp/remove-date-placeholders branch from 88c1aa9 to 031c2ea Compare May 28, 2024 21:17
Copy link

github-actions bot commented May 28, 2024

Removed vultr server and associated DNS entries

@DafyddLlyr DafyddLlyr force-pushed the dp/remove-date-placeholders branch from 031c2ea to 0be7ddf Compare May 28, 2024 21:33
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I had some of these tests timeout on a CI run, then pass on multiple retries.

Locally they run well within the expected timeout though not exactly fast. I'm not sure if this is an issue with the test or the CI runner? If this proves to be flaky I'll bump the timeout.

image

Year
</Label>
<Input
value={year || ""}
placeholder="YYYY"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Very happy to remove placeholders here, but should we also flag to content team that any DateInput components should now have descriptions like "For example, 23 4 2005" ?

Noticed all the GDS examples have this and I wonder if it's how to get a better "usability" score in the absense of official placeholders? https://design-system.service.gov.uk/components/date-input/

@DafyddLlyr DafyddLlyr merged commit e4cfb30 into main May 29, 2024
12 checks passed
@DafyddLlyr DafyddLlyr deleted the dp/remove-date-placeholders branch May 29, 2024 14:01
@DafyddLlyr
Copy link
Contributor Author

Merged as we've sent across the email to DAC!

RODO94 pushed a commit that referenced this pull request Jun 4, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants