fix: prevent hover from overriding active styles

Accordion item's background color should change on active, but it wasn't
visible when it was active and hovered. Active styles should take
precedence over hover styles but the @hover media query prevents this.
To fix this, the specificity of the active styles was increased, similar
to #3767.

Author: rise-erpelding

components/accordion/dist/metadata.json

@@ -23,7 +23,7 @@
     ".spectrum-Accordion-item:first-child",
     ".spectrum-Accordion-itemContent",
     ".spectrum-Accordion-itemHeader",
-    ".spectrum-Accordion-itemHeader:active",
+    ".spectrum-Accordion-itemHeader.spectrum-Accordion-itemHeader:active",
     ".spectrum-Accordion-itemHeader:focus-visible",
     ".spectrum-Accordion-itemHeader:hover",
     ".spectrum-Accordion-itemHeading",

components/accordion/index.css

@@ -308,7 +308,8 @@
 		outline-offset: var(--mod-accordion-item-focus-indicator-gap, var(--spectrum-accordion-item-focus-indicator-gap), 0);
 	}
 
-	&:active {
+	/* higher specificity to maintain active styles over @media hover styles */
+	&.spectrum-Accordion-itemHeader:active {
 		background-color: var(--spectrum-accordion-background-color-down);
 		color: var(--spectrum-accordion-item-header-color-down);
 	}