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

va-select: Add aria-describedby-message for screen readers #1105

Merged
merged 3 commits into from
Apr 3, 2024

Conversation

ataker
Copy link
Contributor

@ataker ataker commented Apr 2, 2024

Chromatic

https://dst25-87-va-select-add-aria-describedby--65a6e2ed2314f7b8f98609d8.chromatic.com

Description

Adds aria-describedby to va-select for screen readers.

Closes va-select needs describedby property #2587

QA Checklist

  • Component maintains 1:1 parity with design mocks
  • Text is consistent with what's been provided in the mocks
  • Component behaves as expected across breakpoints
  • Accessibility expert has signed off on code changes (if applicable. If not applicable provide reason why)
  • Designer has signed off on changes (if applicable. If not applicable provide reason why) No design changes
  • Tab order and focus state work as expected
  • Changes have been tested against screen readers (if applicable. If not applicable provide reason why)
  • New components are covered by e2e tests; updates to existing components are covered by existing test suite
  • Changes have been tested in vets-website using Verdaccio (if applicable. If not applicable provide reason why)

Screenshots

No visual changes
Screenshot 2024-04-02 at 14 56 36
Screen reader text:
Screenshot 2024-04-03 at 14 20 43

Acceptance criteria

  • QA checklist has been completed
  • Screenshots have been attached that cover desktop and mobile screens

Definition of done

  • Documentation has been updated, if applicable
  • A link has been provided to the originating GitHub issue (or connected to it via ZenHub)

@ataker ataker added the patch Patch change in semantic versioning label Apr 2, 2024
@ataker ataker requested a review from a team as a code owner April 2, 2024 18:58

const errorID = uswds ? 'input-error-message': 'error-message';
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 don't see a reason to keep these error message IDs different. Should we update this to be the same across both versions? Or not worth the effort?

Copy link
Contributor

Choose a reason for hiding this comment

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

I would say not worth the effort, we'll be removing the V1 versions of components in a couple months anyways.


const errorID = uswds ? 'input-error-message': 'error-message';
Copy link
Contributor

Choose a reason for hiding this comment

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

I would say not worth the effort, we'll be removing the V1 versions of components in a couple months anyways.

@jamigibbs
Copy link
Contributor

jamigibbs commented Apr 2, 2024

I'm unable to test this in the Chromatic link because the link is broken (branch name is too long. It should to be 37 characters or less).

Has it been verified to work with a screenreader?

@ataker
Copy link
Contributor Author

ataker commented Apr 3, 2024

Working with screen reader, added screenshot

@ataker ataker merged commit 2d5d88b into main Apr 3, 2024
8 checks passed
@ataker ataker deleted the dst25-87-va-select-add-aria-describedby branch April 3, 2024 19:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
patch Patch change in semantic versioning
Projects
None yet
Development

Successfully merging this pull request may close these issues.

va-select needs describedby property
3 participants