From 84adc9a045ce2a7373414dfa1c49286a00914ff1 Mon Sep 17 00:00:00 2001
From: "sentry-junior[bot]"
 <264270552+sentry-junior[bot]@users.noreply.github.com>
Date: Tue, 26 May 2026 05:06:19 +0000
Subject: [PATCH 1/4] fix(accessibility): add alt text support to PlatformIcon

- Add explicit `alt` prop to Props type (HTMLAttributes doesn't include it since that's ImgHTMLAttributes)
- Default alt to the platform name so icons are identifiable by screen readers out of the box
- Pass alt="" to mark icons as decorative when caller opts in
- For withLanguageIcon variant: wrap imgs in a div with role="img" and aria-label, inner imgs get alt="" (composite image pattern)
- Document the escape hatch: pass alt="" explicitly to declare the icon decorative

Co-authored-by: Ryan Albrecht <ryan@sentry.io>
---
 src/platformIcon.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/platformIcon.tsx b/src/platformIcon.tsx
index ce85c8a..dc2f878 100644
--- a/src/platformIcon.tsx
+++ b/src/platformIcon.tsx
@@ -301,6 +301,8 @@ type Props = React.HTMLAttributes<HTMLDivElement | HTMLImageElement> & {
   radius?: number | null;
   withLanguageIcon?: boolean;
   languageIconStyles?: React.CSSProperties;
+  /** Accessible label for the icon. Defaults to the platform name. Pass an empty string to mark the icon as decorative. */
+  alt?: string;
 };
 
 const PlatformIcon = ({
@@ -311,6 +313,7 @@ const PlatformIcon = ({
   withLanguageIcon,
   languageIconStyles = {},
   style = {},
+  alt = platform,
   ...otherProps
 }: Props) => {
   const icon = getIcon(platform);
@@ -322,15 +325,22 @@ const PlatformIcon = ({
 
   if (withLanguageIcon && languageIcon !== icon && languageIcon !== "default") {
     return (
-      <div {...otherProps} style={{ position: "relative", ...style }}>
+      <div
+        role="img"
+        aria-label={alt}
+        {...otherProps}
+        style={{ position: "relative", ...style }}
+      >
         <img
           src={iconPath}
           width={size}
           height={size}
+          alt=""
           style={{ borderRadius: `${radius}px` }}
         />
         <img
           src={languageIconPath}
+          alt=""
           style={{
             position: "absolute",
             bottom: "-1px",
@@ -350,6 +360,7 @@ const PlatformIcon = ({
       src={iconPath}
       width={size}
       height={size}
+      alt={alt}
       {...otherProps}
       style={{ borderRadius: `${radius}px`, ...style }}
     />

From da39ad98ffe0c1f2d96c2c524fe41f3f6cb5cf2b Mon Sep 17 00:00:00 2001
From: "sentry-junior[bot]"
 <264270552+sentry-junior[bot]@users.noreply.github.com>
Date: Tue, 26 May 2026 14:29:04 +0000
Subject: [PATCH 2/4] fix(accessibility): handle decorative composite icon
 correctly

When alt="" is passed to the withLanguageIcon variant, use role="none"
instead of role="img" aria-label="". An empty aria-label on a role="img"
element is not reliably treated as decorative by screen readers; role="none"
(equivalent to role="presentation") correctly removes the element from
the accessibility tree, matching the behavior of a native <img alt="">.

Also move role/aria-label after {...otherProps} so they always take effect
and cannot be accidentally overridden by callers.

Co-authored-by: Ryan Albrecht <ryan@sentry.io>
---
 src/platformIcon.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/platformIcon.tsx b/src/platformIcon.tsx
index dc2f878..9ac5f97 100644
--- a/src/platformIcon.tsx
+++ b/src/platformIcon.tsx
@@ -326,9 +326,9 @@ const PlatformIcon = ({
   if (withLanguageIcon && languageIcon !== icon && languageIcon !== "default") {
     return (
       <div
-        role="img"
-        aria-label={alt}
         {...otherProps}
+        role={alt === "" ? "none" : "img"}
+        aria-label={alt !== "" ? alt : undefined}
         style={{ position: "relative", ...style }}
       >
         <img

From a329080bc56c2b50a4920ca6204b4f44fd0312a6 Mon Sep 17 00:00:00 2001
From: Ryan Albrecht <ryan@ryanalbrecht.ca>
Date: Tue, 26 May 2026 08:16:17 -0700
Subject: [PATCH 3/4] Apply suggestion from @ryan953

---
 src/platformIcon.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/platformIcon.tsx b/src/platformIcon.tsx
index 9ac5f97..4855ce8 100644
--- a/src/platformIcon.tsx
+++ b/src/platformIcon.tsx
@@ -328,7 +328,7 @@ const PlatformIcon = ({
       <div
         {...otherProps}
         role={alt === "" ? "none" : "img"}
-        aria-label={alt !== "" ? alt : undefined}
+        aria-label={alt === "" ? undefined : alt}
         style={{ position: "relative", ...style }}
       >
         <img

From 245c6b59a91c5beecee379755f183358df6d0bd1 Mon Sep 17 00:00:00 2001
From: Nate Moore <natemoo-re@users.noreply.github.com>
Date: Wed, 27 May 2026 16:47:54 -0400
Subject: [PATCH 4/4] Update src/platformIcon.tsx

---
 src/platformIcon.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/platformIcon.tsx b/src/platformIcon.tsx
index 4855ce8..bf690f0 100644
--- a/src/platformIcon.tsx
+++ b/src/platformIcon.tsx
@@ -327,7 +327,7 @@ const PlatformIcon = ({
     return (
       <div
         {...otherProps}
-        role={alt === "" ? "none" : "img"}
+        role={alt === "" ? undefined : "img"}
         aria-label={alt === "" ? undefined : alt}
         style={{ position: "relative", ...style }}
       >