From 79bf3a839835020555800481dd97a024add85e31 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?nicole=20miko=C5=82ajczyk?= <git@mkljczk.pl>
Date: Sat, 7 Feb 2026 22:24:48 +0100
Subject: [PATCH] pl-fe: random accessibility improvements
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
---
 .../src/components/dropdown-menu/dropdown-menu-item.tsx    | 2 +-
 packages/pl-fe/src/components/progress-circle.tsx          | 6 +++---
 packages/pl-fe/src/components/status.tsx                   | 4 ++--
 packages/pl-fe/src/components/ui/icon-button.tsx           | 2 +-
 .../src/features/compose/components/upload-button.tsx      | 3 +--
 .../compose/components/visual-character-counter.tsx        | 1 +
 packages/pl-fe/src/features/compose/editor/index.tsx       | 4 ++++
 packages/pl-fe/src/features/ui/components/hotkeys.tsx      | 7 +++++--
 8 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/packages/pl-fe/src/components/dropdown-menu/dropdown-menu-item.tsx b/packages/pl-fe/src/components/dropdown-menu/dropdown-menu-item.tsx
index f421b472d..717a3f5d7 100644
--- a/packages/pl-fe/src/components/dropdown-menu/dropdown-menu-item.tsx
+++ b/packages/pl-fe/src/components/dropdown-menu/dropdown-menu-item.tsx
@@ -112,7 +112,7 @@ const DropdownMenuItem = ({ index, item, onClick, autoFocus, onSetTab }: IDropdo
   }, [itemRef.current, index]);
 
   if (item === null) {
-    return <li className='mx-2 my-1 block h-[2px] bg-gray-100 dark:bg-gray-800' />;
+    return <hr className='mx-2 my-1 block h-[2px] border-none bg-gray-100 dark:bg-gray-800' />;
   }
 
   return (
diff --git a/packages/pl-fe/src/components/progress-circle.tsx b/packages/pl-fe/src/components/progress-circle.tsx
index 1956aa52c..63c68381a 100644
--- a/packages/pl-fe/src/components/progress-circle.tsx
+++ b/packages/pl-fe/src/components/progress-circle.tsx
@@ -1,21 +1,21 @@
 import clsx from 'clsx';
 import React from 'react';
 
-interface IProgressCircle {
+interface IProgressCircle extends React.HTMLAttributes<HTMLDivElement> {
   progress: number;
   radius?: number;
   stroke?: number;
   title?: string;
 }
 
-const ProgressCircle: React.FC<IProgressCircle> = ({ progress, radius = 12, stroke = 4, title }) => {
+const ProgressCircle: React.FC<IProgressCircle> = ({ progress, radius = 12, stroke = 4, title, ...props }) => {
   const progressStroke = stroke + 0.5;
   const actualRadius = radius + progressStroke;
   const circumference = 2 * Math.PI * radius;
   const dashoffset = circumference * (1 - Math.min(progress, 1));
 
   return (
-    <div title={title}>
+    <div title={title} {...props}>
       <svg
         width={actualRadius * 2}
         height={actualRadius * 2}
diff --git a/packages/pl-fe/src/components/status.tsx b/packages/pl-fe/src/components/status.tsx
index fc9ba124f..9769f4db3 100644
--- a/packages/pl-fe/src/components/status.tsx
+++ b/packages/pl-fe/src/components/status.tsx
@@ -407,7 +407,7 @@ const Status: React.FC<IStatus> = (props) => {
     };
 
     return (
-      <Hotkeys handlers={minHandlers} focusable={focusable}>
+      <Hotkeys handlers={minHandlers} focusable={focusable} element='article'>
         {body}
       </Hotkeys>
     );
@@ -526,7 +526,7 @@ const Status: React.FC<IStatus> = (props) => {
   };
 
   return (
-    <Hotkeys handlers={handlers} focusable={focusable} data-testid='status'>
+    <Hotkeys handlers={handlers} focusable={focusable} element='article' data-testid='status'>
       {body}
     </Hotkeys>
   );
diff --git a/packages/pl-fe/src/components/ui/icon-button.tsx b/packages/pl-fe/src/components/ui/icon-button.tsx
index 74dbb84b9..17a8b1e7c 100644
--- a/packages/pl-fe/src/components/ui/icon-button.tsx
+++ b/packages/pl-fe/src/components/ui/icon-button.tsx
@@ -40,7 +40,7 @@ const IconButton = React.forwardRef((props: IIconButton, ref: React.ForwardedRef
       data-testid={filteredProps['data-testid'] || 'icon-button'}
       {...(props.href ? { target: '_blank' } as any : {})}
     >
-      <SvgIcon src={src} className={iconClassName} />
+      <SvgIcon src={src} className={iconClassName} aria-hidden />
 
       {text ? (
         <Text tag='span' theme='inherit' size='sm'>
diff --git a/packages/pl-fe/src/features/compose/components/upload-button.tsx b/packages/pl-fe/src/features/compose/components/upload-button.tsx
index c0c27bda7..65a155f0e 100644
--- a/packages/pl-fe/src/features/compose/components/upload-button.tsx
+++ b/packages/pl-fe/src/features/compose/components/upload-button.tsx
@@ -71,8 +71,7 @@ const UploadButton: React.FC<IUploadButton> = ({
         onClick={handleClick}
       />
 
-      <label className='sr-only'>
-        <span>{intl.formatMessage(messages.upload)}</span>
+      <label aria-hidden>
         <input
           key={resetFileKey}
           ref={fileElement}
diff --git a/packages/pl-fe/src/features/compose/components/visual-character-counter.tsx b/packages/pl-fe/src/features/compose/components/visual-character-counter.tsx
index 8fcaccf18..8e0288d00 100644
--- a/packages/pl-fe/src/features/compose/components/visual-character-counter.tsx
+++ b/packages/pl-fe/src/features/compose/components/visual-character-counter.tsx
@@ -28,6 +28,7 @@ const VisualCharacterCounter: React.FC<IVisualCharacterCounter> = ({ text, max }
       progress={progress}
       radius={10}
       stroke={3}
+      aria-hidden
     />
   );
 };
diff --git a/packages/pl-fe/src/features/compose/editor/index.tsx b/packages/pl-fe/src/features/compose/editor/index.tsx
index 5786bbcde..f26192c28 100644
--- a/packages/pl-fe/src/features/compose/editor/index.tsx
+++ b/packages/pl-fe/src/features/compose/editor/index.tsx
@@ -196,6 +196,9 @@ const ComposeEditor = React.forwardRef<LexicalEditor, IComposeEditor>(({
                 )}
                 lang={language || undefined}
                 data-compose-id={composeId}
+                aria-label={textareaPlaceholder}
+                placeholder={<></>}
+                aria-placeholder={textareaPlaceholder}
               />
             </div>
           }
@@ -205,6 +208,7 @@ const ComposeEditor = React.forwardRef<LexicalEditor, IComposeEditor>(({
                 'pointer-events-none absolute top-0 select-none text-[1rem] text-gray-600 dark:placeholder:text-gray-600',
                 placeholderClassName,
               )}
+              aria-hidden
             >
               {textareaPlaceholder}
             </div>
diff --git a/packages/pl-fe/src/features/ui/components/hotkeys.tsx b/packages/pl-fe/src/features/ui/components/hotkeys.tsx
index 694c6060c..8d607d22a 100644
--- a/packages/pl-fe/src/features/ui/components/hotkeys.tsx
+++ b/packages/pl-fe/src/features/ui/components/hotkeys.tsx
@@ -283,6 +283,7 @@ interface IHotkeys extends React.HTMLAttributes<HTMLDivElement> {
    */
   focusable?: boolean;
   children: React.ReactNode;
+  element?: React.ComponentType | keyof JSX.IntrinsicElements;
 }
 
 /**
@@ -304,10 +305,12 @@ interface IHotkeys extends React.HTMLAttributes<HTMLDivElement> {
  *
  * Now this function will be called when the 'open' hotkey is pressed by the user.
  */
-export const Hotkeys: React.FC<IHotkeys> = ({ handlers, global, focusable = true, ...props }) => {
+export const Hotkeys: React.FC<IHotkeys> = ({ handlers, global, focusable = true, element: Element = 'div', ...props }) => {
   const ref = useHotkeys<HTMLDivElement>(handlers);
 
+  Element = Element as 'div';
+
   return (
-    <div ref={global ? undefined : ref} tabIndex={focusable ? -1 : undefined} {...props} className={clsx(props.className, focusable && 'focusable')} />
+    <Element ref={global ? undefined : ref} tabIndex={focusable ? -1 : undefined} {...props} className={clsx(props.className, focusable && 'focusable')} />
   );
 };