From df2379eefeb0e09f51792d5758222a4f06b7a02a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?nicole=20miko=C5=82ajczyk?= <git@mkljczk.pl>
Date: Wed, 18 Feb 2026 13:52:57 +0100
Subject: [PATCH] nicolium: add aria-labelledby for widgets
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
---
 packages/pl-fe/src/components/ui/widget.tsx | 44 +++++++++++----------
 1 file changed, 24 insertions(+), 20 deletions(-)

diff --git a/packages/pl-fe/src/components/ui/widget.tsx b/packages/pl-fe/src/components/ui/widget.tsx
index d2b18971c..44b2d7306 100644
--- a/packages/pl-fe/src/components/ui/widget.tsx
+++ b/packages/pl-fe/src/components/ui/widget.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import IconButton from '@/components/ui/icon-button';
 
@@ -26,24 +26,28 @@ const Widget: React.FC<IWidget> = ({
   actionTitle,
   action,
   className,
-}): JSX.Element => (
-  <div className={clsx('⁂-widget', className)}>
-    {(title ?? action ?? onActionClick) && (
-      <div className='⁂-widget__header'>
-        {title && <h1>{title}</h1>}
-        {action ??
-          (onActionClick && (
-            <IconButton
-              className='⁂-widget__icon'
-              src={actionIcon}
-              onClick={onActionClick}
-              title={actionTitle}
-            />
-          ))}
-      </div>
-    )}
-    <div className='⁂-widget__body'>{children}</div>
-  </div>
-);
+}): JSX.Element => {
+  const widgetId = useMemo(() => crypto.randomUUID(), []);
+
+  return (
+    <div className={clsx('⁂-widget', className)} aria-labelledby={`widget-header-${widgetId}`}>
+      {(title ?? action ?? onActionClick) && (
+        <div className='⁂-widget__header'>
+          {title && <h1 id={`widget-header-${widgetId}`}>{title}</h1>}
+          {action ??
+            (onActionClick && (
+              <IconButton
+                className='⁂-widget__icon'
+                src={actionIcon}
+                onClick={onActionClick}
+                title={actionTitle}
+              />
+            ))}
+        </div>
+      )}
+      <div className='⁂-widget__body'>{children}</div>
+    </div>
+  );
+};
 
 export { Widget as default };