From 1d56e1431b8eac4ad3fc60e2a750084683757376 Mon Sep 17 00:00:00 2001 From: "junior[bot]" Date: Tue, 19 May 2026 05:34:43 +0000 Subject: [PATCH 1/9] fix(a11y): add missing alt attributes to context icons and feedback images Add alt prop to ContextIconProps as an optional override that falls back to the icon name. Pass a descriptive alt (e.g. 'browser: chrome') from getContextIcon which has the semantic type context. Mark decorative feedback onboarding/empty-state illustrations with alt="" so screen readers skip them appropriately. --- static/app/components/events/contexts/contextIcon.tsx | 5 +++-- static/app/components/events/contexts/utils.tsx | 2 +- static/app/components/feedback/feedbackSetupPanel.tsx | 2 +- static/app/views/feedback/feedbackEmptyState.tsx | 2 +- 4 files changed, 6 insertions(+), 5 deletions(-) diff --git a/static/app/components/events/contexts/contextIcon.tsx b/static/app/components/events/contexts/contextIcon.tsx index 4a31f6d94f2915..b6102a652a4179 100644 --- a/static/app/components/events/contexts/contextIcon.tsx +++ b/static/app/components/events/contexts/contextIcon.tsx @@ -157,10 +157,11 @@ export function getLogoImage(name: string) { export interface ContextIconProps { name: string; + alt?: string; size?: SVGIconProps['size']; } -export function ContextIcon({name, size: providedSize = 'xl'}: ContextIconProps) { +export function ContextIcon({name, alt, size: providedSize = 'xl'}: ContextIconProps) { const size = SvgIcon.ICON_SIZES[providedSize]; // Apply darkmode CSS to icon when in darkmode @@ -168,5 +169,5 @@ export function ContextIcon({name, size: providedSize = 'xl'}: ContextIconProps) const imageName = getLogoImage(name); const extraCass = isDarkmode && INVERT_IN_DARKMODE.has(imageName) ? darkCss : null; - return ; + return {alt; } diff --git a/static/app/components/events/contexts/utils.tsx b/static/app/components/events/contexts/utils.tsx index 1f133171d88aaa..a444e5143b42c1 100644 --- a/static/app/components/events/contexts/utils.tsx +++ b/static/app/components/events/contexts/utils.tsx @@ -365,7 +365,7 @@ export function getContextIcon({ if (imageName === logoUnknown) { return null; } - return ; + return ; } export function getFormattedContextData({ diff --git a/static/app/components/feedback/feedbackSetupPanel.tsx b/static/app/components/feedback/feedbackSetupPanel.tsx index c5f1e49c01146b..5014539d1cd345 100644 --- a/static/app/components/feedback/feedbackSetupPanel.tsx +++ b/static/app/components/feedback/feedbackSetupPanel.tsx @@ -25,7 +25,7 @@ export function FeedbackSetupPanel() { - + diff --git a/static/app/views/feedback/feedbackEmptyState.tsx b/static/app/views/feedback/feedbackEmptyState.tsx index d9301bd3266a8c..feb903deb7b4e8 100644 --- a/static/app/views/feedback/feedbackEmptyState.tsx +++ b/static/app/views/feedback/feedbackEmptyState.tsx @@ -96,7 +96,7 @@ export function FeedbackEmptyState({projectIds, issueTab = false}: Props) { return ( } + image={} >

{t('What do users think?')}

From 37a2a4f98fb82568fe2c2ecf56cdb684a92d9fb0 Mon Sep 17 00:00:00 2001 From: Ryan Albrecht Date: Mon, 25 May 2026 21:12:20 -0700 Subject: [PATCH 2/9] Apply suggestions from code review Co-authored-by: Ryan Albrecht --- static/app/components/events/contexts/contextIcon.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/static/app/components/events/contexts/contextIcon.tsx b/static/app/components/events/contexts/contextIcon.tsx index 2ffcdab190f67a..203f67bf39d25c 100644 --- a/static/app/components/events/contexts/contextIcon.tsx +++ b/static/app/components/events/contexts/contextIcon.tsx @@ -94,11 +94,10 @@ export function getLogoImage(name: string): string | null { export interface ContextIconProps { name: string; - alt?: string; size?: SVGIconProps['size']; } -export function ContextIcon({name, alt, size: providedSize = 'xl'}: ContextIconProps) { +export function ContextIcon({name, size: providedSize = 'xl'}: ContextIconProps) { const size = SvgIcon.ICON_SIZES[providedSize]; const platformIconName = getLogoImage(name); From be202ff692083603173d2608a4d46830b9c58a76 Mon Sep 17 00:00:00 2001 From: "getsantry[bot]" <66042841+getsantry[bot]@users.noreply.github.com> Date: Tue, 26 May 2026 04:13:38 +0000 Subject: [PATCH 3/9] :hammer_and_wrench: apply pre-commit fixes --- static/app/components/events/contexts/utils.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/static/app/components/events/contexts/utils.tsx b/static/app/components/events/contexts/utils.tsx index a2539368f0b6e1..7e554c3fa68283 100644 --- a/static/app/components/events/contexts/utils.tsx +++ b/static/app/components/events/contexts/utils.tsx @@ -363,7 +363,9 @@ export function getContextIcon({ if (getLogoImage(iconName) === null) { return null; } - return ; + return ( + + ); } export function getFormattedContextData({ From 9df7562e76ea424ade4efa77341ca8c05153f5b9 Mon Sep 17 00:00:00 2001 From: "sentry-junior[bot]" <264270552+sentry-junior[bot]@users.noreply.github.com> Date: Tue, 26 May 2026 04:16:43 +0000 Subject: [PATCH 4/9] fix(a11y): use name as alt text inside ContextIcon MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit No new public prop needed — PlatformIcon accepts HTMLImageElement attributes via rest props, so passing alt={name} internally is enough. Reverts the alt prop added at the call site in utils.tsx. Co-authored-by: Ryan Albrecht --- [View Session in Sentry](https://sentry.sentry.io/traces/?project=4510944073809921&query=gen_ai.conversation.id%3A%22slack%3AC08QLT0PYQK%3A1779768843.597129%22) --- static/app/components/events/contexts/contextIcon.tsx | 2 +- static/app/components/events/contexts/utils.tsx | 4 +--- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/static/app/components/events/contexts/contextIcon.tsx b/static/app/components/events/contexts/contextIcon.tsx index 203f67bf39d25c..6fb6222326cb6c 100644 --- a/static/app/components/events/contexts/contextIcon.tsx +++ b/static/app/components/events/contexts/contextIcon.tsx @@ -102,6 +102,6 @@ export function ContextIcon({name, size: providedSize = 'xl'}: ContextIconProps) const platformIconName = getLogoImage(name); return ( - + ); } diff --git a/static/app/components/events/contexts/utils.tsx b/static/app/components/events/contexts/utils.tsx index 7e554c3fa68283..d57ba74602a8ab 100644 --- a/static/app/components/events/contexts/utils.tsx +++ b/static/app/components/events/contexts/utils.tsx @@ -363,9 +363,7 @@ export function getContextIcon({ if (getLogoImage(iconName) === null) { return null; } - return ( - - ); + return ; } export function getFormattedContextData({ From e9a7ed649d78b7568f653865b8be50bd6ef9ea10 Mon Sep 17 00:00:00 2001 From: "getsantry[bot]" <66042841+getsantry[bot]@users.noreply.github.com> Date: Tue, 26 May 2026 04:18:03 +0000 Subject: [PATCH 5/9] :hammer_and_wrench: apply pre-commit fixes --- static/app/components/events/contexts/contextIcon.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/static/app/components/events/contexts/contextIcon.tsx b/static/app/components/events/contexts/contextIcon.tsx index 6fb6222326cb6c..0d97098cdea799 100644 --- a/static/app/components/events/contexts/contextIcon.tsx +++ b/static/app/components/events/contexts/contextIcon.tsx @@ -102,6 +102,11 @@ export function ContextIcon({name, size: providedSize = 'xl'}: ContextIconProps) const platformIconName = getLogoImage(name); return ( - + ); } From 19600797e843449c45a455722d79c74505411a21 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Tue, 26 May 2026 04:39:46 +0000 Subject: [PATCH 6/9] fix(a11y): type context icon alt text Co-authored-by: Ryan Albrecht --- .../components/events/contexts/contextIcon.spec.tsx | 12 +++++++++++- .../app/components/events/contexts/contextIcon.tsx | 8 +++++++- 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/static/app/components/events/contexts/contextIcon.spec.tsx b/static/app/components/events/contexts/contextIcon.spec.tsx index aad11cd92437b8..7bdb050c9cbde5 100644 --- a/static/app/components/events/contexts/contextIcon.spec.tsx +++ b/static/app/components/events/contexts/contextIcon.spec.tsx @@ -1,4 +1,6 @@ -import {getLogoImage} from 'sentry/components/events/contexts/contextIcon'; +import {render, screen} from 'sentry-test/reactTestingLibrary'; + +import {ContextIcon, getLogoImage} from 'sentry/components/events/contexts/contextIcon'; describe('getLogoImage', () => { it('maps context icon aliases to platformicons ids', () => { @@ -23,3 +25,11 @@ describe('getLogoImage', () => { expect(getLogoImage('acme-device')).toBeNull(); }); }); + +describe('ContextIcon', () => { + it('uses the context name as image alt text', () => { + render(); + + expect(screen.getByRole('img', {name: 'google-chrome'})).toBeInTheDocument(); + }); +}); diff --git a/static/app/components/events/contexts/contextIcon.tsx b/static/app/components/events/contexts/contextIcon.tsx index 0d97098cdea799..45f52050099490 100644 --- a/static/app/components/events/contexts/contextIcon.tsx +++ b/static/app/components/events/contexts/contextIcon.tsx @@ -1,7 +1,13 @@ +import type {ComponentProps, ComponentType, ImgHTMLAttributes} from 'react'; import {PlatformIcon, platforms} from 'platformicons'; import {SvgIcon, type SVGIconProps} from 'sentry/icons/svgIcon'; +type PlatformIconProps = ComponentProps & + ImgHTMLAttributes; + +const AccessiblePlatformIcon = PlatformIcon as ComponentType; + const LOGO_MAPPING: Readonly> = { 'android-phone': 'android-phone', 'android-tablet': 'android-tablet', @@ -102,7 +108,7 @@ export function ContextIcon({name, size: providedSize = 'xl'}: ContextIconProps) const platformIconName = getLogoImage(name); return ( - Date: Tue, 26 May 2026 04:43:21 +0000 Subject: [PATCH 7/9] fix(a11y): avoid spreading context icon props Co-authored-by: Ryan Albrecht --- static/app/components/events/contexts/utils.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/app/components/events/contexts/utils.tsx b/static/app/components/events/contexts/utils.tsx index d57ba74602a8ab..a93ba0bd784de9 100644 --- a/static/app/components/events/contexts/utils.tsx +++ b/static/app/components/events/contexts/utils.tsx @@ -363,7 +363,7 @@ export function getContextIcon({ if (getLogoImage(iconName) === null) { return null; } - return ; + return ; } export function getFormattedContextData({ From 87971b93d4b16cd34c96dcf1e7aca1d008956f6b Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Tue, 26 May 2026 04:46:08 +0000 Subject: [PATCH 8/9] fix(a11y): back out context icon alt change Co-authored-by: Ryan Albrecht --- .../components/events/contexts/contextIcon.spec.tsx | 12 +----------- .../app/components/events/contexts/contextIcon.tsx | 13 +------------ 2 files changed, 2 insertions(+), 23 deletions(-) diff --git a/static/app/components/events/contexts/contextIcon.spec.tsx b/static/app/components/events/contexts/contextIcon.spec.tsx index 7bdb050c9cbde5..aad11cd92437b8 100644 --- a/static/app/components/events/contexts/contextIcon.spec.tsx +++ b/static/app/components/events/contexts/contextIcon.spec.tsx @@ -1,6 +1,4 @@ -import {render, screen} from 'sentry-test/reactTestingLibrary'; - -import {ContextIcon, getLogoImage} from 'sentry/components/events/contexts/contextIcon'; +import {getLogoImage} from 'sentry/components/events/contexts/contextIcon'; describe('getLogoImage', () => { it('maps context icon aliases to platformicons ids', () => { @@ -25,11 +23,3 @@ describe('getLogoImage', () => { expect(getLogoImage('acme-device')).toBeNull(); }); }); - -describe('ContextIcon', () => { - it('uses the context name as image alt text', () => { - render(); - - expect(screen.getByRole('img', {name: 'google-chrome'})).toBeInTheDocument(); - }); -}); diff --git a/static/app/components/events/contexts/contextIcon.tsx b/static/app/components/events/contexts/contextIcon.tsx index 45f52050099490..203f67bf39d25c 100644 --- a/static/app/components/events/contexts/contextIcon.tsx +++ b/static/app/components/events/contexts/contextIcon.tsx @@ -1,13 +1,7 @@ -import type {ComponentProps, ComponentType, ImgHTMLAttributes} from 'react'; import {PlatformIcon, platforms} from 'platformicons'; import {SvgIcon, type SVGIconProps} from 'sentry/icons/svgIcon'; -type PlatformIconProps = ComponentProps & - ImgHTMLAttributes; - -const AccessiblePlatformIcon = PlatformIcon as ComponentType; - const LOGO_MAPPING: Readonly> = { 'android-phone': 'android-phone', 'android-tablet': 'android-tablet', @@ -108,11 +102,6 @@ export function ContextIcon({name, size: providedSize = 'xl'}: ContextIconProps) const platformIconName = getLogoImage(name); return ( - + ); } From 384191a34112899479931bea3e6c733171836915 Mon Sep 17 00:00:00 2001 From: Ryan Albrecht Date: Mon, 25 May 2026 21:48:00 -0700 Subject: [PATCH 9/9] Apply suggestion from @ryan953 --- static/app/components/events/contexts/utils.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/static/app/components/events/contexts/utils.tsx b/static/app/components/events/contexts/utils.tsx index a93ba0bd784de9..d57ba74602a8ab 100644 --- a/static/app/components/events/contexts/utils.tsx +++ b/static/app/components/events/contexts/utils.tsx @@ -363,7 +363,7 @@ export function getContextIcon({ if (getLogoImage(iconName) === null) { return null; } - return ; + return ; } export function getFormattedContextData({