department-of-veterans-affairs / vets-design-system-documentation

Repository for design.va.gov website
https://design.va.gov
36 stars 55 forks source link

<dfn> is not read by VO/Chrome in link component #2817

Open laflannery opened 2 weeks ago

laflannery commented 2 weeks ago

Bug Report

What happened

The <va-link> component has channel, video and download props that append text using a <dfn> tag. VO does not read this text, so I'm not getting necessary information I need to understand the purpose of the link.

For example, I have a link going to a Youtube channel and visually it says "Veterans Health Administration YouTube" but on VO all I hear is "Veterans Health Administration". It does work on NVDA.

What I expected to happen

I would expect that I hear the same text in all Browsers/screen readers that I see visually so that all users understand the full purpose of the links.

Reproducing

Steps to reproduce:

1. 2. 3. 4.

Urgency

How urgent is this request? Please select the appropriate option below and/or provide details

Details

The <dfn> tag seems overly complex for appending text in this way, or perhaps just not the proper way to use this. From MDN:

The HTML element indicates a term to be defined

We aren't defining terms here, we are just adding more text to create more specific link text. Could simply appending it with a <span> or building new link text with an aria-label be considered instead of using this particular tag?