fix(ui): Fix nested Accordion icon state issue (#32488)

* fix(ui): Fix nested Accordion icon state issue

Signed-off-by: samarthsinh2660 <rajuvala80@gmail.com>

* Update packages/ui/src/components/Accordion/Accordion.module.css

Co-authored-by: Gabriel Dugny <gabriel@dugny.me>
Signed-off-by: Samarthsinh vala <143015496+samarthsinh2660@users.noreply.github.com>

* Update packages/ui/src/components/Accordion/Accordion.module.css

Co-authored-by: Gabriel Dugny <gabriel@dugny.me>
Signed-off-by: Samarthsinh vala <143015496+samarthsinh2660@users.noreply.github.com>

* chore(ui): Add affected components string to changeset.

Allows the changeset sync script for the UI docs to pick the component up automatically and include the change in the changelog on the component page.

Signed-off-by: Johan Persson <johanopersson@gmail.com>

---------

Signed-off-by: samarthsinh2660 <rajuvala80@gmail.com>
Signed-off-by: Samarthsinh vala <143015496+samarthsinh2660@users.noreply.github.com>
Signed-off-by: Johan Persson <johanopersson@gmail.com>
Co-authored-by: Gabriel Dugny <gabriel@dugny.me>
Co-authored-by: Johan Persson <johanopersson@gmail.com>

.changeset/fix-nested-accordion-icon-state.md

@@ -0,0 +1,7 @@
+---
+'@backstage/ui': patch
+---
+
+Fixed nested Accordion icon state issue where the inner accordion's arrow icon would incorrectly show as expanded when only the outer accordion was expanded. The CSS selector now uses a direct parent selector to ensure the icon only responds to its own accordion's expanded state.
+
+Affected components: Accordion

packages/ui/src/components/Accordion/Accordion.module.css

@@ -73,13 +73,13 @@
     width: 1rem;
     height: 1rem;
 
-    [data-expanded='true'] & {
+    .bui-Accordion[data-expanded='true'] > .bui-AccordionTrigger & {
       transform: rotate(180deg);
     }
   }
 
   .bui-AccordionPanel {
-    [data-expanded='true'] & {
+    .bui-Accordion[data-expanded='true'] > & {
       padding-top: var(--bui-space-1);
     }
   }