From 3509b58ef4dc9ab664e6d8f0842301e5611bf4bc Mon Sep 17 00:00:00 2001
From: niukanen1 <57656076+niukanen1@users.noreply.github.com>
Date: Wed, 16 Sep 2026 00:26:03 +0400
Subject: [PATCH 1/2] fix(tooltip): make InfoTooltip keyboard reachable with an
 accessible name
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The InfoTooltip trigger was a plain <div>, so the help text it carries
was unreachable by keyboard and unannounced to screen readers — MUI
tooltips open on focus, and there was nothing to focus. Render the
trigger as a real <button> with aria-label so focus opens the tooltip
and assistive tech announces it.

Signed-off-by: niukanen1 <57656076+niukanen1@users.noreply.github.com>
---
 src/__testing__/InfoTooltip.test.tsx     | 33 ++++++++++++++++++++++++
 src/custom/CustomTooltip/infoTooltip.tsx | 10 +++++--
 2 files changed, 41 insertions(+), 2 deletions(-)
 create mode 100644 src/__testing__/InfoTooltip.test.tsx

diff --git a/src/__testing__/InfoTooltip.test.tsx b/src/__testing__/InfoTooltip.test.tsx
new file mode 100644
index 000000000..da7876a62
--- /dev/null
+++ b/src/__testing__/InfoTooltip.test.tsx
@@ -0,0 +1,33 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { InfoTooltip } from '../custom/CustomTooltip';
+import { SistentThemeProvider } from '../theme';
+
+// CustomTooltip renders its string titles through the Markdown module, which
+// is ESM-only and not transformed by this jest setup. The tooltip's content
+// rendering is not what this file exercises.
+jest.mock('../custom/Markdown', () => ({
+  RenderMarkdownTooltip: ({ content }: { content: string }) => <>{content}</>
+}));
+
+const renderWithTheme = (ui: React.ReactElement) =>
+  render(<SistentThemeProvider>{ui}</SistentThemeProvider>);
+
+describe('InfoTooltip', () => {
+  it('renders a focusable trigger so the tooltip opens on keyboard focus', () => {
+    renderWithTheme(<InfoTooltip helpText="Helpful details" />);
+
+    const trigger = screen.getByRole('button', { name: 'More information' });
+
+    expect(trigger.getAttribute('type')).toBe('button');
+    expect(trigger.tabIndex).toBeGreaterThanOrEqual(0);
+  });
+
+  it('exposes an accessible name so screen readers announce the trigger', () => {
+    renderWithTheme(<InfoTooltip helpText="Helpful details" />);
+
+    expect(
+      screen.getByRole('button', { name: 'More information' })
+    ).not.toBeNull();
+  });
+});
diff --git a/src/custom/CustomTooltip/infoTooltip.tsx b/src/custom/CustomTooltip/infoTooltip.tsx
index e7376d2c9..c4f10cc1c 100644
--- a/src/custom/CustomTooltip/infoTooltip.tsx
+++ b/src/custom/CustomTooltip/infoTooltip.tsx
@@ -10,17 +10,23 @@ type InfoTooltipProps = {
 const InfoTooltip = ({ helpText, style = {}, ...props }: InfoTooltipProps) => {
   return (
     <CustomTooltip title={helpText} {...props}>
-      <div
+      <button
+        type="button"
+        aria-label="More information"
         style={{
           display: 'flex',
           flexDirection: 'row',
           alignItems: 'center',
           justifyContent: 'center',
+          padding: 0,
+          border: 'none',
+          background: 'transparent',
+          cursor: 'help',
           ...style
         }}
       >
         <InfoOutlinedIcon {...iconSmall} />
-      </div>
+      </button>
     </CustomTooltip>
   );
 };

From 6586c3b450820a3717bb79ea05c24bf37b78a3b2 Mon Sep 17 00:00:00 2001
From: niukanen1 <57656076+niukanen1@users.noreply.github.com>
Date: Wed, 16 Sep 2026 14:45:16 +0400
Subject: [PATCH 2/2] test(tooltip): assert the tooltip opens on keyboard focus

The test checked that the trigger is focusable but never focused it, so
a regression in CustomTooltip focus handling would pass. Focus the
trigger and await the rendered tooltip.

Signed-off-by: niukanen1 <57656076+niukanen1@users.noreply.github.com>
---
 src/__testing__/InfoTooltip.test.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/__testing__/InfoTooltip.test.tsx b/src/__testing__/InfoTooltip.test.tsx
index da7876a62..92727c7e8 100644
--- a/src/__testing__/InfoTooltip.test.tsx
+++ b/src/__testing__/InfoTooltip.test.tsx
@@ -14,13 +14,15 @@ const renderWithTheme = (ui: React.ReactElement) =>
   render(<SistentThemeProvider>{ui}</SistentThemeProvider>);
 
 describe('InfoTooltip', () => {
-  it('renders a focusable trigger so the tooltip opens on keyboard focus', () => {
+  it('renders a focusable trigger so the tooltip opens on keyboard focus', async () => {
     renderWithTheme(<InfoTooltip helpText="Helpful details" />);
 
     const trigger = screen.getByRole('button', { name: 'More information' });
 
     expect(trigger.getAttribute('type')).toBe('button');
     expect(trigger.tabIndex).toBeGreaterThanOrEqual(0);
+    trigger.focus();
+    expect(await screen.findByRole('tooltip')).not.toBeNull();
   });
 
   it('exposes an accessible name so screen readers announce the trigger', () => {