va-telephone - Update messageAriaDescribedby value for "Aria Described By" story

[RyanMunsch]

Chromatic

https://6099-va-telephone-messageAria-story--65a6e2ed2314f7b8f98609d8.chromatic.com

Summary

Updates the value passed to messageAriaDescribedby prop for the "Aria Described By" story of va-telephone so that it is not the same text of the contextual sibling element.

Description

Updates the value passed to the messageAriaDescribedby prop in the "Aria Described By" story of va-telephone so it no longer matches the text content of the sibling <span> element that serves as a label for the component.

This aligns the Storybook example with new accessibility guidance added to the component's docs. The underlying motivation for both changes is the same: duplicate aria-describedby values can cause screen readers to announce the label multiple times.

Related tickets and links

Closes department-of-veterans-affairs/vets-design-system-documentation#6099

Screenshots

Before

After

Testing and review

1. Navigate to the updated story
2. Turn on VoiceOver
3. Set VO cursor on component and note that the updated value is read after phone number.

Approvals

See the QA Checklists section below for suggested approvals. Use your best judgment if additional reviews are needed. When in doubt, request a review.

Approval groups

Add approval groups to the PR as needed:

• Engineering: platform-design-system-fe
• Accessibility: platform-design-system-a11y
• Design: platform-design-system-designer

QA checklists

Use the QA checklists below as guides, not rules. Not all checklists will apply to every PR but there could be some overlap.

In all scenarios, changes should be fully tested by the author and verified by the reviewer(s); functionality, responsiveness, etc.

✨ New Component Added

• The PR has the minor label
• The component matches the Figma designs.
• All properties, custom events, and utility functions have e2e and/or unit tests
• A new Storybook page has been added for the component
• Tested in all VA breakpoints.
• Chromatic UI Tests have run and snapshot changes have been accepted by the design reviewer
• Tested in vets-website using Verdaccio
• Engineering has approved the PR
• Design has approved the PR
• Accessibility has approved the PR

🌱 New Component Variation Added

• The PR has the minor label
• The variation matches its Figma design.
• Any new properties, custom events, or utility functions have e2e and/or unit tests
• A new story has been added to the component's existing Storybook page
• Any Chromatic UI snapshot changes have been accepted by a design reviewer
• Tested in vets-website using Verdaccio
• Engineering has approved the PR
• Design has approved the PR

🐞 Component Fix

• The PR has the patch label
• Any new properties, custom events, or utility functions have e2e and/or unit tests
• Any markup changes are evaluated for impact on vets-website.
  • Will any vets-website tests fail from the change?
• Any Chromatic UI snapshot changes have been reviewed and approved by a designer if necessary
• Engineering has approved the PR

♿️ Component Fix - Accessibility

• The PR has the patch label
• Any new properties, custom events, or utility functions have e2e and/or unit tests
• Any Chromatic UI snapshot changes have been reviewed and approved by a designer if necessary
• Engineering has approved the PR
• Accessibility has approved the PR

🚨 Component Fix - Breaking API Change

• The PR has the major label
• vets-website and content-build have been evaluated to determine the impact of the breaking change
• Any new properties, custom events, or utility functions have e2e and/or unit tests
• Any Chromatic UI snapshot changes have been reviewed and approved by a designer if necessary
• Tested in vets-website using Verdaccio
• Engineering has approved the PR

🔧 Component Update - Non-Breaking API Change

• The PR has the minor label
• Any new properties, custom events, or utility functions have e2e and/or unit tests
• Any Chromatic UI snapshot changes have been reviewed and approved by a designer if necessary
• Engineering has approved the PR

📖 Storybook Update

• The PR has the ignore-for-release label
• Any Chromatic UI snapshot changes have been reviewed and approved by a designer if necessary
• Engineering has approved the PR

🎨 CSS-Library Update

• The PR has the css-library label
• vets-website and content-build have been checked to determine the impact of any breaking changes
• Engineering has approved the PR

[TimRoe]

Approving, but just wanted to note I'm not sure why this needs aria-describedby at all vs just having the label then the link. Might deleting it entirely be better a11y because screen reader users know interacting with a phone number link will call it?

[RyanMunsch]

Hey @TimRoe. Good question. There's ongoing discussions between @amyleadem and @jeana-adhoc about whether or not the aria-describedby is indeed necessary for this component and the other components that use the same pattern. We don't want to remove it at this point, but there is a possibility that we will deprecate it in the future. You can view this Slack thread to see some discussion on resolving this issue as well as the future considerations for this pattern.

This ticket contains the original request for this functionality. Summary of the pertinent portions of that ticket:

What happened

We are currently using the <va-telephone> component with aria-describedby in the Facility Locator. The
purpose is to clearly label each phone number for each facility so a user understands which number to use for
which purpose. However, when tabbing through the page using a screen reader, the label is not being read out with > the phone number. For example, I am only hearing "617 248 1000" instead of "617 248 1000 Main Number"

What I expected to happen

I would expect, each phone number to be read followed by the phone number label, i.e. Main number, Mental Health number, etc.

Hopefully that helps answer your question.

[amyleadem]

Thanks for working this @RyanMunsch. I agree with @TimRoe that this component probably does not need an aria-describedby, but since we already have the prop, we should demonstrate it in the best use case we can. This will also be partnered with a guidance update that discourages the use of the attribute unless it is really necessary.

Just had a small recommendation to switch the visible and aria-describedby text. Curious what you think.