pl-fe: random accessibility improvements

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>

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 (

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}

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

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'>

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}

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

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>

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')} />
   );
 };