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`] = `