add missing label attributes (closes #33)

Author: ceolinwill

src/components/CommentUser.tsx

@@ -2,6 +2,7 @@ import NextLink from 'next/link';
 import { Avatar, Link, makeStyles } from '@material-ui/core';
 import { Profile } from '@zoonk/models';
 import ProfileSocial from './ProfileSocial';
+import useTranslation from './useTranslation';
 
 interface CommentUserProps {
   user: Profile.Response;
@@ -16,11 +17,12 @@ const useStyles = makeStyles((theme) => ({
 const CommentUser = ({ user }: CommentUserProps) => {
   const { name, photo, username } = user;
   const classes = useStyles();
+  const translate = useTranslation();
 
   return (
     <div className={classes.root}>
       <NextLink href="/profile/[id]" as={`/profile/${username}`} passHref>
-        <a>
+        <a aria-label={translate('open_page', { title: name })}>
           <Avatar
             src={photo || undefined}
             alt={name}

src/components/LinkCard.tsx

@@ -6,17 +6,20 @@ import {
   Typography,
 } from '@material-ui/core';
 import { isInternal, theme } from '@zoonk/utils';
+import useTranslation from './useTranslation';
 
 interface LinkCardProps {
   site: Post.Link;
 }
 
 const LinkCard = ({ site }: LinkCardProps) => {
+  const translate = useTranslation();
   const { description, image, title, url } = site;
 
   return (
     <Card variant="outlined">
       <CardActionArea
+        aria-label={translate('open_page', { title })}
         component="a"
         href={url}
         target={isInternal(url) ? '_self' : '_blank'}

src/components/PostListItem.tsx

@@ -5,6 +5,7 @@ import { Link, makeStyles, Paper, Typography } from '@material-ui/core';
 import { getDomainFromUrl, isInternal } from '@zoonk/utils';
 import PostListMeta from './PostListMeta';
 import { getPlainText, getPostImage } from './rich-text/posts';
+import useTranslation from './useTranslation';
 
 const useStyles = makeStyles((theme) => ({
   content: {
@@ -31,6 +32,7 @@ interface PostListItemProps {
 
 const PostListItem = ({ item }: PostListItemProps) => {
   const classes = useStyles();
+  const translate = useTranslation();
   const { content, cover, id, sites, title } = item;
   const siteImg = sites.find((site) => Boolean(site.image));
   const image = cover || getPostImage(content) || siteImg?.image;
@@ -42,6 +44,7 @@ const PostListItem = ({ item }: PostListItemProps) => {
           <NextLink href="/posts/[id]" as={`/posts/${id}`} passHref>
             <a
               className={classes.image}
+              aria-label={translate('open_page', { title })}
               style={{
                 background: `url(${image}) no-repeat center center`,
                 backgroundSize: 'cover',

src/locale/en.ts

@@ -159,6 +159,7 @@ const translate: TranslationFn = (key, args) => {
     no_chapters: `Chapters have lessons for teaching a topic. Help more people learn about ${args?.title}.`,
     no_lessons: `Help others to learn about ${args?.title}.`,
     notifications: 'Notifications',
+    open_page: `Open page: ${args?.title}`,
     order: 'Order',
     page_edits: 'Page changes',
     page_edits_title: 'Page changes for:',

src/locale/pt.ts

@@ -161,6 +161,7 @@ const translate: TranslationFn = (key, args) => {
     no_chapters: `Os capítulos têm aulas para ensinar um assunto. Ajude mais pessoas a aprenderem sobre ${args?.title}.`,
     no_lessons: `Ajude outras pessoas a aprenderem sobre ${args?.title}.`,
     notifications: 'Notificações',
+    open_page: `Abrir página: ${args?.title}`,
     order: 'Ordem',
     page_edits_title: 'Alterações na página:',
     page_edits: 'Alterações na página',

src/models/i18n.ts

@@ -156,6 +156,7 @@ export type TranslationKeys =
   | 'no_chapters'
   | 'no_lessons'
   | 'notifications'
+  | 'open_page'
   | 'order'
   | 'page_edits_title'
   | 'page_edits'