feat(layout): basic ARIA & some padding

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;
     }
 }

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;

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}