fix: missing required question warning (#6998)

packages/survey-ui/src/components/elements/consent.tsx

@@ -74,7 +74,7 @@ function Consent({
             onCheckedChange={handleCheckboxChange}
             disabled={disabled}
             aria-invalid={Boolean(errorMessage)}
-            aria-required={required}
+            required={required}
           />
           {/* need to use style here because tailwind is not able to use css variables for font size and weight */}
           <span

packages/survey-ui/src/components/elements/date.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { Calendar } from "@/components/general/calendar";
+import { ElementError } from "@/components/general/element-error";
 import { ElementHeader } from "@/components/general/element-header";
 import { getDateFnsLocale } from "@/lib/locale";
 
@@ -45,6 +46,7 @@ function DateElement({
   dir = "auto",
   disabled = false,
   locale = "en-US",
+  errorMessage,
 }: Readonly<DateElementProps>): React.JSX.Element {
   // Initialize date from value string, parsing as local time to avoid timezone issues
   const [date, setDate] = React.useState<Date | undefined>(() => {
@@ -128,17 +130,21 @@ function DateElement({
       {/* Headline */}
       <ElementHeader headline={headline} description={description} required={required} htmlFor={inputId} />
 
-      {/* Calendar - Always visible */}
-      <div className="w-full">
-        <Calendar
-          mode="single"
-          selected={date}
-          captionLayout="dropdown"
-          disabled={isDateDisabled}
-          onSelect={handleDateSelect}
-          locale={dateLocale}
-          className="rounded-input border-input-border bg-input-bg text-input-text shadow-input mx-auto w-full max-w-[25rem] border"
-        />
+      <div className="relative">
+        <ElementError errorMessage={errorMessage} dir={dir} />
+        {/* Calendar - Always visible */}
+        <div className="w-full">
+          <Calendar
+            mode="single"
+            selected={date}
+            captionLayout="dropdown"
+            disabled={isDateDisabled}
+            onSelect={handleDateSelect}
+            locale={dateLocale}
+            required={required}
+            className="rounded-input border-input-border bg-input-bg text-input-text shadow-input mx-auto w-full max-w-[25rem] border"
+          />
+        </div>
       </div>
     </div>
   );

packages/survey-ui/src/components/elements/file-upload.tsx

@@ -2,7 +2,6 @@ import { Upload, UploadIcon, X } from "lucide-react";
 import * as React from "react";
 import { ElementError } from "@/components/general/element-error";
 import { ElementHeader } from "@/components/general/element-header";
-import { Input } from "@/components/general/input";
 import { cn } from "@/lib/utils";
 
 /**
@@ -193,11 +192,11 @@ function UploadArea({
           id={`${inputId}-label`}>
           {placeholderText}
         </span>
-        <Input
+        <input
           ref={fileInputRef}
           type="file"
           id={inputId}
-          className="hidden"
+          className="sr-only"
           multiple={allowMultiple}
           accept={acceptAttribute}
           onChange={onFileChange}

packages/survey-ui/src/components/elements/matrix.tsx

@@ -114,6 +114,7 @@ function Matrix({
                     onValueChange={(newColumnId) => {
                       handleRowChange(row.id, newColumnId);
                     }}
+                    name={rowGroupId}
                     disabled={disabled}
                     required={required}
                     aria-invalid={Boolean(errorMessage)}>
@@ -142,6 +143,7 @@ function Matrix({
                             <Label htmlFor={cellId} className="flex cursor-pointer justify-center">
                               <RadioGroupItem
                                 value={column.id}
+                                required={required}
                                 id={cellId}
                                 disabled={disabled}
                                 aria-label={`${row.label}-${column.label}`}