The <label> property is not working for va-link components when external=true

[cora-goldston-bah]

Bug Report

• I’ve searched for any related issues and avoided creating a duplicate issue.

What happened

For our product, we're using va-links that open in a new tab, so the external property is set to true. For these external va-links, we've populated the label field to differentiate similarly-worded links from each other for screen readers. However, the label property doesn't appear to be working. When we test with screen readers, the screen reader doesn't announce the value of the label property. We believe this issue is happening across all development environments.

What I expected to happen

We expected that a screen reader would announce the value populated in the label property field.

Reproducing

• Device: PC running Windows 10 Enterprise
• Browser: Chrome v130.0.6723.59
• Assistive technology: Screen reader

Steps to reproduce:

1. Visit this page on the staging site
2. Activate your screen reader program
3. Highlight the Learn more (opens in a new tab) link on the Burial in a VA national cemetery card
4. The screen reader should announce the link as "Learn more about Burial in a VA national cemetery", which is the value populated in the label property field. This is not happening when we test it

Urgency

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

• This bug is blocking work currently in progress
• This bug is affecting work currently in progress but we have a workaround
• This bug is blocking work planned within the next few sprints
• This bug is not blocking any work
• Other

[cora-goldston-bah]

Tagging my team members @nkontrabecki @vetskrieg @iseabock for awareness.

[nkontrabecki]

Hi @caw310 please advise on the status of this ticket. Thank you

[caw310]

@nkontrabecki This issue is tentatively slated to be worked on in mid-January or early February.

[caw310]

Provide your estimate of 1, 2, 3, 5, 8 or 13
@Andrew565 - 3
@ataker - 3
@harshil1793 - 3
@it-harrison - 3
@jamigibbs - 3
@micahchiang -
@powellkerry - 3
@rmessina1010 - 3
@rsmithadhoc - 2

[jamigibbs]

The label prop is getting assigned to aria-label for the default link but it looks like we may want to add that to all of the other link variations too (not just external). It's missing from quite a few of them.

    <a
      href={href}
      class={linkClass}
      onClick={handleClick}
      aria-label={this.label} <-----
      part="anchor"
      lang={lang}
      hrefLang={lang}
    >

[cora-goldston-bah]

Thank you, @jamigibbs ! We'll share this with our developers and have them populate the aria-label property for all of our links.

[jamigibbs]

@cora-goldston-bah This is an update that needs to happen within the web component. I should be able to start work on that today. Sorry for not being clear about that. Thanks for reporting it!

[cora-goldston-bah]

@jamigibbs Oh, got it — thank you so much!