💄 Show alt text under images (#79)

bluesky-social · Apr 15, 2024 · 2eaa6a3 · 2eaa6a3
1 parent cad7429
commit 2eaa6a3
Showing 1 changed file with 12 additions and 0 deletions.
diff --git a/components/common/posts/PostsFeed.tsx b/components/common/posts/PostsFeed.tsx
@@ -13,6 +13,7 @@ import {
   DocumentMagnifyingGlassIcon,
   ExclamationCircleIcon,
   LanguageIcon,
+  InformationCircleIcon,
 } from '@heroicons/react/24/outline'
 import { LoadMore } from '../LoadMore'
 import { isRepost } from '@/lib/types'
@@ -206,6 +207,16 @@ function PostContent({
 const getImageSizeClass = (imageCount: number) =>
   imageCount < 3 ? 'w-32 h-32' : 'w-20 h-20'
 
+function ImageAltText({ alt }: { alt: string }) {
+  if (!alt) return null
+  return (
+    <p className="leading-2 text-gray-400 text-xs leading-3 mt-1">
+      <InformationCircleIcon className="w-4 h-4 inline mr-1" />
+      {alt}
+    </p>
+  )
+}
+
 // @TODO record embeds
 function PostEmbeds({ item }: { item: AppBskyFeedDefs.FeedViewPost }) {
   const embed = AppBskyEmbedRecordWithMedia.isView(item.post.embed)
@@ -240,6 +251,7 @@ function PostEmbeds({ item }: { item: AppBskyFeedDefs.FeedViewPost }) {
               src={image.thumb}
               alt={image.alt}
             />
+            <ImageAltText alt={image.alt} />
           </a>
         ))}
       </div>