diff --git a/packages/cli/src/ui/components/shared/HalfLinePaddedBox.test.tsx b/packages/cli/src/ui/components/shared/HalfLinePaddedBox.test.tsx
index 2f4b51966e..f7bb8d12af 100644
--- a/packages/cli/src/ui/components/shared/HalfLinePaddedBox.test.tsx
+++ b/packages/cli/src/ui/components/shared/HalfLinePaddedBox.test.tsx
@@ -6,11 +6,21 @@
import { renderWithProviders } from '../../../test-utils/render.js';
import { HalfLinePaddedBox } from './HalfLinePaddedBox.js';
-import { Text } from 'ink';
+import { Text, useIsScreenReaderEnabled } from 'ink';
import { describe, it, expect, vi, afterEach } from 'vitest';
import { isITerm2 } from '../../utils/terminalUtils.js';
+vi.mock('ink', async () => {
+ const actual = await vi.importActual('ink');
+ return {
+ ...actual,
+ useIsScreenReaderEnabled: vi.fn(() => false),
+ };
+});
+
describe('', () => {
+ const mockUseIsScreenReaderEnabled = vi.mocked(useIsScreenReaderEnabled);
+
afterEach(() => {
vi.restoreAllMocks();
});
@@ -61,4 +71,19 @@ describe('', () => {
unmount();
});
+
+ it('renders nothing when screen reader is enabled', async () => {
+ mockUseIsScreenReaderEnabled.mockReturnValue(true);
+
+ const { lastFrame, unmount } = renderWithProviders(
+
+ Content
+ ,
+ { width: 10 },
+ );
+
+ expect(lastFrame()).toMatchSnapshot();
+
+ unmount();
+ });
});
diff --git a/packages/cli/src/ui/components/shared/HalfLinePaddedBox.tsx b/packages/cli/src/ui/components/shared/HalfLinePaddedBox.tsx
index 0978c6d736..0b15c58beb 100644
--- a/packages/cli/src/ui/components/shared/HalfLinePaddedBox.tsx
+++ b/packages/cli/src/ui/components/shared/HalfLinePaddedBox.tsx
@@ -6,7 +6,7 @@
import type React from 'react';
import { useMemo } from 'react';
-import { Box, Text } from 'ink';
+import { Box, Text, useIsScreenReaderEnabled } from 'ink';
import { useUIState } from '../../contexts/UIStateContext.js';
import {
interpolateColor,
@@ -39,7 +39,8 @@ export interface HalfLinePaddedBoxProps {
* at the top and bottom using block characters (▀/▄).
*/
export const HalfLinePaddedBox: React.FC = (props) => {
- if (props.useBackgroundColor === false) {
+ const isScreenReaderEnabled = useIsScreenReaderEnabled();
+ if (props.useBackgroundColor === false || isScreenReaderEnabled) {
return <>{props.children}>;
}
diff --git a/packages/cli/src/ui/components/shared/__snapshots__/HalfLinePaddedBox.test.tsx.snap b/packages/cli/src/ui/components/shared/__snapshots__/HalfLinePaddedBox.test.tsx.snap
index c8f4137a3f..09893aa416 100644
--- a/packages/cli/src/ui/components/shared/__snapshots__/HalfLinePaddedBox.test.tsx.snap
+++ b/packages/cli/src/ui/components/shared/__snapshots__/HalfLinePaddedBox.test.tsx.snap
@@ -6,6 +6,8 @@ Content
▀▀▀▀▀▀▀▀▀▀"
`;
+exports[` > renders nothing when screen reader is enabled 1`] = `"Content"`;
+
exports[` > renders nothing when useBackgroundColor is false 1`] = `"Content"`;
exports[` > renders standard background and blocks when not iTerm2 1`] = `