Fix HalfLinePaddedBox in screenreader mode. (#17914)

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('<HalfLinePaddedBox />', () => {
+  const mockUseIsScreenReaderEnabled = vi.mocked(useIsScreenReaderEnabled);
+
   afterEach(() => {
     vi.restoreAllMocks();
   });
@@ -61,4 +71,19 @@ describe('<HalfLinePaddedBox />', () => {
 
     unmount();
   });
+
+  it('renders nothing when screen reader is enabled', async () => {
+    mockUseIsScreenReaderEnabled.mockReturnValue(true);
+
+    const { lastFrame, unmount } = renderWithProviders(
+      <HalfLinePaddedBox backgroundBaseColor="blue" backgroundOpacity={0.5}>
+        <Text>Content</Text>
+      </HalfLinePaddedBox>,
+      { width: 10 },
+    );
+
+    expect(lastFrame()).toMatchSnapshot();
+
+    unmount();
+  });
 });

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<HalfLinePaddedBoxProps> = (props) => {
-  if (props.useBackgroundColor === false) {
+  const isScreenReaderEnabled = useIsScreenReaderEnabled();
+  if (props.useBackgroundColor === false || isScreenReaderEnabled) {
     return <>{props.children}</>;
   }
 

packages/cli/src/ui/components/shared/__snapshots__/HalfLinePaddedBox.test.tsx.snap

@@ -6,6 +6,8 @@ Content
 ▀▀▀▀▀▀▀▀▀▀"
 `;
 
+exports[`<HalfLinePaddedBox /> > renders nothing when screen reader is enabled 1`] = `"Content"`;
+
 exports[`<HalfLinePaddedBox /> > renders nothing when useBackgroundColor is false 1`] = `"Content"`;
 
 exports[`<HalfLinePaddedBox /> > renders standard background and blocks when not iTerm2 1`] = `