From cb0b8351a9e3fa20d4a51a196a992c5e1ed1d502 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Fri, 11 Jul 2025 09:55:48 -0400
Subject: [PATCH] A11Y: onebox avatars/images are decorative, so screenreaders
 can skip (#33572)

Adding `alt=""` to tell screenreaders to skip these, we don't reliably
have alt content available for onebox images and they tend to be
decorative, so better to omit.


<img width="738" height="151" alt="learn.microsoft.com onebox with the
link whats new in C# 11, there's a purple C# badge to the left of the
link"
src="https://github.com/user-attachments/assets/15bdc830-683f-4c69-a11b-9d54c66fa627"
/>


We already do this in some oneboxes, so this covers some more cases
including the generic.
---
 lib/onebox/templates/_layout.mustache              | 2 +-
 lib/onebox/templates/allowlistedgeneric.mustache   | 2 +-
 lib/onebox/templates/preview_error_onebox.mustache | 2 +-
 lib/onebox/templates/threadsstatus.mustache        | 4 ++--
 lib/onebox/templates/twitterstatus.mustache        | 2 +-
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/lib/onebox/templates/_layout.mustache b/lib/onebox/templates/_layout.mustache
index 028848221f5..78c4b4650a0 100644
--- a/lib/onebox/templates/_layout.mustache
+++ b/lib/onebox/templates/_layout.mustache
@@ -1,7 +1,7 @@
 <aside class="onebox {{subname}}" data-onebox-src="{{link}}">
   <header class="source">
     {{#favicon}}
-      <img src="{{favicon}}" class="site-icon"/>
+      <img src="{{favicon}}" class="site-icon" alt=""/>
     {{/favicon}}
 
     {{#article_published_time}}
diff --git a/lib/onebox/templates/allowlistedgeneric.mustache b/lib/onebox/templates/allowlistedgeneric.mustache
index 12343efb6ad..ce944ce171c 100644
--- a/lib/onebox/templates/allowlistedgeneric.mustache
+++ b/lib/onebox/templates/allowlistedgeneric.mustache
@@ -1,4 +1,4 @@
-{{#image}}<img width="{{thumbnail_width}}" height="{{thumbnail_height}}" src="{{image}}" class="thumbnail"/>{{/image}}
+{{#image}}<img width="{{thumbnail_width}}" height="{{thumbnail_height}}" src="{{image}}" class="thumbnail" alt=""/>{{/image}}
 
 <h3><a href="{{link}}" target="_blank" rel="noopener">{{title}}</a></h3>
 
diff --git a/lib/onebox/templates/preview_error_onebox.mustache b/lib/onebox/templates/preview_error_onebox.mustache
index c51f8a34405..7afd052a6ec 100644
--- a/lib/onebox/templates/preview_error_onebox.mustache
+++ b/lib/onebox/templates/preview_error_onebox.mustache
@@ -1,6 +1,6 @@
 <aside class="onebox preview-error">
   {{#favicon}}
-    <img src="{{favicon}}" class="site-icon"/>
+    <img src="{{favicon}}" class="site-icon" alt=""/>
   {{/favicon}}
   <a href="{{link}}" target='_blank' rel='noopener noreferrer'>{{title}}</a>
   <article class="onebox-warning-message">
diff --git a/lib/onebox/templates/threadsstatus.mustache b/lib/onebox/templates/threadsstatus.mustache
index b39da295cd6..77db00009aa 100644
--- a/lib/onebox/templates/threadsstatus.mustache
+++ b/lib/onebox/templates/threadsstatus.mustache
@@ -1,11 +1,11 @@
-{{#avatar}}<img src="{{avatar}}" class="thumbnail onebox-avatar">{{/avatar}}
+{{#avatar}}<img src="{{avatar}}" class="thumbnail onebox-avatar" alt="">{{/avatar}}
 <h4><a href="{{link}}" target="_blank" rel="noopener">{{title}}</a></h4>
 <div class="threads-screen-name"><a href="{{link}}" target="_blank" rel="noopener">@{{screen_name}}</a></div>
 
 <div class="thread-contents">
   <span class="thread-description">{{{description}}}</span>
   {{#image}}
-    <div class="scale-images"><img src="{{image}}"></div>
+    <div class="scale-images"><img src="{{image}}" alt=""></div>
   {{/image}}
 </div>
 
diff --git a/lib/onebox/templates/twitterstatus.mustache b/lib/onebox/templates/twitterstatus.mustache
index 3c3d8497aab..a7f14f7bfae 100644
--- a/lib/onebox/templates/twitterstatus.mustache
+++ b/lib/onebox/templates/twitterstatus.mustache
@@ -1,4 +1,4 @@
-{{#avatar}}<img src="{{avatar}}" class="thumbnail onebox-avatar">{{/avatar}}
+{{#avatar}}<img src="{{avatar}}" class="thumbnail onebox-avatar" alt="">{{/avatar}}
 <h4><a href="{{link}}" target="_blank" rel="noopener">{{title}}</a></h4>
 <div class="twitter-screen-name"><a href="{{link}}" target="_blank" rel="noopener">@{{screen_name}}</a></div>