fix(accordion): use disabled colors for the disabled state in the ionic theme

core/src/components/accordion/accordion.ionic.scss

@@ -73,10 +73,5 @@
 
 // Disabled Accordion
 // --------------------------------------------------
-
-:host(.accordion-disabled)::before {
-  @include globals.border-radius(inherit);
-  @include globals.disabled-state();
-
-  z-index: 2;
-}
+// The disabled colors are set in core.ionic.scss because the header
+// and content are slotted (light DOM).

core/src/css/ionic/core.ionic.scss

@@ -321,6 +321,19 @@ ion-accordion.accordion-animated > [slot="header"] .ion-accordion-toggle-icon {
   transition: globals.$ion-transition-time-300 transform globals.$ion-transition-curve-quick;
 }
 
+// A disabled accordion keeps its background and switches its text and
+// icons to the disabled colors. Descendant selectors cover nested
+// accordions, which are disabled with their parent.
+ion-accordion.accordion-disabled [slot="header"],
+ion-accordion.accordion-disabled [slot="content"],
+ion-accordion.accordion-disabled [slot="content"] ion-item {
+  color: globals.$ion-text-disabled;
+}
+ion-accordion.accordion-disabled ion-icon,
+ion-accordion.accordion-disabled [slot="header"] .ion-accordion-toggle-icon {
+  color: globals.$ion-icon-disabled;
+}
+
 @media (prefers-reduced-motion: reduce) {
   ion-accordion .ion-accordion-toggle-icon {
     /* stylelint-disable declaration-no-important */