jilladams commented 1 year ago

Bug Report

[X] I’ve searched for any related issues and avoided creating a duplicate issue.

What happened

Encodable characters are rendered as unencoded in accodion headers. https://github.com/department-of-veterans-affairs/va.gov-cms/issues/11157#issuecomment-1289191139

What I expected to happen

` should appear, rather than &should appear rather than&`

Reproducing

Edit content to include space or & in an accordion header
See in front-end that it renders as HTML

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
[x] This bug is not blocking any work -- workaround is to modify content
[ ] Other

Details

A CMS user entered an ampersand & a trailing space in copy for an accordion header
In the front-end, this presented a &nbsp and &
The CMS already encapsulates html (converting & to &
Public Websites tried using the encode, escape and decode filters to mitigate, but within the context of accordion headers, they don't seem to apply at all.

We think this has something to do with the transclusion of HTML in the Design System components, which utilize the Slot element. Couldn't however find anything to out there to back this up, nor did anything stand out in the code for the Design Component collapsible component.

Reported in slack,2 related threads:

Re: https://github.com/department-of-veterans-affairs/component-library/blob/ce3b4b70118991bf2b380aac7f498457427a4cb4/packages/web-components/src/components/va-accordion/va-accordion-item.tsx#L118, potentially.

Content where this occurred: https://staging.cms.va.gov/node/3014/revisions revisions 689240, 689303, 689304, 689306, 689344 removed the characters that were not correctly being encoded, so the issue is no longer live on Prod.

laflannery commented 1 year ago

I tried putting an & in the property in Storybook and it did not render properly in the display on the accordion:

laflannery commented 1 year ago

To me, this is an accessibility issue. This could cause confusion for users in understanding the headings that contain these errors and in trying to determine what content might be contained within the accordions - therefore determining if they would like to expand and dive deeper into each accordion. While the bug is not blocking current work, this bug is making it more difficult for our editors to create good, accessible content for our Veterans. Is it possible to get this prioritized?

FranECross commented 8 months ago

@laflannery Do you know if this was ever fixed, maybe outside of this issue? I found this issue tagged as a blocker to this issue: https://github.com/department-of-veterans-affairs/va.gov-cms/issues/11157

laflannery commented 8 months ago

@FranECross This issue is not resolved. There is a chance it is in the v3 component though

FranECross commented 8 months ago

@jilladams This ticket isn't in a pipeline, but I do see it in the Icebox of Project Platform Design System. It's a blocker for an old ticket in our backlog that Laura has confirmed is still an issue. Who do you suggest on the Design team I can ping about this to see if I can get it some love? TIA!

jilladams commented 8 months ago

@caw310 is the owner of Design System issue intake, as far as I'm aware.

FranECross commented 5 months ago

@caw310 @micahchiang Just checking to find out the status of this item. :) We have a ticket in our backlog that shows this as blocking. Below is what's displayed in various places to Veterans et al. Thanks for any info you can provide!

caw310 commented 5 months ago

@FranECross this is in our backlog. We are working on other higher priority items right now since there is a work around for this and it isn't blocking other work.

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