fix(frontend) div can't be a child of summary (#235)

Co-authored-by: remy-mazerolle-esdc <[email protected]>

Author: ken-blanchard

frontend/app/components/collapsible.tsx

@@ -8,7 +8,7 @@ export type CollapsibleSummaryProps = ComponentProps<'summary'>;
 export function CollapsibleSummary({ children, className, ...props }: CollapsibleSummaryProps) {
   return (
     <summary className={cn('cursor-pointer marker:text-blue-900', className)} {...props}>
-      <div className="ml-4 inline-block text-blue-900 hover:underline">{children}</div>
+      <span className="ml-4 inline-block text-blue-900 hover:underline">{children}</span>
     </summary>
   );
 }

frontend/app/components/input-help.tsx

@@ -2,16 +2,16 @@ import type { ComponentProps, ReactNode } from 'react';
 
 import { cn } from '~/utils/tailwind-utils';
 
-export interface InputHelpProps extends ComponentProps<'span'> {
+export interface InputHelpProps extends ComponentProps<'div'> {
   children: ReactNode;
   id: string;
 }
 
 export function InputHelp(props: InputHelpProps) {
   const { children, className, ...restProps } = props;
   return (
-    <span className={cn('block max-w-prose text-gray-500', className)} data-testid="input-help" {...restProps}>
+    <div className={cn('max-w-prose text-gray-500', className)} data-testid="input-help" {...restProps}>
       {children}
-    </span>
+    </div>
   );
 }

frontend/e2e/estimator/results.spec.ts-snapshots/Navigating-to-en-results-renders-the-english-results-page-1.txt

@@ -1 +1 @@
-<div class="space-y-3"><div class="mt-10 mb-8"><h2>Canada Disability Benefit Estimator</h2><h1 id="wb-cont" tabindex="-1" class="font-lato text-3xl font-bold focus-visible:ring-3 after:mt-2 after:block after:h-1.5 after:w-18 after:bg-red-700">Step 1 of 2: Marital Status</h1></div><div><form novalidate="" data-discover="true" action="/en/marital-status" method="post"><div class="space-y-6"><fieldset id="input-radios-marital-status" data-testid="input-radios-marital-status"><legend class="block mb-2" id="input-radios-marital-status-legend"><span class="font-semibold">What is your marital status?</span> <span aria-hidden="true">(<!-- -->required<!-- -->)</span></legend><span class="block mb-2 -max-w-prose text-black" data-testid="input-field-help-primary-marital-status" id="input-radios-marital-status-help-primary"><div class="my-4 space-y-4"><details id="«Rdmlj5»"><summary class="cursor-pointer marker:text-blue-900" id="«Rdmlj5»-summary"><div class="ml-4 inline-block text-blue-900 hover:underline">Additional information</div></summary><div id="«Rdmlj5»-content" class="mt-2 border-l-[6px] border-gray-400 px-6 py-4"><div class="space-y-4"><p><strong>Single:</strong> you are single and another status does not apply</p><p><strong>Divorced:</strong> you were married and are now legally divorced</p><p><strong>Separated:</strong> you have been living apart from your spouse or common-law partner because of a breakdown in the relationship for a period of at least 90 days and you have not reconciled.</p><p>Once you have been separated for 90 days, the effective day of your separation is the date you started living apart. You would still be considered to have a spouse or common-law partner if there is no breakdown in the relationship and you were living apart for reasons such as work, studies, or health problems.</p><p>Note: Generally, you are not considered separated if your spouse or common-law partner is incarcerated or does not live in Canada, as long as there is no breakdown in your relationship</p><p><strong>Widowed:</strong> your spouse or common-law partner is deceased.</p><p><strong>Married:</strong> you are legally married to someone.</p><p><strong>Common-law:</strong> you are living in a conjugal relationship with someone to whom you are not married and to whom at least one of the following situations applies. They:</p><ul class="list-disc space-y-2 pl-5"><li>have been living with you for at least 12 continuous months. This includes any period you were separated for less than 90 days because of a breakdown in your relationship</li><li>are the parent of your child by birth or adoption</li><li>have custody and control of your child (or had custody and control immediately before the child turned 19 years of age) and your child is wholly dependent on that person for support</li></ul></div></div></details></div></span><ul class="space-y-2"><li><div><div class="flex items-center"><input type="radio" id="input-radio-marital-status-option-0" aria-labelledby="input-radio-marital-status-option-0-label" class="size-5 border-gray-500 bg-gray-50 text-blue-600 focus:ring-2 focus:ring-blue-500 focus:outline-hidden" data-testid="input-radio" aria-describedby="input-radios-marital-status-help-primary" aria-invalid="false" aria-required="true" required="" name="maritalStatus" value="single-divorced-separated-or-widowed"><label id="input-radio-marital-status-option-0-label" for="input-radio-marital-status-option-0" class="block pl-3 leading-6">Single, divorced, separated or widowed</label></div></div></li><li><div><div class="flex items-center"><input type="radio" id="input-radio-marital-status-option-1" aria-labelledby="input-radio-marital-status-option-1-label" class="size-5 border-gray-500 bg-gray-50 text-blue-600 focus:ring-2 focus:ring-blue-500 focus:outline-hidden" data-testid="input-radio" aria-describedby="input-radios-marital-status-help-primary" aria-invalid="false" aria-required="true" required="" name="maritalStatus" value="married-or-common-law"><label id="input-radio-marital-status-option-1-label" for="input-radio-marital-status-option-1" class="block pl-3 leading-6">Married or common-law</label></div></div></li></ul></fieldset></div><div class="mt-8 flex flex-row-reverse flex-wrap items-center justify-end gap-3"><button class="font-lato inline-flex items-center justify-center rounded border align-middle outline-offset-4 px-5 py-3 text-base border-slate-700 bg-slate-700 text-white hover:bg-sky-800 focus:bg-sky-800 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-70" data-gc-analytics-customclick="ESDC-EDSC_CDB-PCH:StepMaritalStatus:Next button" value="next" id="continue-button" name="action">Continue</button><button class="font-lato inline-flex items-center justify-center rounded border align-middle outline-offset-4 px-5 py-3 text-base border-gray-300 bg-gray-200 text-slate-700 hover:bg-neutral-300 focus:bg-neutral-300 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-70" data-gc-analytics-customclick="ESDC-EDSC_CDB-PCH:StepMaritalStatus:Previous button" value="back" id="back-button" name="action">Back</button></div></form></div></div><section class="mt-16 mb-8"><h2 class="sr-only">Page details</h2><dl id="wb-dtmd" class="space-y-1"><div class="flex gap-2"><dt>Screen identifier:</dt><dd>EST-0001</dd></div><div class="flex gap-2"><dt>Date modified:</dt><dd><time>1970-01-01</time></dd></div><div class="flex gap-2"><dt>Version:</dt><dd>0.0.0-000000-00000000</dd></div></dl></section>
+<div class="space-y-3"><div class="mt-10 mb-8"><h2>Canada Disability Benefit Estimator</h2><h1 id="wb-cont" tabindex="-1" class="font-lato text-3xl font-bold focus-visible:ring-3 after:mt-2 after:block after:h-1.5 after:w-18 after:bg-red-700">Step 1 of 2: Marital Status</h1></div><div><form novalidate="" data-discover="true" action="/en/marital-status" method="post"><div class="space-y-6"><fieldset id="input-radios-marital-status" data-testid="input-radios-marital-status"><legend class="block mb-2" id="input-radios-marital-status-legend"><span class="font-semibold">What is your marital status?</span> <span aria-hidden="true">(<!-- -->required<!-- -->)</span></legend><div class="mb-2 -max-w-prose text-black" data-testid="input-field-help-primary-marital-status" id="input-radios-marital-status-help-primary"><div class="my-4 space-y-4"><details id="«Rdmlj5»"><summary class="cursor-pointer marker:text-blue-900" id="«Rdmlj5»-summary"><span class="ml-4 inline-block text-blue-900 hover:underline">Additional information</span></summary><div id="«Rdmlj5»-content" class="mt-2 border-l-[6px] border-gray-400 px-6 py-4"><div class="space-y-4"><p><strong>Single:</strong> you are single and another status does not apply</p><p><strong>Divorced:</strong> you were married and are now legally divorced</p><p><strong>Separated:</strong> you have been living apart from your spouse or common-law partner because of a breakdown in the relationship for a period of at least 90 days and you have not reconciled.</p><p>Once you have been separated for 90 days, the effective day of your separation is the date you started living apart. You would still be considered to have a spouse or common-law partner if there is no breakdown in the relationship and you were living apart for reasons such as work, studies, or health problems.</p><p>Note: Generally, you are not considered separated if your spouse or common-law partner is incarcerated or does not live in Canada, as long as there is no breakdown in your relationship</p><p><strong>Widowed:</strong> your spouse or common-law partner is deceased.</p><p><strong>Married:</strong> you are legally married to someone.</p><p><strong>Common-law:</strong> you are living in a conjugal relationship with someone to whom you are not married and to whom at least one of the following situations applies. They:</p><ul class="list-disc space-y-2 pl-5"><li>have been living with you for at least 12 continuous months. This includes any period you were separated for less than 90 days because of a breakdown in your relationship</li><li>are the parent of your child by birth or adoption</li><li>have custody and control of your child (or had custody and control immediately before the child turned 19 years of age) and your child is wholly dependent on that person for support</li></ul></div></div></details></div></div><ul class="space-y-2"><li><div><div class="flex items-center"><input type="radio" id="input-radio-marital-status-option-0" aria-labelledby="input-radio-marital-status-option-0-label" class="size-5 border-gray-500 bg-gray-50 text-blue-600 focus:ring-2 focus:ring-blue-500 focus:outline-hidden" data-testid="input-radio" aria-describedby="input-radios-marital-status-help-primary" aria-invalid="false" aria-required="true" required="" name="maritalStatus" value="single-divorced-separated-or-widowed"><label id="input-radio-marital-status-option-0-label" for="input-radio-marital-status-option-0" class="block pl-3 leading-6">Single, divorced, separated or widowed</label></div></div></li><li><div><div class="flex items-center"><input type="radio" id="input-radio-marital-status-option-1" aria-labelledby="input-radio-marital-status-option-1-label" class="size-5 border-gray-500 bg-gray-50 text-blue-600 focus:ring-2 focus:ring-blue-500 focus:outline-hidden" data-testid="input-radio" aria-describedby="input-radios-marital-status-help-primary" aria-invalid="false" aria-required="true" required="" name="maritalStatus" value="married-or-common-law"><label id="input-radio-marital-status-option-1-label" for="input-radio-marital-status-option-1" class="block pl-3 leading-6">Married or common-law</label></div></div></li></ul></fieldset></div><div class="mt-8 flex flex-row-reverse flex-wrap items-center justify-end gap-3"><button class="font-lato inline-flex items-center justify-center rounded border align-middle outline-offset-4 px-5 py-3 text-base border-slate-700 bg-slate-700 text-white hover:bg-sky-800 focus:bg-sky-800 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-70" data-gc-analytics-customclick="ESDC-EDSC_CDB-PCH:StepMaritalStatus:Next button" value="next" id="continue-button" name="action">Continue</button><button class="font-lato inline-flex items-center justify-center rounded border align-middle outline-offset-4 px-5 py-3 text-base border-gray-300 bg-gray-200 text-slate-700 hover:bg-neutral-300 focus:bg-neutral-300 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-70" data-gc-analytics-customclick="ESDC-EDSC_CDB-PCH:StepMaritalStatus:Previous button" value="back" id="back-button" name="action">Back</button></div></form></div></div><section class="mt-16 mb-8"><h2 class="sr-only">Page details</h2><dl id="wb-dtmd" class="space-y-1"><div class="flex gap-2"><dt>Screen identifier:</dt><dd>EST-0001</dd></div><div class="flex gap-2"><dt>Date modified:</dt><dd><time>1970-01-01</time></dd></div><div class="flex gap-2"><dt>Version:</dt><dd>0.0.0-000000-00000000</dd></div></dl></section>