ebay-accordion: Accordion list styles unexpectedly apply to list items that are children of the accordion

[caseycarroll]

I verified there's no existing issue for this bug.

• There are no existing issues

Current behavior

When a list item is a descendant of an accordion, it receives the accordion divider border style intended to exist between accordion summary elements.

Expected behavior

The visual divider for accordions should not be applied to lists rendered inside of an accordion.

Skin version

19

Device/OS/Browser info

Macbook Pro, MacOS Sonoma, Chromium, Safari, Firefox

Steps to reproduce

Using the ebay core UI accordion component like so:


<ebay-accordion>
   <@details>
       <@summary>List of cool stuff</@summary>
       <ul>
            <li>Cats</li>
            <li>Coffee</li>
      </ul>
   </@details>
</ebay-accordion>


The list items "Cats" and "Coffee" will having the following CSS rule applied:

ul.accordion li:not(:last-child) {
    border-bottom: 1px solid var(--color-stroke-subtle);
}

Relevant code block

ul.accordion li:not(:last-child) {
    border-bottom: 1px solid var(--color-stroke-subtle);
}

This could be resolved by only targeting direct descendants.

ul.accordion > li:not(:last-child) {
    border-bottom: 1px solid var(--color-stroke-subtle);
}

Additional context