chore(browser-warn): add alt attribute to image, part 2

src/components/PDFView/PdfItem.tsx

@@ -36,6 +36,8 @@ const PdfItem = ({
     return file.pages?.map((page, i) => {
       return (
         <PdfPageItem
+          fileName={file.name}
+          pageIndex={i}
           page={page}
           key={i}
           currentUserMarks={filterByPage(currentUserMarks, i)}

src/components/PDFView/PdfPageItem.tsx

@@ -7,6 +7,8 @@ import pdfViewStyles from './style.module.scss'
 import { FONT_SIZE, FONT_TYPE, inPx } from '../../utils/pdf.ts'
 import { useScale } from '../../hooks/useScale.tsx'
 interface PdfPageProps {
+  fileName: string
+  pageIndex: number
   currentUserMarks: CurrentUserMark[]
   handleMarkClick: (id: number) => void
   otherUserMarks: Mark[]
@@ -19,6 +21,8 @@ interface PdfPageProps {
  * Responsible for rendering a single Pdf Page and its Marks
  */
 const PdfPageItem = ({
+  fileName,
+  pageIndex,
   page,
   currentUserMarks,
   handleMarkClick,
@@ -38,7 +42,11 @@ const PdfPageItem = ({
 
   return (
     <div className={`image-wrapper ${styles.pdfImageWrapper}`}>
-      <img draggable="false" src={page.image} />
+      <img
+        draggable="false"
+        src={page.image}
+        alt={`page ${pageIndex + 1} of ${fileName}`}
+      />
       {currentUserMarks.map((m, i) => (
         <div key={i} ref={(el) => (markRefs.current[m.id] = el)}>
           <PdfMarkItem

src/pages/profile/index.tsx

@@ -42,6 +42,16 @@ export const ProfilePage = () => {
   const [isLoading, setIsLoading] = useState(true)
   const [loadingSpinnerDesc] = useState('Fetching metadata')
 
+  const profileName =
+    pubkey &&
+    profileMetadata &&
+    truncate(
+      profileMetadata.display_name || profileMetadata.name || hexToNpub(pubkey),
+      {
+        length: 16
+      }
+    )
+
   useEffect(() => {
     if (npub) {
       try {
@@ -166,7 +176,10 @@ export const ProfilePage = () => {
             className={`${styles.banner} ${!profileMetadata || !profileMetadata.banner ? styles.noImage : ''}`}
           >
             {profileMetadata && profileMetadata.banner ? (
-              <img src={profileMetadata.banner} />
+              <img
+                src={profileMetadata.banner}
+                alt={`banner image for ${profileName}`}
+              />
             ) : (
               ''
             )}
@@ -186,6 +199,7 @@ export const ProfilePage = () => {
                   <img
                     className={styles['image-placeholder']}
                     src={getProfileImage(profileMetadata!)}
+                    alt={profileName}
                   />
                 </div>
               </Box>
@@ -225,14 +239,7 @@ export const ProfilePage = () => {
                       variant="h6"
                       className={styles.bold}
                     >
-                      {truncate(
-                        profileMetadata.display_name ||
-                          profileMetadata.name ||
-                          hexToNpub(pubkey),
-                        {
-                          length: 16
-                        }
-                      )}
+                      {profileName}
                     </Typography>
                   )}
                 </Box>

src/pages/verify/index.tsx

@@ -106,7 +106,11 @@ const SlimPdfView = ({
                   })
                   return (
                     <div className="image-wrapper" key={i}>
-                      <img draggable="false" src={page.image} />
+                      <img
+                        draggable="false"
+                        src={page.image}
+                        alt={`page ${i} of ${file.name}`}
+                      />
                       {marks.map((m) => {
                         return (
                           <div