refactor: update accordion doc and demo

Author: mertsincan

apps/showcase/demo/styled/accordion/trigger-demo.tsx

@@ -2,6 +2,7 @@
 import { Minus } from '@primeicons/react/minus';
 import { Plus } from '@primeicons/react/plus';
 import { Accordion } from '@primereact/ui/accordion';
+import { Button } from '@primereact/ui/button';
 
 export default function TriggerDemo() {
     return (
@@ -27,7 +28,7 @@ export default function TriggerDemo() {
                             <p>Is my data secure?</p>
                             <small className="text-surface-500">Only the icon is clickable in this example.</small>
                         </div>
-                        <Accordion.Trigger className="mr-2 inline-flex size-8 items-center justify-center rounded-full border hover:bg-surface-100 focus-visible:outline-2">
+                        <Accordion.Trigger as={Button} variant="outlined" rounded className="mr-2 size-8">
                             <Accordion.Indicator match="open">
                                 <Minus />
                             </Accordion.Indicator>

apps/showcase/demo/styled/accordion/with-radiobutton-demo.tsx

@@ -60,7 +60,10 @@ export default function WithRadioButtonDemo() {
                                     </span>
                                     <span className="font-semibold text-base">{item.price}</span>
                                 </Accordion.Header>
-                                <Accordion.Content className="bg-transparent px-4 leading-6 pl-12.5">
+                                <Accordion.Content
+                                    className="bg-transparent px-4 leading-6 pl-12.5"
+                                    pt-pccollapsible-content={{ inner: { className: 'bg-transparent' } }}
+                                >
                                     <p className="text-sm">{item.description}</p>
                                 </Accordion.Content>
                             </Accordion.Panel>

apps/showcase/docs/styled/components/accordion/features.mdx

@@ -90,7 +90,7 @@ Create accordion panels dynamically by iterating over a data source to keep stru
 
 Accordion headers are buttons. They use `aria-controls` to reference the content region and `aria-expanded` to reflect visibility state. The announced label can be customized with `aria-label` or `aria-labelledby` via pt.
 
-The content uses `role="region"` and an `id` that matches the header button's `aria-controls`. It also uses `aria-labelledby` to reference the header id.
+The content uses `role="region"` and an `id` that matches the header button's `aria-controls`.
 
 ### Header Keyboard Support