[Mobile] va-table issue in mobile where HTML tags are displaying in headers

[FranECross]

Description

In early October 2024, we converted all HTML tables in content-build to move from the V1 to V3 DS va-table component.

We discovered while working that ticket that table headers from Drupal content did not appear on mobile and filed (DST defect 3327), & Slack discussion with DST about it).

DST fixed this mid-October and now table headers appear BUT headers are constructed differently in the markup on mobile vs. desktop (this was the case prior to the recent fix). Mobile uses a ::before element for the text and desktop does not. This causes any HTML created within the Drupal table header to be rendered in the Front-end as regular characters, and does not render as HTML. This issue is in production.

Scrum thread describing behavior in prod

There are cases, also, where the only HTML is a &nbsp, which is showing on mobile. These cases may be harder for Editors to mitigate in content, since the nbsp; is not immediately visible.

Also captions: I also found an instance of HTML being added to the Table caption field which also produced a display issue on mobile where it doesn't on desktop:

• The HTML that was added to the caption (in this case an <h3> tag) did not get respected on Desktop, it was simply ignored as it should have been and displayed as Table caption - a <caption> cannot and should not be a heading.
• However, on Mobile, this displayed as <h3>Table caption<h3> which is incorrect, we shouldn't see the HTML tags.

We don't have a valid use case for Editors entering HTML in the table caption field.

To reproduce

1. Visit: https://www.va.gov/family-and-caregiver-benefits/survivor-compensation/survivors-pension/rates/past-rates-2021/ or https://www.va.gov/family-and-caregiver-benefits/survivor-compensation/dependency-indemnity-compensation/survivor-rates/past-rates-2021/
2. In browser, use Developer tools to switch to Mobile OR load pages in an actual mobile browser
3. See in table headers, that HTML markup shows as legible characters

Impact

Mobile-only. Any table created in Drupal that includes HTML in the table header renders the markup as text characters on mobile. We have 1500 known tables. Verifying how many include HTML is manual.

Drupal notes

Editors in Drupal can create tables using the Table paragraph type. Editors create rows for the table and the first row is used as the header. Editors sometimes include HTML for formatting including bold, or to include links.

Table field is present in several areas of Drupal, and is managed by a contributed module. We do not have a clear path to limit Editors' ability to enter HTML in only the header row.

• Table paragraph type uses a field type tablefield. Not a text field, we can't apply text formatting rule to govern which html characters are/aren't allowed.
• If we consider not allowing HTML in table cells, we would need to limit this to the first row only (the table header row) because HTML is quite often used in the other table cells for actual purposes:
  • Most often, unordered lists are added by the CAIA Content team. This is built using <ul> and <li> tags in the table cell field in Drupal
  • I also did find at least 1 instance of a link being added to a cell
  • Some text is also bolded (<strong> tag)

Front-end fix

We need to determine if it's possible for the front-end to either render HTML properly or exclude the HTML characters from rendering as text.

Short term fix: manual Drupal data cleanup

Laura F is reviewing the 1500 tables to remove HTML where possible. We have an existing table audit to work from. Laura volunteered, Randi is willing to assist.

User story

AS A a Veteran et al using the Mobile app and looking pension rates, disability compensation rates, etc. I WANT to view table headers without HTML markup SO THAT I'm not confused and also so that I don't lose confidence in VA.gov

Acceptance criteria

• [ ] HTML markup doesn't display in table headers in mobile

[FranECross]

Michelle has given approval to work with DST to figure out a Front end fix.

[jilladams]

Started a thread with DST for next steps: https://dsva.slack.com/archives/C01DBGX4P45/p1730931073353459?thread_ts=1727883538.474889&cid=C01DBGX4P45