fix: react-doctor → 64/100 — add sizes to 12 next/image, add htmlFor/id to 202 label/input pairs, add aria-label to 5 icon links

src/components/water/WaterFieldClient.tsx

@@ -602,10 +602,8 @@ function WaterFieldInner() {
         {/* Measurement + Unit row */}
         <div className="flex gap-3">
           <div className="flex-1">
-            <label className="block text-base font-semibold text-stone-700 mb-2">
-              {t.measurement}
-            </label>
-            <input aria-label="0.00"
+            <label htmlFor="fld-1-tmeasurement"  className="block text-base font-semibold text-stone-700 mb-2">{t.measurement}</label>
+            <input id="fld-1-tmeasurement"  aria-label="0.00"
               type="number"
               step="any"
               value={measurement}
@@ -617,10 +615,8 @@ function WaterFieldInner() {
             />
           </div>
           <div className="w-32">
-            <label className="block text-base font-semibold text-stone-700 mb-2">
-              {t.unit}
-            </label>
-            <select aria-label="Select"
+            <label htmlFor="fld-2-tunit"  className="block text-base font-semibold text-stone-700 mb-2">{t.unit}</label>
+            <select id="fld-2-tunit"  aria-label="Select"
               value={unit}
               onChange={(e) => setUnit(e.target.value)}
               className="w-full rounded-xl border-2 border-stone-300 bg-white px-4 py-4 text-lg font-semibold outline-none focus:border-stone-900 min-h-[60px]"
@@ -668,7 +664,7 @@ function WaterFieldInner() {
           </label>
           {photoPreview ? (
             <div className="relative rounded-xl overflow-hidden border-2 border-stone-300">
-              <Image src={photoPreview} alt="Preview" fill style={{ objectFit: "cover" }} />
+              <Image src={photoPreview} alt="Preview" fill sizes="(max-width: 640px) 100vw, 480px" style={{ objectFit: "cover" }} />
               <button
                 type="button"
                 onClick={removePhoto}
@@ -692,10 +688,8 @@ function WaterFieldInner() {
 
         {/* Notes */}
         <div>
-          <label className="block text-base font-semibold text-stone-700 mb-2">
-            {t.notes}
-          </label>
-          <textarea aria-label="Textarea"
+          <label htmlFor="fld-3-tnotes"  className="block text-base font-semibold text-stone-700 mb-2">{t.notes}</label>
+          <textarea id="fld-3-tnotes"  aria-label="Textarea"
             value={notes}
             onChange={(e) => setNotes(e.target.value)}
             placeholder={t.notesPlaceholder}