Fix invalid HTML nesting flagged by validateDOMNesting

apps/central-scan/frontend/src/screens/settings_screen.tsx

@@ -85,7 +85,7 @@ export function SettingsScreen({
       )}
 
       <H2>Polling Place</H2>
-      <P>
+      <P as="div">
         <PollingPlacePicker
           mode={hasScannedBatches ? 'disabled' : 'default'}
           includedTypes={['absentee', 'election_day', 'early_voting']}

apps/design/frontend/src/districts_screen.tsx

@@ -237,7 +237,7 @@ function Contents(props: { editing: boolean }): React.ReactNode {
                   </strong>
                 </P>
               ) : (
-                <P>
+                <P as="div">
                   Are you sure you want to delete the following districts?{' '}
                   <strong>
                     This will delete all contests associated with these

apps/design/frontend/src/proofing_status.tsx

@@ -230,7 +230,7 @@ export function ProofingStatus(): React.ReactNode {
                 Unfinalizing will clear exports and reenable editing. Enter a
                 reason for unfinalizing.
               </P>
-              <P>
+              <P as="div">
                 <InputGroup label="Reason">
                   <TextArea
                     id="reason-for-unfinalizing"
@@ -327,7 +327,7 @@ function QaStatus({ qaRun }: { qaRun: ExportQaRun }): React.ReactNode {
     return (
       <Callout color="danger" icon="Danger">
         <div>
-          <P style={{ lineHeight: 1 }} weight="bold">
+          <P as="div" style={{ lineHeight: 1 }} weight="bold">
             QA Check Failed
             {resultsUrl && (
               <P>

apps/mark-scan/frontend/src/pages/admin_screen.tsx

@@ -106,7 +106,7 @@ export function AdminScreen({
           {format.count(ballotsPrintedCount)}
         </P>
         <H3 as="h2">Configuration</H3>
-        <P>
+        <P as="div">
           <LocationPicker
             election={election}
             pollsState={pollsState}

apps/mark/frontend/src/pages/admin_screen.tsx

@@ -123,7 +123,7 @@ export function AdminScreen({
           {format.count(ballotsPrintedCount)}
         </P>
         <H3 as="h2">Configuration</H3>
-        <P>
+        <P as="div">
           <LocationPicker
             election={election}
             pollsState={pollsState}

apps/mark/frontend/src/pages/test_deck_screen.tsx

@@ -63,7 +63,7 @@ export function TestDeckScreen({
           </Button>
         </P>
         {!isPrinterConnected && (
-          <P>
+          <P as="div">
             <Callout icon="Warning" color="warning">
               No printer detected. Connect it to print test decks.
             </Callout>
@@ -85,7 +85,7 @@ export function TestDeckScreen({
               : 'Print All Test Decks'}
           </Button>
         </P>
-        <P>
+        <P as="div">
           <SearchSelect
             aria-label="Select a precinct"
             isMulti={false}

apps/scan/frontend/src/screens/internal_connection_problem_screen.tsx

@@ -43,7 +43,7 @@ export function InternalConnectionProblemScreen({
             <PrinterErrorMessage printerStatus={printerStatus} />
           </P>
         )}
-        <P>
+        <P as="div">
           {isPollWorkerAuth ? (
             <P>
               <PowerDownButton variant="primary" />

libs/mark-flow-ui/src/components/poll_worker/ballot_style_select.tsx

@@ -142,7 +142,7 @@ export function BallotStyleSelect(props: BallotStyleSelectProps): JSX.Element {
       )}
 
       {selectedPrecinctOrSplit && (
-        <P>
+        <P as="div">
           <Font weight="semiBold">Select ballot style:</Font>
           <ButtonGrid>
             {getBallotStyleGroupsForPrecinctOrSplit({

libs/ui/src/typography.tsx

@@ -21,6 +21,16 @@ export interface FontProps {
   maxLines?: number;
 }
 
+/** Props for {@link P}. */
+export type ParagraphProps = FontProps & {
+  /**
+   * Renders a `<div>` instead of a `<p>`, keeping the paragraph styling. Use
+   * when the paragraph contains block-level content (e.g. a list, or a
+   * component that renders a `<div>`), which is invalid inside a `<p>`.
+   */
+  as?: 'div';
+};
+
 /**
  * Props for {@link H1}, {@link H2}, {@link H3}, {@link H4}, {@link H5}, and
  * {@link H6}
@@ -173,7 +183,7 @@ export function H6(props: HeadingProps): JSX.Element {
 }
 
 /** Styled block paragraph text for regular copy. */
-export function P(props: FontProps): JSX.Element {
+export function P(props: ParagraphProps): JSX.Element {
   return <StyledP {...props} />;
 }