From dd7cad20a60a7a7e3dfbb593dc8105726978e8b7 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Tue, 20 Sep 2022 14:59:06 +0200
Subject: [PATCH] [Accessibility] Fix issues with aria attributes from
 Lighthouse report (#2042)

---
 src/components/common/Avatar.tsx                | 6 +++---
 src/components/middle/composer/MessageInput.tsx | 2 ++
 src/components/ui/Menu.tsx                      | 1 +
 src/components/ui/MenuItem.tsx                  | 2 +-
 4 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/common/Avatar.tsx b/src/components/common/Avatar.tsx
index b6cd23256..225cb9d97 100644
--- a/src/components/common/Avatar.tsx
+++ b/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 = (
       <>
diff --git a/src/components/middle/composer/MessageInput.tsx b/src/components/middle/composer/MessageInput.tsx
index 8e62022b8..c4030a9de 100644
--- a/src/components/middle/composer/MessageInput.tsx
+++ b/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}
diff --git a/src/components/ui/Menu.tsx b/src/components/ui/Menu.tsx
index 35df0989a..d702930bf 100644
--- a/src/components/ui/Menu.tsx
+++ b/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(
diff --git a/src/components/ui/MenuItem.tsx b/src/components/ui/MenuItem.tsx
index 9b0170468..88a4cc36f 100644
--- a/src/components/ui/MenuItem.tsx
+++ b/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}