[Components and pattern standards] Design components or patterns don't align with Design System guidelines. (04.07.2)

General Information

VFS team name

MHV

VFS product name

My HealtheVet

VFS feature name

Secure Messaging

Point of Contact/Reviewers

Brian DeConinck - @briandeconinck - Accessibility

*For more information on how to interpret this ticket, please refer to the Anatomy of a Staging Review issue ticket guidance on Platform Website.

Platform Issue

Design components or patterns don't align with Design System guidelines.

Issue Details

On /compose/, the "Edit list" element beneath the "To" field is coded as a button, but visually styled as a link. Styling a button as a link may cause issues for voice command users --- a user might expect the command "Click link" to highlight all of the links on the page to choose the link they want to select, and when "Edit list" isn't highlighted as an option they have to guess what the correct command should be.

Link, screenshot or steps to recreate

Currently coded as:

<button type="button" class="link-button edit-input-button">Edit List</button>

VA.gov Experience Standard

Category Number 04, Issue Number 07

Other References

WCAG SC 3.2.4 AA

Platform Recommendation

Maintain material honesty, with links navigating and buttons doing things --- both semantically and visually. If it's a <button>, it should look like a button so that users know what kind of element they're trying to use.

VFS Guidance

Close the ticket when the issue has been resolved or validated by your Product Owner
If your team has additional questions or needs Platform help validating the issue, please comment on the ticket
Some feedback provided may be out of scope for your iteration of the product, however, Platform's OCTO leadership has stated that all identified issues need to be documented and it is still your responsibility to resolve the issue.
If you do not believe that this Staging Review issue ticket is the responsibility of your team, comment below providing an explanation and who you believe is responsible. Please tag the Point of Contact/Reviewers. Governance team will research and will follow up.

department-of-veterans-affairs / va.gov-team