feat(accordion): allow to use a ReactNode as title for an accordion

src/components/Accordion/Accordion.stories.mdx

@@ -190,3 +190,55 @@ The expanded accordion section can be controlled by external state.
     {Template.bind({})}
   </Story>
 </Canvas>
+
+### Custom headings
+
+The `title` prop can be a `ReactNode`, allowing a higher degree of customisation of the section titles.
+
+<Canvas>
+  <Story
+    name="Custom headings"
+    args={{
+      sections: [
+        {
+          title: <>Advanced topics <span className="u-text--muted p-text--small">optional</span></>,
+          content: (
+            <>
+              <p>Charm bundles</p>
+              <p>Machine authentication</p>
+              <p>Migrating models</p>
+              <p>Using storage</p>
+              <p>Working with actions</p>
+              <p>Working with resources</p>
+              <p>Cloud image metadata</p>
+              <p>Tools</p>
+            </>
+          ),
+        },
+        {
+          title: <>Networking <span className="u-text--muted p-text--small">optional</span></>,
+          content: (
+            <>
+              <p>Working offline</p>
+              <p>Fan container networking</p>
+              <p>Network spaces</p>
+            </>
+          ),
+        },
+        {
+          title: <>Miscellaneous <span className="u-text--muted p-text--small">optional</span></>,
+          content: (
+            <>
+              <p>Juju GUI</p>
+              <p>CentOS support</p>
+              <p>Collecting Juju metrics</p>
+            </>
+          ),
+        },
+      ],
+      titleElement: "h3",
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>

src/components/Accordion/AccordionSection/AccordionSection.test.tsx

@@ -87,4 +87,23 @@ describe("AccordionSection ", () => {
 
     expect(onTitleClick).toHaveBeenCalledWith(true, "first-key");
   });
+
+  it("renders custom headings for titles", () => {
+    render(
+      <AccordionSection
+        content={<span>Test</span>}
+        expanded="abcd-1234"
+        setExpanded={jest.fn()}
+        title={
+          <>
+            <span>Test section </span>
+            <span>optional</span>
+          </>
+        }
+      />
+    );
+    const title = screen.getByRole("tab");
+    expect(title.children).toHaveLength(2);
+    expect(title).toHaveTextContent("Test section optional");
+  });
 });

src/components/Accordion/AccordionSection/AccordionSection.tsx

@@ -24,11 +24,11 @@ export type Props = {
    * An optional key to be used to track which section is selected.
    */
   sectionKey?: string;
-  setExpanded?: (key: string | null, title: string | null) => void;
+  setExpanded?: (key: string | null, title: ReactNode | null) => void;
   /**
    * The title of the section.
    */
-  title?: string;
+  title?: ReactNode;
   /**
    * Optional string describing heading element that should be used for the section titles.
    */