Skip to content

fix(accessibility): add alt text to PlatformIcon #239

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sentry-junior wants to merge 1 commit into
base: master
Choose a base branch
from
Open

fix(accessibility): add alt text to PlatformIcon #239

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 12 additions & 1 deletion src/platformIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = ({
Expand All @@ -311,6 +313,7 @@ const PlatformIcon = ({
withLanguageIcon,
languageIconStyles = {},
style = {},
alt = platform,
...otherProps
}: Props) => {
const icon = getIcon(platform);
Expand All @@ -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 }}
>
Comment on lines +328 to +333
Copy link
Copy Markdown

@sentry sentry Bot May 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bug: When withLanguageIcon is true, passing alt="" to mark an icon as decorative results in an inaccessible div with role="img" and an empty aria-label.
Severity: MEDIUM

Suggested Fix

When withLanguageIcon is true and alt is an empty string, conditionally set role="presentation" or role="none" on the div instead of role="img". This will correctly remove the element from the accessibility tree, aligning its behavior with a native <img alt=""> and ensuring it is treated as purely decorative.

Prompt for AI Agent 
Review the code at the location below. A potential bug has been identified by an AI
agent. Verify if this is a real issue. If it is, propose a fix; if not, explain why it's
not valid.

Location: src/platformIcon.tsx#L328-L333

Potential issue: When the `PlatformIcon` component is used with the
`withLanguageIcon={true}` prop, it fails to correctly handle decorative images. If a
caller passes `alt=""` to mark the icon as decorative, the component renders a `<div
role="img" aria-label="">`. Unlike a standard `<img alt="">`, this combination is not
consistently treated as decorative by screen readers. This leaves an element with an
empty accessible name in the accessibility tree, leading to unreliable behavior for
users of assistive technology and contradicting the component's documented contract for
handling decorative icons.

Did we get this right? 👍 / 👎 to inform future reviews.

<img
src={iconPath}
width={size}
height={size}
alt=""
style={{ borderRadius: `${radius}px` }}
/>
<img
src={languageIconPath}
alt=""
style={{
position: "absolute",
bottom: "-1px",
Expand All @@ -350,6 +360,7 @@ const PlatformIcon = ({
src={iconPath}
width={size}
height={size}
alt={alt}
{...otherProps}
style={{ borderRadius: `${radius}px`, ...style }}
/>
Expand Down
Loading