fix(html): resolve validation errors, implement dynamic MDX heading shifting, and improve accessibility

components/RequestQuoteForm.tsx

@@ -78,6 +78,9 @@ export default function RequestQuoteForm({ productName }: RequestQuoteFormProps)
     }
   };
 
+  const emailId = React.useId();
+  const requestId = React.useId();
+
   if (status === 'success') {
     return (
       <div
@@ -164,9 +167,12 @@ export default function RequestQuoteForm({ productName }: RequestQuoteFormProps)
     <form onSubmit={handleSubmit} className="space-y-3 !mt-0">
       <div className="space-y-2 !mt-0">
         <div className="space-y-1 !mt-0">
+          <label htmlFor={emailId} className="sr-only">
+            {t('email')}
+          </label>
           <Input
             type="email"
-            id="quote-email"
+            id={emailId}
             required
             value={email}
             onChange={(e) => setEmail(e.target.value)}
@@ -177,8 +183,11 @@ export default function RequestQuoteForm({ productName }: RequestQuoteFormProps)
         </div>
 
         <div className="space-y-1 !mt-0">
+          <label htmlFor={requestId} className="sr-only">
+            {t('message')}
+          </label>
           <Textarea
-            id="quote-request"
+            id={requestId}
             required
             rows={3}
             value={request}