From 30ceed7204ffcdac975d15ad8410119caf2dd61f Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Wed, 28 Oct 2026 19:19:38 -0400
Subject: [PATCH] fix(a11y): give help buttons and scope status icons
 accessible names

Help buttons announced their internal id (e.g. "tooltip-search"); they now
read "Help: <label>". Scope status icons were hidden from assistive tech,
so granted/missing was conveyed by colour alone; they now carry a label such
as "repo missing". Tests query by role instead of test ID.
---
 .../filters/FilterCheckbox.test.tsx           |  2 +-
 .../components/filters/FilterCheckbox.tsx     |  2 +-
 .../components/filters/SearchFilter.test.tsx  |  4 +-
 .../primitives/HelpPopover.test.tsx           |  9 ++--
 .../components/primitives/HelpPopover.tsx     |  4 +-
 .../components/primitives/SectionHeading.tsx  |  1 +
 .../settings/AlertSettings.test.tsx           |  4 +-
 .../settings/AppearanceSettings.test.tsx      |  6 +--
 .../settings/InboxSettings.test.tsx           | 18 ++++----
 .../settings/SystemSettings.test.tsx          |  2 +-
 .../settings/controls/SettingsChoice.tsx      |  2 +-
 .../settings/controls/SettingsRow.tsx         |  2 +-
 .../settings/controls/SettingsToggle.tsx      |  2 +-
 src/renderer/icons/ScopeStatusIcon.test.tsx   | 43 ++++++-------------
 src/renderer/icons/ScopeStatusIcon.tsx        | 31 ++++++-------
 .../ScopeStatusIcon.test.tsx.snap             | 12 ++++--
 src/renderer/routes/AccountScopes.test.tsx    | 30 +++++++------
 src/renderer/routes/AccountScopes.tsx         | 14 +++---
 18 files changed, 90 insertions(+), 98 deletions(-)

diff --git a/src/renderer/components/filters/FilterCheckbox.test.tsx b/src/renderer/components/filters/FilterCheckbox.test.tsx
index 02fe144ea..514465d67 100644
--- a/src/renderer/components/filters/FilterCheckbox.test.tsx
+++ b/src/renderer/components/filters/FilterCheckbox.test.tsx
@@ -30,7 +30,7 @@ describe('renderer/components/filters/FilterCheckbox.tsx', () => {
 
     expect(screen.getByRole('checkbox', { name: 'Issues' })).toBeDisabled();
 
-    await userEvent.click(screen.getByTestId('tooltip-icon-tooltip-issues'));
+    await userEvent.click(screen.getByRole('button', { name: 'Help: Issues' }));
 
     expect(screen.getByText('Only issues assigned to you.')).toBeInTheDocument();
   });
