From f6e05a278a967e059a6efff6ad129e32784fe148 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?nicole=20miko=C5=82ajczyk?= <git@mkljczk.pl>
Date: Tue, 3 Mar 2026 12:03:30 +0100
Subject: [PATCH] nicolium: a11y
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/nicolium/src/components/ui/toast.tsx | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/packages/nicolium/src/components/ui/toast.tsx b/packages/nicolium/src/components/ui/toast.tsx
index ea5782922..ce863741d 100644
--- a/packages/nicolium/src/components/ui/toast.tsx
+++ b/packages/nicolium/src/components/ui/toast.tsx
@@ -42,6 +42,11 @@ const Toast: React.FC<IToast> = (props) => {
     toast.dismiss(t.id);
   };
 
+  const liveRegionRole = type === 'error' ? 'alert' : 'status';
+  const liveRegionPriority = type === 'error' ? 'assertive' : 'polite';
+  const messageId = `toast-message-${String(t.id)}`;
+  const summaryId = summary ? `toast-summary-${String(t.id)}` : undefined;
+
   const renderIcon = () => {
     switch (type) {
       case 'success':
@@ -85,6 +90,10 @@ const Toast: React.FC<IToast> = (props) => {
   return (
     <div
       data-testid='toast'
+      role={liveRegionRole}
+      aria-live={liveRegionPriority}
+      aria-atomic='true'
+      aria-describedby={summaryId ? `${messageId} ${summaryId}` : messageId}
       className={clsx({
         [`⁂-toast ⁂-toast--${type}`]: true,
         '⁂-toast--visible': t.visible,
@@ -95,7 +104,9 @@ const Toast: React.FC<IToast> = (props) => {
           <div className='⁂-toast__content'>
             <div className={`⁂-toast__icon`}>{renderIcon()}</div>
 
-            <p data-testid='toast-message'>{renderText(message)}</p>
+            <p id={messageId} data-testid='toast-message'>
+              {renderText(message)}
+            </p>
           </div>
 
           {/* Action */}
@@ -110,13 +121,14 @@ const Toast: React.FC<IToast> = (props) => {
             onClick={dismissToast}
             data-testid='toast-dismiss'
             title={intl.formatMessage(messages.close)}
+            aria-label={intl.formatMessage(messages.close)}
           >
             <Icon src={require('@phosphor-icons/core/regular/x.svg')} className='size-5' />
           </button>
         </div>
       </div>
 
-      {summary ? <p>{summary}</p> : null}
+      {summary ? <p id={summaryId}>{summary}</p> : null}
     </div>
   );
 };