Merge remote-tracking branch 'mkljczk/develop' into develop

packages/pl-fe/src/components/status.tsx

@@ -118,6 +118,7 @@ const StatusFollowedTagInfo: React.FC<IStatusFollowedTagInfo> = ({ status, avata
         <Icon
           src={require('@phosphor-icons/core/regular/hash.svg')}
           className='size-4 text-primary-600 dark:text-primary-400'
+          aria-hidden
         />
       }
       text={
@@ -342,6 +343,7 @@ const Status: React.FC<IStatus> = (props) => {
             <Icon
               src={require('@phosphor-icons/core/regular/repeat.svg')}
               className='size-4 text-green-600'
+              aria-hidden
             />
           }
           text={
@@ -425,6 +427,7 @@ const Status: React.FC<IStatus> = (props) => {
             <Icon
               src={require('@phosphor-icons/core/regular/repeat.svg')}
               className='size-4 text-green-600'
+              aria-hidden
             />
           }
           text={
@@ -453,6 +456,7 @@ const Status: React.FC<IStatus> = (props) => {
             <Icon
               src={require('@phosphor-icons/core/regular/push-pin.svg')}
               className='size-4 text-gray-600 dark:text-gray-400'
+              aria-hidden
             />
           }
           text={<FormattedMessage id='status.pinned' defaultMessage='Pinned post' />}
@@ -467,6 +471,7 @@ const Status: React.FC<IStatus> = (props) => {
             <Icon
               src={require('@phosphor-icons/core/regular/users-three.svg')}
               className='size-4 text-primary-600 dark:text-primary-400'
+              aria-hidden
             />
           }
           text={

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

packages/pl-fe/src/features/chats/components/chat-pane/chat-pane.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import { FormattedMessage } from 'react-intl';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { ChatWidgetScreens, useChatContext } from '@/contexts/chat-context';
 import { useStatContext } from '@/contexts/stat-context';
@@ -18,7 +18,12 @@ import Blankslate from './blankslate';
 
 import type { Chat } from 'pl-api';
 
+const messages = defineMessages({
+  newChat: { id: 'chat_pane.header.new_chat', defaultMessage: 'New chat' },
+});
+
 const ChatPane = () => {
+  const intl = useIntl();
   const { unreadChatsCount } = useStatContext();
   const showShoutbox = !useShoutboxIsLoading();
 
@@ -99,6 +104,7 @@ const ChatPane = () => {
           }
         }}
         secondaryActionIcon={require('@phosphor-icons/core/regular/note-pencil.svg')}
+        secondaryActionTitle={intl.formatMessage(messages.newChat)}
       />
 
       {isOpen ? renderBody() : null}

packages/pl-fe/src/features/notifications/components/notification.tsx

@@ -434,7 +434,7 @@ const Notification: React.FC<INotification> = (props) => {
         />
       );
     } else if (icons[displayedType]) {
-      return <Icon src={icons[displayedType]} className='⁂-notification__icon' />;
+      return <Icon src={icons[displayedType]} className='⁂-notification__icon' aria-hidden />;
     } else {
       return null;
     }

packages/pl-fe/src/features/status/components/detailed-status.tsx

@@ -54,6 +54,7 @@ const DetailedStatus: React.FC<IDetailedStatus> = ({
               <Icon
                 src={require('@phosphor-icons/core/regular/users-three.svg')}
                 className='size-4 text-primary-600 dark:text-primary-400'
+                aria-hidden
               />
             }
             text={