From 5f539ebc3d2e012427f92cc6b0580d0952e6090b Mon Sep 17 00:00:00 2001
From: Philipp Ahrendt <philipp.ahrendt@cloudogu.com>
Date: Wed, 27 Nov 2024 14:17:26 +0100
Subject: [PATCH] Accessible file details

---
 gradle/changelog/accessible_file_details.yaml        |  2 ++
 .../src/repos/sources/containers/Content.tsx         | 12 +++++++++---
 2 files changed, 11 insertions(+), 3 deletions(-)
 create mode 100644 gradle/changelog/accessible_file_details.yaml

diff --git a/gradle/changelog/accessible_file_details.yaml b/gradle/changelog/accessible_file_details.yaml
new file mode 100644
index 0000000000..a33e0e8caa
--- /dev/null
+++ b/gradle/changelog/accessible_file_details.yaml
@@ -0,0 +1,2 @@
+- type: fixed
+  description: Improved accessibility for file details
diff --git a/scm-ui/ui-webapp/src/repos/sources/containers/Content.tsx b/scm-ui/ui-webapp/src/repos/sources/containers/Content.tsx
index 0e569acec7..cf09b4be96 100644
--- a/scm-ui/ui-webapp/src/repos/sources/containers/Content.tsx
+++ b/scm-ui/ui-webapp/src/repos/sources/containers/Content.tsx
@@ -27,6 +27,7 @@ import HistoryView from "./HistoryView";
 import AnnotateView from "./AnnotateView";
 import ContentActionMenu from "../components/content/overflowMenu/ContentActionMenu";
 import { useContentType } from "@scm-manager/ui-api";
+import { useAriaId } from "@scm-manager/ui-core";
 
 type Props = {
   file: File;
@@ -48,8 +49,10 @@ const BorderBottom = styled.div`
   border-bottom: 1px solid var(--scm-border-color);
 `;
 
-const FullWidthTitleHeader = styled.div`
+const FullWidthTitleHeader = styled.button`
   max-width: 100%;
+  border: none;
+  background-color: transparent;
 `;
 
 const BorderLessDiv = styled.div`
@@ -66,6 +69,7 @@ const Content: FC<Props> = ({ file, repository, revision, breadcrumb, error }) =
   const [selected, setSelected] = useState<SourceViewSelection>("source");
   const [errorFromExtension, setErrorFromExtension] = useState<Error>();
   const { data: contentType } = useContentType((file._links.self as Link).href);
+  const fileDetailsId = useAriaId();
 
   const wrapContent = (content: ReactNode) => {
     return (
@@ -128,8 +132,10 @@ const Content: FC<Props> = ({ file, repository, revision, breadcrumb, error }) =
       <HeaderWrapper>
         <div className={classNames("level", "is-flex-wrap-wrap")}>
           <FullWidthTitleHeader
-            className={classNames("level-left", "is-flex", "is-clickable", "is-word-break", "mr-2")}
+            className={classNames("is-word-break", "mr-2", "button", "p-0", "is-size-5", "has-text-weight-light")}
             onClick={toggleCollapse}
+            aria-controls={fileDetailsId}
+            aria-expanded={!collapsed}
           >
             {icon}
             {file.name}
@@ -171,7 +177,7 @@ const Content: FC<Props> = ({ file, repository, revision, breadcrumb, error }) =
     if (!collapsed) {
       return (
         <>
-          <div className="panel-block has-background-secondary-less">
+          <div className="panel-block has-background-secondary-less" id={fileDetailsId}>
             <table className="table has-background-secondary-less">
               <tbody>
                 <tr>