From 9fbcddfcaa61a83402b0d93690ba546c87d41f2a Mon Sep 17 00:00:00 2001
From: Konstantin Schaper <konstantin.schaper@cloudogu.com>
Date: Wed, 16 Aug 2023 14:56:09 +0200
Subject: [PATCH] Fix collapsible trigger accessibility

---
 scm-ui/ui-layout/src/collapsible/Collapsible.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/scm-ui/ui-layout/src/collapsible/Collapsible.tsx b/scm-ui/ui-layout/src/collapsible/Collapsible.tsx
index eb0a0951dc..1e084b667f 100644
--- a/scm-ui/ui-layout/src/collapsible/Collapsible.tsx
+++ b/scm-ui/ui-layout/src/collapsible/Collapsible.tsx
@@ -26,6 +26,7 @@ import React, { ComponentProps, ReactNode, useState } from "react";
 import * as RadixCollapsible from "@radix-ui/react-collapsible";
 import { Icon } from "@scm-manager/ui-buttons";
 import styled from "styled-components";
+import { useGeneratedId } from "@scm-manager/ui-components";
 
 const StyledTrigger = styled(RadixCollapsible.Trigger)`
   margin-right: 0.5rem;
@@ -40,16 +41,19 @@ type Props = {
 } & Pick<ComponentProps<typeof RadixCollapsible.Root>, "defaultOpen">;
 
 /**
- * @beta;
+ * @beta
  * @since 2.46.0
  */
 const Collapsible = React.forwardRef<HTMLButtonElement, Props>(({ children, header, defaultOpen }, ref) => {
   const [open, setOpen] = useState(defaultOpen);
+  const titleId = useGeneratedId();
   return (
     <RadixCollapsible.Root className="card" open={open} onOpenChange={setOpen} defaultOpen={defaultOpen}>
       <StyledCollapsibleHeader className="card-header is-flex is-justify-content-space-between is-shadowless">
-        <span className="card-header-title">{header}</span>
-        <StyledTrigger className="card-header-icon" ref={ref}>
+        <span id={titleId} className="card-header-title">
+          {header}
+        </span>
+        <StyledTrigger aria-labelledby={titleId} className="card-header-icon" ref={ref}>
           <Icon>{open ? "angle-up" : "angle-down"}</Icon>
         </StyledTrigger>
       </StyledCollapsibleHeader>