va-link, etc. don't provide innerText, cause issues with recording actions in Datadog

[dcloud]

Bug Report or Design System update

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

What happened

Datadog is recording unexpected or unhelpful action names for clicks on VADS web components.

While investigating issues with Datadog, I noticed that two VADS web components, va-link and va-alert-expandable, provide empty strings for element.innerText or element.textContent, so DDG goes up the DOM tree looking for something that can provide an action name.

Adding a data-dd-action-name might fix this given Datadog can find that attribute if set on a web component, but that would require every engineer to add this attribute to va-link to get the expected "out-of-the-box" behavior for element.innerText.

What I expected to happen

I expected a va-link clicks to record the link text like a normal a would.

Reproducing

• Formation version: Whatever vets-website is currently using
• Device: Macbook Pro
• Browser: Firefox

Steps to reproduce:

1. Click on a va-link component and observe what Datadog records. It won't be the link text!

OR

1. Interact with a va-link element in console, run element.innerText and see that it returns an empty string.

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

Details

I have some notes in department-of-veterans-affairs/va.gov-team#87625 from looking at how Datadog RUM looks for action names.

Originally created department-of-veterans-affairs/va.gov-team#88060 due to looking at that repo's "Create Issue" templates first.

[caw310]

Hey team! Please add your planning poker estimate with Zenhub @Andrew565 @ataker @harshil1793 @it-harrison @jamigibbs @micahchiang @nickjg231 @powellkerry @rmessina1010 @rsmithadhoc

[dcloud]

Wrote introtext when I meant va-alert-expandable, fixing the description

[micahchiang]

@dcloud - Thanks for raising this. I think element.innerText being empty is weirdly expected behavior for components that use the shadow dom because they aren't technically HTMLElement interfaces, but instead ShadowRoot interfaces. The ShadowRoot interface doesn't have an innerText instance property.

Instead, adding a datadog ID to the internals of the components you need may be a way forward similar to this pull request - https://github.com/department-of-veterans-affairs/component-library/pull/936/files

[dcloud]

@micahchiang Thanks for the explanation, that makes sense from a technical viewpoint.

I think people would expect a <va-link /> to behave like an <a />, which does response to innerText. I'd think anything that can qualify as phrasing content should return a non-empty string for innerText (or textContent).

That said, having looked at how datadog searches for action names, having VADS components automatically set the data-dd-action-name attribute sounds reasonable, particularly for components like va-alert-expandable which has a clickable link embedded within its ShadowRoot.

[wesrowe]

@caw310, do you think this is something your team will prioritize?

[caw310]

We will add this to our backlog but not sure exactly when we will get to this.