[Accessibility] Fix issues with aria attributes from Lighthouse report (#2042)

src/components/common/Avatar.tsx

@@ -150,11 +150,11 @@ const Avatar: FC<OwnProps> = ({
   const author = user ? getUserFullName(user) : (chat ? getChatTitle(lang, chat) : text);
 
   if (isSavedMessages) {
-    content = <i className={buildClassName(cn.icon, 'icon-avatar-saved-messages')} aria-label={author} />;
+    content = <i className={buildClassName(cn.icon, 'icon-avatar-saved-messages')} role="img" aria-label={author} />;
   } else if (isDeleted) {
-    content = <i className={buildClassName(cn.icon, 'icon-avatar-deleted-account')} aria-label={author} />;
+    content = <i className={buildClassName(cn.icon, 'icon-avatar-deleted-account')} role="img" aria-label={author} />;
   } else if (isReplies) {
-    content = <i className={buildClassName(cn.icon, 'icon-reply-filled')} aria-label={author} />;
+    content = <i className={buildClassName(cn.icon, 'icon-reply-filled')} role="img" aria-label={author} />;
   } else if (hasBlobUrl) {
     content = (
       <>

src/components/middle/composer/MessageInput.tsx

@@ -389,7 +389,9 @@ const MessageInput: FC<OwnProps & StateProps> = ({
         id={editableInputId || EDITABLE_INPUT_ID}
         className={className}
         contentEditable
+        role="textbox"
         dir="auto"
+        tabIndex={0}
         onClick={focusInput}
         onChange={handleChange}
         onKeyDown={handleKeyDown}

src/components/ui/Menu.tsx

@@ -142,6 +142,7 @@ const Menu: FC<OwnProps> = ({
         <div className="backdrop" onMouseDown={preventMessageInputBlurWithBubbling} />
       )}
       <div
+        role="presentation"
         ref={menuRef}
         className={bubbleClassName}
         style={buildStyle(

src/components/ui/MenuItem.tsx

@@ -108,7 +108,7 @@ const MenuItem: FC<OwnProps> = (props) => {
 
   return (
     <div
-      role="button"
+      role="menuitem"
       tabIndex={0}
       className={fullClassName}
       onClick={handleClick}