1 files changed, 28 insertions, 0 deletions
diff --git a/packages/excalidraw/components/Section.tsx b/packages/excalidraw/components/Section.tsx
new file mode 100644
index 0000000..8cd0aaa
--- /dev/null
+++ b/packages/excalidraw/components/Section.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+import { t } from "../i18n";
+import { useExcalidrawContainer } from "./App";
+
+export const Section: React.FC<{
+  heading: "canvasActions" | "selectedShapeActions" | "shapes";
+  children?: React.ReactNode | ((heading: React.ReactNode) => React.ReactNode);
+  className?: string;
+}> = ({ heading, children, ...props }) => {
+  const { id } = useExcalidrawContainer();
+  const header = (
+    <h2 className="visually-hidden" id={`${id}-${heading}-title`}>
+      {t(`headings.${heading}`)}
+    </h2>
+  );
+  return (
+    <section {...props} aria-labelledby={`${id}-${heading}-title`}>
+      {typeof children === "function" ? (
+        children(header)
+      ) : (
+        <>
+          {header}
+          {children}
+        </>
+      )}
+    </section>
+  );
+};