White accordion option

[GaryRidgway]

No description provided.

[joewhitsitt]

pulling to test

wait, realized that this might not be ready for review yet.

[bspeare]

Sorry @joewhitsitt, this is not set as draft so we can share the dev url with brand team. I should have posted that here.

[pyrello]

Set to draft until we're clear on next steps.

[bspeare]

A few findings on icon placement:

https://carbondesignsystem.com/components/accordion/accessibility/

Carbon chevrons are right-aligned by default, but left-aligned chevrons are more accessible for users with low vision, as the expanded/collapsed indicator is closer to the accordion title.

https://www.srishti.design/accordions#comp-m0f3au2g

https://www.viget.com/articles/testing-accordion-menu-designs-iconography

Analyzing the results, the most convincing data involved icon location. Presented with an icon to the right of the menu item, many participants preferred to click the icon rather than the text label (Figure 2). In addition, in every case, designs with icons to the right resulted in slower task times.

https://practical-accessibility.today/chapters/accordion/

• Uses left icon position

https://adrianroselli.com/2023/08/progressively-enhanced-html-accordion.html

• Uses left icon position

[bspeare]

Examples using arrows and icons:

https://www.shadcn.io/patterns/accordion-subtitle-2

The left arrow does open the use of adding a badge to the right of the accordion for status and category indications.

[bspeare]

Updated branch with left icon: https://uids.brand.uiowa.edu/branches/gold-accordion/?path=/story/components-accordion--multi-select&args=background:white&globals=backgrounds.value:!hex(f3f3f3).