diff --git a/src/renderer/components/filters/FilterCheckbox.tsx b/src/renderer/components/filters/FilterCheckbox.tsx
index e5a873dda..70cebba6d 100644
--- a/src/renderer/components/filters/FilterCheckbox.tsx
+++ b/src/renderer/components/filters/FilterCheckbox.tsx
@@ -45,7 +45,7 @@ export function FilterCheckbox({
         {label}
       </label>
 
-      {tooltip && <HelpPopover name={`tooltip-${name}`} content={tooltip} />}
+      {tooltip && <HelpPopover content={tooltip} label={label} name={`tooltip-${name}`} />}
 
       {counter !== undefined && (
         <CounterLabel
diff --git a/src/renderer/components/filters/SearchFilter.test.tsx b/src/renderer/components/filters/SearchFilter.test.tsx
index 68479946f..4a51483e8 100644
--- a/src/renderer/components/filters/SearchFilter.test.tsx
+++ b/src/renderer/components/filters/SearchFilter.test.tsx
@@ -18,7 +18,7 @@ describe('renderer/components/filters/SearchFilter.tsx', () => {
     it('lists the supported search qualifiers including commenter', async () => {
       renderWithProviders(<SearchFilter />);
 
-      const tooltipIconElement = screen.getByTestId('tooltip-icon-tooltip-search');
+      const tooltipIconElement = screen.getByRole('button', { name: 'Help: Search' });
       await userEvent.click(tooltipIconElement);
 
       expect(screen.getByText('Author (author:handle)')).toBeInTheDocument();
@@ -30,7 +30,7 @@ describe('renderer/components/filters/SearchFilter.tsx', () => {
     it('marks qualifiers that require detailed notifications as disabled', async () => {
       renderWithProviders(<SearchFilter />, { settings: { detailedNotifications: false } });
 
-      const tooltipIconElement = screen.getByTestId('tooltip-icon-tooltip-search');
+      const tooltipIconElement = screen.getByRole('button', { name: 'Help: Search' });
       await userEvent.click(tooltipIconElement);
 
       expect(screen.getByText('Author (author:handle)')).toHaveAttribute('aria-disabled', 'true');
diff --git a/src/renderer/components/primitives/HelpPopover.test.tsx b/src/renderer/components/primitives/HelpPopover.test.tsx
index 85954a017..4d57e3e1c 100644
--- a/src/renderer/components/primitives/HelpPopover.test.tsx
+++ b/src/renderer/components/primitives/HelpPopover.test.tsx
@@ -8,20 +8,21 @@ import { HelpPopover, type HelpPopoverProps } from './HelpPopover';
 describe('renderer/components/primitives/HelpPopover.tsx', () => {
   const props: HelpPopoverProps = {
     name: 'test',
+    label: 'Test setting',
     content: 'This is some help text',
   };
 
   it('renders', () => {
     renderWithProviders(<HelpPopover {...props} />);
 
-    expect(screen.getByTestId('tooltip-icon-test')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Help: Test setting' })).toBeInTheDocument();
     expect(screen.queryByText(props.content as string)).not.toBeInTheDocument();
   });
 
   it('toggles (show/hide) help on clicking the icon', async () => {
     renderWithProviders(<HelpPopover {...props} />);
 
-    const icon = screen.getByTestId('tooltip-icon-test');
+    const icon = screen.getByRole('button', { name: 'Help: Test setting' });
 
     await userEvent.click(icon);
     expect(screen.getByText(props.content as string)).toBeInTheDocument();
@@ -43,7 +44,7 @@ describe('renderer/components/primitives/HelpPopover.tsx', () => {
     Object.defineProperty(scrollContainer, 'clientHeight', { configurable: true, value: 100 });
     Object.defineProperty(scrollContainer, 'scrollHeight', { configurable: true, value: 400 });
 
-    await userEvent.click(screen.getByTestId('tooltip-icon-test'));
+    await userEvent.click(screen.getByRole('button', { name: 'Help: Test setting' }));
     expect(screen.getByText(props.content as string)).toBeInTheDocument();
 
     fireEvent.scroll(scrollContainer);
@@ -56,7 +57,7 @@ describe('renderer/components/primitives/HelpPopover.tsx', () => {
   it('hides help when clicking outside', async () => {
     renderWithProviders(<HelpPopover {...props} />);
 
-    const icon = screen.getByTestId('tooltip-icon-test');
+    const icon = screen.getByRole('button', { name: 'Help: Test setting' });
 
     await userEvent.click(icon);
     expect(screen.getByText(props.content as string)).toBeInTheDocument();
diff --git a/src/renderer/components/primitives/HelpPopover.tsx b/src/renderer/components/primitives/HelpPopover.tsx
index b9abe52ea..7e736d1a5 100644
--- a/src/renderer/components/primitives/HelpPopover.tsx
+++ b/src/renderer/components/primitives/HelpPopover.tsx
@@ -7,6 +7,8 @@ import { cn } from 'cn';
 
 export interface HelpPopoverProps {
   name: string;
+  /** Accessible name for the help button, e.g. the label of the control it explains. */
+  label: string;
   content: ReactNode | string;
 }
 
@@ -74,7 +76,7 @@ export function HelpPopover(props: Readonly<HelpPopoverProps>) {
       renderAnchor={(anchorProps) => (
         <IconButton
           {...anchorProps}
-          aria-label={props.name}
+          aria-label={`Help: ${props.label}`}
           className="text-gitify-tooltip-icon!"
           data-testid={`tooltip-icon-${props.name}`}
           icon={QuestionIcon}
diff --git a/src/renderer/components/primitives/SectionHeading.tsx b/src/renderer/components/primitives/SectionHeading.tsx
index e41371172..ae57d58f9 100644
--- a/src/renderer/components/primitives/SectionHeading.tsx
+++ b/src/renderer/components/primitives/SectionHeading.tsx
@@ -29,6 +29,7 @@ export function SectionHeading({ as = 'h4', ...props }: Readonly<SectionHeadingP
           {props.tooltip}
         </Stack>
       }
+      label={props.children}
       name={`tooltip-${name}`}
     />
   );
diff --git a/src/renderer/components/settings/AlertSettings.test.tsx b/src/renderer/components/settings/AlertSettings.test.tsx
index ad347a9cf..babf904c8 100644
--- a/src/renderer/components/settings/AlertSettings.test.tsx
+++ b/src/renderer/components/settings/AlertSettings.test.tsx
@@ -35,7 +35,7 @@ describe('renderer/components/settings/AlertSettings.tsx', () => {
   it('shows detailed help in tooltips', async () => {
     renderWithProviders(<AlertSettings />);
 
-    await userEvent.click(screen.getByTestId('tooltip-icon-tooltip-playSound'));
+    await userEvent.click(screen.getByRole('button', { name: 'Help: Play notification sound' }));
 
     expect(
       screen.getByText(
@@ -50,7 +50,7 @@ describe('renderer/components/settings/AlertSettings.tsx', () => {
     expect(screen.getByText('Notification volume')).toBeInTheDocument();
     expect(screen.getByTestId('reveal-volume')).toHaveAttribute('data-state', 'open');
 
-    await userEvent.click(screen.getByTestId('tooltip-icon-tooltip-notificationVolume'));
+    await userEvent.click(screen.getByRole('button', { name: 'Help: Notification volume' }));
 
     expect(screen.getByText('Adjust the volume of the notification sound.')).toBeInTheDocument();
   });
diff --git a/src/renderer/components/settings/AppearanceSettings.test.tsx b/src/renderer/components/settings/AppearanceSettings.test.tsx
index bddc6d877..66a07bebc 100644
--- a/src/renderer/components/settings/AppearanceSettings.test.tsx
+++ b/src/renderer/components/settings/AppearanceSettings.test.tsx
@@ -127,21 +127,21 @@ describe('renderer/components/settings/AppearanceSettings.tsx', () => {
       renderWithProviders(<AppearanceSettings />);
     });
 
-    await userEvent.click(screen.getByTestId('tooltip-icon-tooltip-designLanguage'));
+    await userEvent.click(screen.getByRole('button', { name: 'Help: Design' }));
     expect(
       screen.getByText(
         'Choose Classic for the original Gitify layout, or Glass for the translucent, layered design language.',
       ),
     ).toBeInTheDocument();
 
-    await userEvent.click(screen.getByTestId('tooltip-icon-tooltip-theme'));
+    await userEvent.click(screen.getByRole('button', { name: 'Help: Theme' }));
     expect(
       screen.getByText(
         'Choose a light, dark, or system color mode. Available options depend on the selected design language.',
       ),
     ).toBeInTheDocument();
 
-    await userEvent.click(screen.getByTestId('tooltip-icon-tooltip-zoom'));
+    await userEvent.click(screen.getByRole('button', { name: 'Help: Zoom' }));
     expect(
       screen.getByText(
         'Change the size of the Gitify interface. The setting applies immediately and is remembered for the next launch.',
diff --git a/src/renderer/components/settings/InboxSettings.test.tsx b/src/renderer/components/settings/InboxSettings.test.tsx
index 7809cf4b2..4b1868454 100644
--- a/src/renderer/components/settings/InboxSettings.test.tsx
+++ b/src/renderer/components/settings/InboxSettings.test.tsx
@@ -259,7 +259,7 @@ describe('renderer/components/settings/InboxSettings.tsx', () => {
       });
     });
 
-    await userEvent.click(screen.getByTestId('tooltip-icon-tooltip-showOnlyParticipating'));
+    await userEvent.click(screen.getByRole('button', { name: 'Help: Fetch only participating' }));
 
     await userEvent.click(
       screen.getByTitle('Open GitHub documentation for participating and watching notifications'),
@@ -272,19 +272,19 @@ describe('renderer/components/settings/InboxSettings.tsx', () => {
   });
 
   it.each([
-    ['groupBy', 'tooltip-groupBy'],
-    ['showAccountHeader', 'tooltip-showAccountHeader'],
-    ['wrapNotificationTitle', 'tooltip-wrapNotificationTitle'],
-    ['showNumber', 'tooltip-showNumber'],
-    ['delayNotificationState', 'tooltip-delayNotificationState'],
-  ] as const)('renders the %s tooltip', async (_name, tooltipName) => {
+    ['groupBy', 'Group by'],
+    ['showAccountHeader', 'Show account header'],
+    ['wrapNotificationTitle', 'Show full notification title'],
+    ['showNumber', 'Show reference'],
+    ['delayNotificationState', 'Delay notification removal'],
+  ] as const)('renders the %s tooltip', async (_name, label) => {
     await act(async () => {
       renderWithProviders(<InboxSettings />, {
         accounts: [mockGitHubCloudAccount],
       });
     });
 
-    expect(screen.getByTestId(`tooltip-icon-${tooltipName}`)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: `Help: ${label}` })).toBeInTheDocument();
   });
 
   it('shows the fetch interval details in a tooltip', async () => {
@@ -292,7 +292,7 @@ describe('renderer/components/settings/InboxSettings.tsx', () => {
       renderWithProviders(<InboxSettings />);
     });
 
-    await userEvent.click(screen.getByTestId('tooltip-icon-tooltip-fetchInterval'));
+    await userEvent.click(screen.getByRole('button', { name: 'Help: Fetch interval' }));
 
     expect(
       screen.getByText(
diff --git a/src/renderer/components/settings/SystemSettings.test.tsx b/src/renderer/components/settings/SystemSettings.test.tsx
index 78bafde3e..c71a6d3c5 100644
--- a/src/renderer/components/settings/SystemSettings.test.tsx
+++ b/src/renderer/components/settings/SystemSettings.test.tsx
@@ -131,7 +131,7 @@ describe('renderer/components/settings/SystemSettings.tsx', () => {
 
     expect(screen.getByText('Global shortcut')).toBeInTheDocument();
 
-    await userEvent.click(screen.getByTestId('tooltip-icon-tooltip-shortcut'));
+    await userEvent.click(screen.getByRole('button', { name: 'Help: Global shortcut' }));
 
     expect(screen.getByText('Shortcuts must include:')).toBeInTheDocument();
   });
diff --git a/src/renderer/components/settings/controls/SettingsChoice.tsx b/src/renderer/components/settings/controls/SettingsChoice.tsx
index 918f9a241..57be7ef4e 100644
--- a/src/renderer/components/settings/controls/SettingsChoice.tsx
+++ b/src/renderer/components/settings/controls/SettingsChoice.tsx
@@ -144,7 +144,7 @@ export function SettingsChoice({
           >
             {label}
           </button>
-          {tooltip && <HelpPopover name={`tooltip-${name}`} content={tooltip} />}
+          {tooltip && <HelpPopover content={tooltip} label={label} name={`tooltip-${name}`} />}
         </div>
         <div className="shrink-0">{control}</div>
       </div>
diff --git a/src/renderer/components/settings/controls/SettingsRow.tsx b/src/renderer/components/settings/controls/SettingsRow.tsx
index 907e0ad60..8b52c18bf 100644
--- a/src/renderer/components/settings/controls/SettingsRow.tsx
+++ b/src/renderer/components/settings/controls/SettingsRow.tsx
@@ -44,7 +44,7 @@ export function SettingsRow({
           <span className="text-sm font-medium text-gitify-font" id={labelId}>
             {label}
           </span>
-          {tooltip && <HelpPopover name={`tooltip-${name}`} content={tooltip} />}
+          {tooltip && <HelpPopover content={tooltip} label={label} name={`tooltip-${name}`} />}
         </div>
         <div className="shrink-0">{children}</div>
       </div>
diff --git a/src/renderer/components/settings/controls/SettingsToggle.tsx b/src/renderer/components/settings/controls/SettingsToggle.tsx
index f72fb35b1..c10f01c28 100644
--- a/src/renderer/components/settings/controls/SettingsToggle.tsx
+++ b/src/renderer/components/settings/controls/SettingsToggle.tsx
@@ -57,7 +57,7 @@ export function SettingsToggle({
           >
             {label}
           </button>
-          {tooltip && <HelpPopover name={`tooltip-${name}`} content={tooltip} />}
+          {tooltip && <HelpPopover content={tooltip} label={label} name={`tooltip-${name}`} />}
         </div>
 
         {caption && (
diff --git a/src/renderer/icons/ScopeStatusIcon.test.tsx b/src/renderer/icons/ScopeStatusIcon.test.tsx
index a924dc4b3..d5674c07f 100644
--- a/src/renderer/icons/ScopeStatusIcon.test.tsx
+++ b/src/renderer/icons/ScopeStatusIcon.test.tsx
@@ -11,14 +11,9 @@ describe('renderer/icons/ScopeStatusIcon.tsx', () => {
       expect(tree.container).toMatchSnapshot();
     });
 
-    it('renders a success icon with test id when withTestId is true', () => {
-      renderWithProviders(<ScopeStatusIcon granted={true} withTestId={true} />);
-      expect(screen.getByTestId('account-scopes-scope-granted')).toBeInTheDocument();
-    });
-
-    it('does not render a test id by default', () => {
+    it('announces the granted status', () => {
       renderWithProviders(<ScopeStatusIcon granted={true} />);
-      expect(screen.queryByTestId('account-scopes-scope-granted')).not.toBeInTheDocument();
+      expect(screen.getByRole('img', { name: 'granted' })).toBeInTheDocument();
     });
   });
 
@@ -28,14 +23,9 @@ describe('renderer/icons/ScopeStatusIcon.tsx', () => {
       expect(tree.container).toMatchSnapshot();
     });
 
-    it('renders a danger icon with test id when withTestId is true', () => {
-      renderWithProviders(<ScopeStatusIcon granted={false} withTestId={true} />);
-      expect(screen.getByTestId('account-scopes-scope-missing')).toBeInTheDocument();
-    });
-
-    it('does not render a test id by default', () => {
+    it('announces the missing status', () => {
       renderWithProviders(<ScopeStatusIcon granted={false} />);
-      expect(screen.queryByTestId('account-scopes-scope-missing')).not.toBeInTheDocument();
+      expect(screen.getByRole('img', { name: 'missing' })).toBeInTheDocument();
     });
   });
 
@@ -45,24 +35,17 @@ describe('renderer/icons/ScopeStatusIcon.tsx', () => {
       expect(tree.container).toMatchSnapshot();
     });
 
-    it('renders a dash icon with test id when withTestId is true', () => {
-      renderWithProviders(
-        <ScopeStatusIcon granted={false} notApplicable={true} withTestId={true} />,
-      );
-      expect(screen.getByTestId('account-scopes-scope-na')).toBeInTheDocument();
-    });
-
-    it('does not render a test id by default', () => {
-      renderWithProviders(<ScopeStatusIcon granted={false} notApplicable={true} />);
-      expect(screen.queryByTestId('account-scopes-scope-na')).not.toBeInTheDocument();
+    it('ignores granted=true when notApplicable is true', () => {
+      renderWithProviders(<ScopeStatusIcon granted={true} notApplicable={true} />);
+      expect(screen.getByRole('img', { name: 'not applicable' })).toBeInTheDocument();
+      expect(screen.queryByRole('img', { name: 'granted' })).not.toBeInTheDocument();
     });
+  });
 
-    it('ignores granted=true when notApplicable is true', () => {
-      renderWithProviders(
-        <ScopeStatusIcon granted={true} notApplicable={true} withTestId={true} />,
-      );
-      expect(screen.getByTestId('account-scopes-scope-na')).toBeInTheDocument();
-      expect(screen.queryByTestId('account-scopes-scope-granted')).not.toBeInTheDocument();
+  describe('subject prop', () => {
+    it('prefixes the subject to the accessible name', () => {
+      renderWithProviders(<ScopeStatusIcon granted={false} subject="repo" />);
+      expect(screen.getByRole('img', { name: 'repo missing' })).toBeInTheDocument();
     });
   });
 
diff --git a/src/renderer/icons/ScopeStatusIcon.tsx b/src/renderer/icons/ScopeStatusIcon.tsx
index a666fe0c0..f345f938e 100644
--- a/src/renderer/icons/ScopeStatusIcon.tsx
+++ b/src/renderer/icons/ScopeStatusIcon.tsx
@@ -4,36 +4,29 @@ export interface ScopeStatusIconProps {
   granted: boolean;
   notApplicable?: boolean;
   size?: number;
-  withTestId?: boolean;
+  /** What the status describes (e.g. a scope name), prefixed to the accessible name. */
+  subject?: string;
 }
 
 export function ScopeStatusIcon({
   granted,
   notApplicable = false,
   size = 14,
-  withTestId = false,
+  subject,
 }: Readonly<ScopeStatusIconProps>) {
+  let status = granted ? 'granted' : 'missing';
   if (notApplicable) {
-    return (
-      <DashIcon
-        className="opacity-30"
-        data-testid={withTestId ? 'account-scopes-scope-na' : undefined}
-        size={size}
-      />
-    );
+    status = 'not applicable';
+  }
+  const ariaLabel = subject ? `${subject} ${status}` : status;
+
+  if (notApplicable) {
+    return <DashIcon aria-label={ariaLabel} className="opacity-30" size={size} />;
   }
 
   return granted ? (
-    <CheckCircleFillIcon
-      className="text-gitify-success"
-      data-testid={withTestId ? 'account-scopes-scope-granted' : undefined}
-      size={size}
-    />
+    <CheckCircleFillIcon aria-label={ariaLabel} className="text-gitify-success" size={size} />
   ) : (
-    <XCircleFillIcon
-      className="text-gitify-danger"
-      data-testid={withTestId ? 'account-scopes-scope-missing' : undefined}
-      size={size}
-    />
+    <XCircleFillIcon aria-label={ariaLabel} className="text-gitify-danger" size={size} />
   );
 }
diff --git a/src/renderer/icons/__snapshots__/ScopeStatusIcon.test.tsx.snap b/src/renderer/icons/__snapshots__/ScopeStatusIcon.test.tsx.snap
index 5b40f633f..ac709ad7e 100644
--- a/src/renderer/icons/__snapshots__/ScopeStatusIcon.test.tsx.snap
+++ b/src/renderer/icons/__snapshots__/ScopeStatusIcon.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`renderer/icons/ScopeStatusIcon.tsx > granted state > renders a success icon when granted 1`] = `
 <div>
   <svg
-    aria-hidden="true"
+    aria-label="granted"
     class="octicon octicon-check-circle-fill text-gitify-success"
     data-component="Octicon"
     display="inline-block"
@@ -11,6 +11,7 @@ exports[`renderer/icons/ScopeStatusIcon.tsx > granted state > renders a success
     focusable="false"
     height="14"
     overflow="visible"
+    role="img"
     style="vertical-align: text-bottom;"
     viewBox="0 0 12 12"
     width="14"
@@ -25,7 +26,7 @@ exports[`renderer/icons/ScopeStatusIcon.tsx > granted state > renders a success
 exports[`renderer/icons/ScopeStatusIcon.tsx > missing state > renders a danger icon when not granted 1`] = `
 <div>
   <svg
-    aria-hidden="true"
+    aria-label="missing"
     class="octicon octicon-x-circle-fill text-gitify-danger"
     data-component="Octicon"
     display="inline-block"
@@ -33,6 +34,7 @@ exports[`renderer/icons/ScopeStatusIcon.tsx > missing state > renders a danger i
     focusable="false"
     height="14"
     overflow="visible"
+    role="img"
     style="vertical-align: text-bottom;"
     viewBox="0 0 12 12"
     width="14"
@@ -47,7 +49,7 @@ exports[`renderer/icons/ScopeStatusIcon.tsx > missing state > renders a danger i
 exports[`renderer/icons/ScopeStatusIcon.tsx > notApplicable state > renders a dash icon when notApplicable 1`] = `
 <div>
   <svg
-    aria-hidden="true"
+    aria-label="not applicable"
     class="octicon octicon-dash opacity-30"
     data-component="Octicon"
     display="inline-block"
@@ -55,6 +57,7 @@ exports[`renderer/icons/ScopeStatusIcon.tsx > notApplicable state > renders a da
     focusable="false"
     height="14"
     overflow="visible"
+    role="img"
     style="vertical-align: text-bottom;"
     viewBox="0 0 16 16"
     width="14"
@@ -69,7 +72,7 @@ exports[`renderer/icons/ScopeStatusIcon.tsx > notApplicable state > renders a da
 exports[`renderer/icons/ScopeStatusIcon.tsx > size prop > renders correctly with a custom size 1`] = `
 <div>
   <svg
-    aria-hidden="true"
+    aria-label="granted"
     class="octicon octicon-check-circle-fill text-gitify-success"
     data-component="Octicon"
     display="inline-block"
@@ -77,6 +80,7 @@ exports[`renderer/icons/ScopeStatusIcon.tsx > size prop > renders correctly with
     focusable="false"
     height="20"
     overflow="visible"
+    role="img"
     style="vertical-align: text-bottom;"
     viewBox="0 0 16 16"
     width="20"
diff --git a/src/renderer/routes/AccountScopes.test.tsx b/src/renderer/routes/AccountScopes.test.tsx
index 405dcb769..05884d328 100644
--- a/src/renderer/routes/AccountScopes.test.tsx
+++ b/src/renderer/routes/AccountScopes.test.tsx
@@ -53,10 +53,12 @@ describe('renderer/routes/AccountScopes.tsx', () => {
       renderWithProviders(<AccountScopesRoute />);
     });
 
-    // notifications + read:user (required) + repo (detailed) = 3 granted; public_repo = N/A (covered by repo)
-    expect(screen.getAllByTestId('account-scopes-scope-granted')).toHaveLength(3);
-    expect(screen.queryAllByTestId('account-scopes-scope-missing')).toHaveLength(0);
-    expect(screen.getAllByTestId('account-scopes-scope-na')).toHaveLength(1);
+    expect(screen.getByRole('img', { name: 'notifications granted' })).toBeInTheDocument();
+    expect(screen.getByRole('img', { name: 'read:user granted' })).toBeInTheDocument();
+    expect(screen.getByRole('img', { name: 'repo granted' })).toBeInTheDocument();
+    // public_repo is covered by repo
+    expect(screen.getByRole('img', { name: 'public_repo not applicable' })).toBeInTheDocument();
+    expect(screen.queryAllByRole('img', { name: /missing$/ })).toHaveLength(0);
   });
 
   it('shows required-scope row with granted/missing indicators', async () => {
@@ -105,9 +107,10 @@ describe('renderer/routes/AccountScopes.tsx', () => {
       renderWithProviders(<AccountScopesRoute />);
     });
 
-    // notifications + read:user (required) + public_repo (detailed) = 3 granted; repo = 1 missing
-    expect(screen.getAllByTestId('account-scopes-scope-granted')).toHaveLength(3);
-    expect(screen.getAllByTestId('account-scopes-scope-missing')).toHaveLength(1);
+    expect(screen.getByRole('img', { name: 'notifications granted' })).toBeInTheDocument();
+    expect(screen.getByRole('img', { name: 'read:user granted' })).toBeInTheDocument();
+    expect(screen.getByRole('img', { name: 'public_repo granted' })).toBeInTheDocument();
+    expect(screen.getByRole('img', { name: 'repo missing' })).toBeInTheDocument();
   });
 
   it('shows missing indicator when neither repo nor public_repo is granted', async () => {
@@ -120,10 +123,11 @@ describe('renderer/routes/AccountScopes.tsx', () => {
       renderWithProviders(<AccountScopesRoute />);
     });
 
-    // Both repo rows show missing
-    expect(screen.getAllByTestId('account-scopes-scope-missing')).toHaveLength(2);
-    expect(screen.getByTestId('account-scopes-repo-scope')).toBeInTheDocument();
-    expect(screen.getByTestId('account-scopes-public-repo-scope')).toBeInTheDocument();
+    expect(screen.getByRole('img', { name: 'repo missing' })).toBeInTheDocument();
+    expect(screen.getByRole('img', { name: 'public_repo missing' })).toBeInTheDocument();
+    expect(
+      screen.getByRole('img', { name: 'Detailed notifications scopes missing' }),
+    ).toBeInTheDocument();
   });
 
   it('shows missing indicator when notifications scope is absent', async () => {
@@ -136,8 +140,8 @@ describe('renderer/routes/AccountScopes.tsx', () => {
       renderWithProviders(<AccountScopesRoute />);
     });
 
-    // Required scope (notifications) is missing
-    expect(screen.queryAllByTestId('account-scopes-scope-missing').length).toBeGreaterThan(0);
+    expect(screen.getByRole('img', { name: 'notifications missing' })).toBeInTheDocument();
+    expect(screen.getByRole('img', { name: 'Required scopes missing' })).toBeInTheDocument();
   });
 
   it('shows extra scopes when token has additional permissions', async () => {
diff --git a/src/renderer/routes/AccountScopes.tsx b/src/renderer/routes/AccountScopes.tsx
index fc36affee..84b7638f5 100644
--- a/src/renderer/routes/AccountScopes.tsx
+++ b/src/renderer/routes/AccountScopes.tsx
@@ -75,7 +75,7 @@ export function AccountScopesRoute() {
                   direction="horizontal"
                   gap="condensed"
                 >
-                  <ScopeStatusIcon granted={hasRequired} size={12} />
+                  <ScopeStatusIcon granted={hasRequired} size={12} subject="Required scopes" />
                   <Text>Required</Text>
                 </Stack>
 
@@ -110,7 +110,7 @@ export function AccountScopesRoute() {
                           <Text className="text-xs font-mono">{name}</Text>
                           <Text className="text-xs opacity-60">{description}</Text>
                         </Stack>
-                        <ScopeStatusIcon granted={granted} withTestId />
+                        <ScopeStatusIcon granted={granted} subject={name} />
                       </Stack>
                     );
                   })
@@ -124,7 +124,11 @@ export function AccountScopesRoute() {
                   direction="horizontal"
                   gap="condensed"
                 >
-                  <ScopeStatusIcon granted={hasDetailedNotifications} size={12} />
+                  <ScopeStatusIcon
+                    granted={hasDetailedNotifications}
+                    size={12}
+                    subject="Detailed notifications scopes"
+                  />
                   <Text>Detailed Notifications</Text>
                 </Stack>
 
@@ -141,7 +145,7 @@ export function AccountScopesRoute() {
                     <Text className="text-xs font-mono">{OAUTH_SCOPE.REPO.name}</Text>
                     <Text className="text-xs opacity-60">{OAUTH_SCOPE.REPO.description}</Text>
                   </Stack>
-                  <ScopeStatusIcon granted={repoGranted} withTestId />
+                  <ScopeStatusIcon granted={repoGranted} subject={OAUTH_SCOPE.REPO.name} />
                 </Stack>
 
                 {/* public_repo row */}
@@ -162,7 +166,7 @@ export function AccountScopesRoute() {
                   <ScopeStatusIcon
                     granted={publicRepoGranted}
                     notApplicable={repoGranted}
-                    withTestId
+                    subject={OAUTH_SCOPE.PUBLIC_REPO.name}
                   />
                 </Stack>
               </Stack>