From 2a11d697a2af13155486b7640dddc71e4d007b9d Mon Sep 17 00:00:00 2001
From: Minwook Shin <163576506+minwookshin@users.noreply.github.com>
Date: Wed, 7 Oct 2026 20:30:30 -0400
Subject: [PATCH] fix(List): align block content with list markers in Firefox

Assisted-by: Codex
---
 packages/react-core/src/components/List/ListItem.tsx  |  2 +-
 .../src/components/List/__tests__/ListItem.test.tsx   | 11 +++++++++++
 .../__tests__/__snapshots__/ListItem.test.tsx.snap    |  4 +---
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/packages/react-core/src/components/List/ListItem.tsx b/packages/react-core/src/components/List/ListItem.tsx
index 993c2ea97e4..5164c26b5f2 100644
--- a/packages/react-core/src/components/List/ListItem.tsx
+++ b/packages/react-core/src/components/List/ListItem.tsx
@@ -18,7 +18,7 @@ export const ListItem: React.FunctionComponent<ListItemProps> = ({
 }: ListItemProps) => (
   <li className={css(icon && styles.listItem, className)} {...props}>
     {icon && <span className={css(styles.listItemIcon)}>{icon}</span>}
-    <span className={icon && css(`${styles.list}__item-text`)}>{children}</span>
+    {icon ? <span className={css(`${styles.list}__item-text`)}>{children}</span> : children}
   </li>
 );
 ListItem.displayName = 'ListItem';
diff --git a/packages/react-core/src/components/List/__tests__/ListItem.test.tsx b/packages/react-core/src/components/List/__tests__/ListItem.test.tsx
index fe099c79c11..b3fd702056a 100644
--- a/packages/react-core/src/components/List/__tests__/ListItem.test.tsx
+++ b/packages/react-core/src/components/List/__tests__/ListItem.test.tsx
@@ -1,5 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import { ListItem } from '../ListItem';
+import { Content } from '../../Content';
 import styles from '@patternfly/react-styles/css/components/List/list';
 
 test('Renders with children', () => {
@@ -8,6 +9,16 @@ test('Renders with children', () => {
   expect(screen.getByRole('listitem')).toHaveTextContent('List item content');
 });
 
+test('Renders block content without an inline wrapper when there is no icon', () => {
+  render(
+    <ListItem>
+      <Content data-testid="content">List item content</Content>
+    </ListItem>
+  );
+
+  expect(screen.getByTestId('content').parentElement).toBe(screen.getByRole('listitem'));
+});
+
 test(`Does not render with a class by default`, () => {
   render(<ListItem>List item content</ListItem>);
 
diff --git a/packages/react-core/src/components/List/__tests__/__snapshots__/ListItem.test.tsx.snap b/packages/react-core/src/components/List/__tests__/__snapshots__/ListItem.test.tsx.snap
index 867f8836e2b..11f6b5d21ad 100644
--- a/packages/react-core/src/components/List/__tests__/__snapshots__/ListItem.test.tsx.snap
+++ b/packages/react-core/src/components/List/__tests__/__snapshots__/ListItem.test.tsx.snap
@@ -24,9 +24,7 @@ exports[`Matches snapshot with icon 1`] = `
 exports[`Matches snapshot without icon 1`] = `
 <DocumentFragment>
   <li>
-    <span>
-      List item content
-    </span>
+    List item content
   </li>
 </DocumentFragment>
 `;