From 75196d185d8e06b220dfe4ccaf40f11131b09990 Mon Sep 17 00:00:00 2001
From: Pavel Mineev <pavel@mineev.me>
Date: Mon, 17 May 2021 23:30:03 +0300
Subject: [PATCH] avatar fixes after review

---
 frontend/app/components/avatar/avatar.spec.tsx  | 13 +++++++++----
 frontend/app/components/avatar/avatar.tsx       | 12 ++++++++----
 frontend/app/components/comment/comment.tsx     |  4 +---
 frontend/app/components/user-info/user-info.tsx |  2 +-
 frontend/app/typings/svg.d.ts                   |  5 +++++
 5 files changed, 24 insertions(+), 12 deletions(-)
 create mode 100644 frontend/app/typings/svg.d.ts

diff --git a/frontend/app/components/avatar/avatar.spec.tsx b/frontend/app/components/avatar/avatar.spec.tsx
index 76d3de5b..9ac51a52 100644
--- a/frontend/app/components/avatar/avatar.spec.tsx
+++ b/frontend/app/components/avatar/avatar.spec.tsx
@@ -7,10 +7,15 @@ import { BASE_URL } from 'common/constants.config';
 import { Avatar } from './avatar';
 
 describe('<Avatar/>', () => {
-  it('should get', () => {
-    const { getByAltText } = render(<Avatar className="avatar" alt="avatar" />);
+  it('should have correct url', () => {
+    const { container } = render(<Avatar className="avatar" />);
 
-    expect(getByAltText('avatar')).toHaveAttribute('src', `${BASE_URL}/image.svg`);
-    expect(getByAltText('avatar')).toHaveAttribute('alt', 'avatar');
+    expect(container.querySelector('img')).toHaveAttribute('src', `${BASE_URL}/image.svg`);
+  });
+
+  it("shouldn't be accessible with screen reader", () => {
+    const { container } = render(<Avatar className="avatar" />);
+
+    expect(container.querySelector('img')).toHaveAttribute('aria-hidden', 'true');
   });
 });
diff --git a/frontend/app/components/avatar/avatar.tsx b/frontend/app/components/avatar/avatar.tsx
index 89b46265..d3f8e7c4 100644
--- a/frontend/app/components/avatar/avatar.tsx
+++ b/frontend/app/components/avatar/avatar.tsx
@@ -3,20 +3,24 @@ import { h } from 'preact';
 
 import { BASE_URL } from 'common/constants.config';
 
+import ghostIconUrl from './assets/ghost.svg';
 import styles from './avatar.module.css';
 
 type Props = {
   url?: string;
-  alt: string;
   /** className should be used only in puprose of put permanent class on Avatar for user themization */
   className: string;
 };
 
-export function Avatar({ url, className, alt }: Props) {
-  const avatarUrl = url || `${BASE_URL}${require('./assets/ghost.svg').default}`;
+export function Avatar({ url, className }: Props) {
+  const avatarUrl = url || `${BASE_URL}${ghostIconUrl}`;
 
   return (
     // eslint-disable-next-line jsx-a11y/alt-text
-    <img className={clsx('avatar', className, styles.avatar, !url && styles.avatarGhost)} src={avatarUrl} alt={alt} />
+    <img
+      className={clsx('avatar', className, styles.avatar, !url && styles.avatarGhost)}
+      src={avatarUrl}
+      aria-hidden="true"
+    />
   );
 }
diff --git a/frontend/app/components/comment/comment.tsx b/frontend/app/components/comment/comment.tsx
index 775f49fc..3ed409fa 100644
--- a/frontend/app/components/comment/comment.tsx
+++ b/frontend/app/components/comment/comment.tsx
@@ -660,9 +660,7 @@ export class Comment extends Component<CommentProps, State> {
           </div>
         )}
         <div className="comment__info">
-          {props.view !== 'user' && !props.collapsed && (
-            <Avatar className="comment__avatar" url={o.user.picture} alt={o.user.name} />
-          )}
+          {props.view !== 'user' && !props.collapsed && <Avatar className="comment__avatar" url={o.user.picture} />}
           {props.view !== 'user' && (
             <span
               {...getHandleClickProps(this.toggleUserInfoVisibility)}
diff --git a/frontend/app/components/user-info/user-info.tsx b/frontend/app/components/user-info/user-info.tsx
index 7ee960e3..65b5c683 100644
--- a/frontend/app/components/user-info/user-info.tsx
+++ b/frontend/app/components/user-info/user-info.tsx
@@ -66,7 +66,7 @@ class UserInfo extends Component<Props, State> {
 
     return (
       <div className={b('root user-info', {})}>
-        <Avatar className="user-info__avatar" url={user.picture} alt={user.name} />
+        <Avatar className="user-info__avatar" url={user.picture} />
         <p className="user-info__title">
           <FormattedMessage
             id="user-info.last-comments"
diff --git a/frontend/app/typings/svg.d.ts b/frontend/app/typings/svg.d.ts
new file mode 100644
index 00000000..ce3cc742
--- /dev/null
+++ b/frontend/app/typings/svg.d.ts
@@ -0,0 +1,5 @@
+declare module '*.svg' {
+  const url: string;
+
+  export default url;
+}