Accordion web-component: Add error state functionality

[nickjg231]

Bug Report

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

What happened

The web component accordions in the component library do not have the ability to display a red background color to indicate an error state. In our custom accordions, which are to be replaced, we had this functionality.

What I expected to happen

The web component accordions should have the option to display a red background color for error states, similar to the custom accordions previously in use on the forms review page.

Reproducing

1. Navigate to the web component accordions on Storybook (V1 link / V3 link).
2. Attempt to set an error state with a red background color.
3. Observe that there is no option or functionality to change the background color to red for error states.

Urgency

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

• [ ] This bug is blocking work currently in progress
• [x] This bug is affecting work currently in progress but we have a workaround (using custom accordions until the component library is updated)
• [ ] This bug is blocking work planned within the next few sprints
• [ ] This bug is not blocking any work
• [ ] Other

Details The custom accordions on the forms review page had the ability to display a red background for error states. As we transition to using the web component accordions, this functionality has been lost. Having this error state background color feature would greatly improve the user experience, especially when it comes to visibility of errors.

[nickjg231]

Original support request

Here is an example of the current Accordion's (the non-web-component) behavior: Private Zenhub Image

[caw310]

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