From 5a09a80902a66a8d9ca7f8e13a2675f1837347f2 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sun, 14 Dec 2025 21:20:55 +0200
Subject: [PATCH] feat(layout): basic ARIA & some padding

---
 apps/client/src/widgets/layout/NoteTitleActions.css |  4 +---
 apps/client/src/widgets/react/Collapsible.css       |  4 ++++
 apps/client/src/widgets/react/Collapsible.tsx       | 11 ++++++++---
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/apps/client/src/widgets/layout/NoteTitleActions.css b/apps/client/src/widgets/layout/NoteTitleActions.css
index 7d1c2f86c..084901d54 100644
--- a/apps/client/src/widgets/layout/NoteTitleActions.css
+++ b/apps/client/src/widgets/layout/NoteTitleActions.css
@@ -4,8 +4,6 @@ body.experimental-feature-new-layout {
     }
 
     .title-actions {
-        padding-inline-start: 15px;
-        padding-top: 1em;
-        padding-bottom: 0.2em;
+        padding: 0.75em 15px;
     }
 }
diff --git a/apps/client/src/widgets/react/Collapsible.css b/apps/client/src/widgets/react/Collapsible.css
index 4ebbf29db..aaa61b6e6 100644
--- a/apps/client/src/widgets/react/Collapsible.css
+++ b/apps/client/src/widgets/react/Collapsible.css
@@ -3,6 +3,10 @@
         line-height: 1em;
         display: flex;
         align-items: center;
+        appearance: none;
+        background: transparent;
+        border: 0;
+        color: inherit;
 
         .arrow {
             font-size: 1.3em;
diff --git a/apps/client/src/widgets/react/Collapsible.tsx b/apps/client/src/widgets/react/Collapsible.tsx
index a50531a45..2bf5be43d 100644
--- a/apps/client/src/widgets/react/Collapsible.tsx
+++ b/apps/client/src/widgets/react/Collapsible.tsx
@@ -4,7 +4,7 @@ import clsx from "clsx";
 import { ComponentChildren, HTMLAttributes } from "preact";
 import { useRef, useState } from "preact/hooks";
 
-import { useElementSize } from "./hooks";
+import { useElementSize, useUniqueName } from "./hooks";
 import Icon from "./Icon";
 
 interface CollapsibleProps extends Pick<HTMLAttributes<HTMLDivElement>, "className"> {
@@ -18,21 +18,26 @@ export default function Collapsible({ title, children, className, initiallyExpan
     const innerRef = useRef<HTMLDivElement>(null);
     const [ expanded, setExpanded ] = useState(initiallyExpanded);
     const { height } = useElementSize(innerRef) ?? {};
+    const contentId = useUniqueName();
 
     return (
         <div className={clsx("collapsible", className, expanded && "expanded")}>
-            <div
+            <button
                 className="collapsible-title"
                 onClick={() => setExpanded(!expanded)}
+                aria-expanded={expanded}
+                aria-controls={contentId}
             >
                 <Icon className="arrow" icon="bx bx-chevron-right" />&nbsp;
                 {title}
-            </div>
+            </button>
 
             <div
+                id={contentId}
                 ref={bodyRef}
                 className="collapsible-body"
                 style={{ height: expanded ? height : "0" }}
+                aria-hidden={!expanded}
             >
                 <div
                     ref={innerRef}