feat: address linter feedback for "notifications" emails (#1974)

zenorocha · gabrielmfern · web-flow · commit 931540f7520f · 2025-03-26T17:31:40.000-03:00
Co-authored-by: gabriel miranda &lt;gabrielmfern@outlook.com&gt;
diff --git a/apps/demo/emails/notifications/papermark-year-in-review.tsx b/apps/demo/emails/notifications/papermark-year-in-review.tsx
@@ -63,7 +63,7 @@ export default function PapermarkYearInReviewEmail({
                 you&apos;ve used Papermark to share your important documents.
               </Text>
               <Link
-                href="#"
+                href="https://www.papermark.com"
                 className="inline-flex items-center rounded-full bg-gray-900 px-12 py-4 text-center text-sm font-bold text-white no-underline"
               >
                 Share your stats
@@ -197,13 +197,13 @@ export default function PapermarkYearInReviewEmail({
                 Happy Holidays from the Papermark team :)
               </Text>
               <Link
-                href="#"
+                href="https://www.papermark.com"
                 className="mt-4 inline-flex items-center rounded-full bg-gray-900 px-12 py-4 text-center text-sm font-bold text-white no-underline"
               >
                 Share your stats
               </Link>
               <Link
-                href="https://app.papermark.io/documents"
+                href="https://www.papermark.com"
                 className="mt-4 block items-center text-center text-sm font-bold text-gray-900 no-underline"
               >
                 Go to your dashboard
diff --git a/apps/demo/emails/notifications/vercel-invite-user.tsx b/apps/demo/emails/notifications/vercel-invite-user.tsx
@@ -57,7 +57,7 @@ export const VercelInviteUserEmail = ({
                 src={`${baseUrl}/static/vercel-logo.png`}
                 width="40"
                 height="37"
-                alt="Vercel"
+                alt="Vercel Logo"
                 className="my-0 mx-auto"
               />
             </Section>
@@ -86,14 +86,15 @@ export const VercelInviteUserEmail = ({
                     src={userImage}
                     width="64"
                     height="64"
+                    alt={`${username}'s profile picture`}
                   />
                 </Column>
                 <Column align="center">
                   <Img
                     src={`${baseUrl}/static/vercel-arrow.png`}
                     width="12"
                     height="9"
-                    alt="invited you to"
+                    alt="Arrow indicating invitation"
                   />
                 </Column>
                 <Column align="left">
@@ -102,6 +103,7 @@ export const VercelInviteUserEmail = ({
                     src={teamImage}
                     width="64"
                     height="64"
+                    alt={`${teamName} team logo`}
                   />
                 </Column>
               </Row>
@@ -145,7 +147,7 @@ VercelInviteUserEmail.PreviewProps = {
   invitedByEmail: 'alan.turing@example.com',
   teamName: 'Enigma',
   teamImage: `${baseUrl}/static/vercel-team.png`,
-  inviteLink: 'https://vercel.com/teams/invite/foo',
+  inviteLink: 'https://vercel.com',
   inviteFromIp: '204.13.186.218',
   inviteFromLocation: 'São Paulo, Brazil',
 } as VercelInviteUserEmailProps;
diff --git a/apps/demo/emails/notifications/yelp-recent-login.tsx b/apps/demo/emails/notifications/yelp-recent-login.tsx
@@ -44,7 +44,7 @@ export const YelpRecentLoginEmail = ({
         <Preview>Yelp recent login</Preview>
         <Container>
           <Section style={logo}>
-            <Img src={`${baseUrl}/static/yelp-logo.png`} />
+            <Img src={`${baseUrl}/static/yelp-logo.png`} alt="Yelp logo" />
           </Section>
 
           <Section style={content}>
@@ -53,6 +53,7 @@ export const YelpRecentLoginEmail = ({
                 style={image}
                 width={620}
                 src={`${baseUrl}/static/yelp-header.png`}
+                alt="Yelp header illustration"
               />
             </Row>
 
@@ -122,6 +123,7 @@ export const YelpRecentLoginEmail = ({
               style={image}
               width={620}
               src={`${baseUrl}/static/yelp-footer.png`}
+              alt="Yelp footer decoration"
             />
           </Section>
 
@@ -166,7 +168,7 @@ const logo = {
 };
 
 const buttonContainer = {
-  display: 'flex',
+  textAlign: 'center' as const,
 };
 
 const button = {
@@ -176,8 +178,9 @@ const button = {
   fontWeight: 'bold',
   border: '1px solid rgb(0,0,0, 0.1)',
   cursor: 'pointer',
-  margin: '0 auto',
+  display: 'inline-block',
   padding: '12px 30px',
+  textDecoration: 'none',
 };
 
 const content = {
diff --git a/packages/react-email/src/cli/commands/testing/__snapshots__/export.spec.ts.snap b/packages/react-email/src/cli/commands/testing/__snapshots__/export.spec.ts.snap
@@ -42,7 +42,7 @@ exports[`email export 1`] = `
                 <tr>
                   <td>
                     <img
-                      alt="Vercel"
+                      alt="Vercel Logo"
                       height="37"
                       src="/static/vercel-logo.png"
                       style="margin-top:0px;margin-bottom:0px;margin-left:auto;margin-right:auto;display:block;outline:none;border:none;text-decoration:none"
@@ -90,20 +90,22 @@ exports[`email export 1`] = `
                         <tr style="width:100%">
                           <td align="right" data-id="__react-email-column">
                             <img
+                              alt="undefined&#x27;s profile picture"
                               height="64"
                               style="border-radius:9999px;display:block;outline:none;border:none;text-decoration:none"
                               width="64" />
                           </td>
                           <td align="center" data-id="__react-email-column">
                             <img
-                              alt="invited you to"
+                              alt="Arrow indicating invitation"
                               height="9"
                               src="/static/vercel-arrow.png"
                               style="display:block;outline:none;border:none;text-decoration:none"
                               width="12" />
                           </td>
                           <td align="left" data-id="__react-email-column">
                             <img
+                              alt="undefined team logo"
                               height="64"
                               style="border-radius:9999px;display:block;outline:none;border:none;text-decoration:none"
                               width="64" />
diff --git a/packages/react-email/src/utils/__snapshots__/get-email-component.spec.ts.snap b/packages/react-email/src/utils/__snapshots__/get-email-component.spec.ts.snap
