avatar fixes after review

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

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

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

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"

frontend/app/typings/svg.d.ts

@@ -0,0 +1,5 @@
+declare module '*.svg' {
+  const url: string;
+
+  export default url;
+}