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

TextInput accessibility fixes #776

Merged
merged 9 commits into from
Oct 3, 2024
Merged

Conversation

joshfarrant
Copy link
Contributor

@joshfarrant joshfarrant commented Oct 2, 2024

Summary

Fixes all outstanding accessibility issues for the TextInput component.

List of notable changes:

  • Add autoComplete attribute to relevant TextInput components
  • Update TextInput documentation to explicitly mention the autoComplete attribute
  • Add aria-describedby to TextInput component
  • Add tests for TextInput component
  • Remove validation prop from TextInput stories
    • The prop doesn't really make sense in the TextInput stories here as it's intended to be used with FormControl.Validation, so it's been removed to avoid confusion.
  • Add aria-labels to TextInput leadingVisual and trailingVisual icons in Storybook
  • Modify TextInput documentation to not encourage placeholder use as label

What should reviewers focus on?

  • Check that I've not made any mistakes on the autoComplete attributes
  • Check that the aria-describedby attribute is correctly implemented

Steps to test:

Link to Storybook

Supporting resources (related issues, external links, etc):

Contributor checklist:

  • All new and existing CI checks pass
  • Tests prove that the feature works and covers both happy and unhappy paths
  • Any drop in coverage, breaking changes or regressions have been documented above
  • New visual snapshots have been generated / updated for any UI changes
  • All developer debugging and non-functional logging has been removed
  • Related issues have been referenced in the PR description

Reviewer checklist:

  • Check that pull request and proposed changes adhere to our contribution guidelines and code of conduct
  • Check that tests prove the feature works and covers both happy and unhappy paths
  • Check that there aren't other open Pull Requests for the same update/change

Screenshots:

Before After

Before

After

Copy link

changeset-bot bot commented Oct 2, 2024

🦋 Changeset detected

Latest commit: bae7b7c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 6 packages
Name Type
@primer/react-brand Patch
@primer/brand-e2e Patch
@primer/brand-primitives Patch
@primer/brand-fonts Patch
@primer/brand-config Patch
@primer/brand-storybook Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Copy link
Contributor

github-actions bot commented Oct 2, 2024

🟢 No design token changes found

Copy link
Contributor

github-actions bot commented Oct 2, 2024

⚠️ Visual differences found

Our visual comparison tests found UI differences.

Please review the differences by using the test artifacts to ensure that the changes were intentional.

Artifacts can be downloaded and reviewed locally.

Download links are available at the bottom of the workflow summary screen.

Example:

artifacts section of workflow run

If the changes are expected, please run npm run test:visual:update-snapshots to replace the previous fixtures.

Review visual differences

Copy link
Contributor

@danielguillan danielguillan left a comment

Choose a reason for hiding this comment

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

Looks great! Thank you!

@joshfarrant joshfarrant merged commit 06fd847 into main Oct 3, 2024
@joshfarrant joshfarrant deleted the joshfarrant/a11y-text-input branch October 3, 2024 10:37
@primer-css primer-css mentioned this pull request Oct 3, 2024
MelissaPastore pushed a commit that referenced this pull request Oct 4, 2024
* add autocomplete attribute to relevant TextInputs

* update TextInput docs to explicity mention autoComplete attribute

* add aria-describedby to TextInput

* add tests to TextInput

* modify TextInput documentation to not encourage placeholder use as label

* remove validation prop from TextInput stories

* add aria-labels to TextInput leadingVisual and trailingVisual icons in Storybook

* add changeset

* github-actions[bot] Regenerated snapshots

---------

Co-authored-by: joshfarrant <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants