Resolve "Frontend for Models"

Closes #1 (closed)

aleksis/apps/lesrooster/frontend/components/LesroosterSlot.vue

@@ -23,25 +23,34 @@ import ValidityRangeField from "./ValidityRangeField.vue";</script>
       {{ $t("weekdays." + item.weekday) }}
     </template>
     <template #weekday.field="{ attrs, on }">
-      <week-day-field v-bind="attrs" v-on="on"/>
+      <div aria-required="true">
+        <week-day-field
+          v-bind="attrs"
+          v-on="on"
+          :rules="required"
+          required
+        />
+      </div>
     </template>
 
     <template #validityRange="{ item }">
       {{ item.validityRange?.name }}
     </template>
     <template #validityRange.field="{ attrs, on }">
-      <validity-range-field
+      <div aria-required="true">
+        <validity-range-field
           v-bind="attrs"
           v-on="on"
           :rules="required"
-      />
+          required
+        />
+      </div>
     </template>
 
     <template #period.field="{ attrs, on }">
       <positive-small-integer-field
           v-bind="attrs"
           v-on="on"
-          :rules="required"
       />
     </template>
 
@@ -49,22 +58,28 @@ import ValidityRangeField from "./ValidityRangeField.vue";</script>
       {{ $d(new Date("1970-01-01T" + item.timeStart), "shortTime") }}
     </template>
     <template #timeStart.field="{ attrs, on }">
-      <time-field
-        v-bind="attrs"
-        v-on="on"
-        :rules="required"
-      />
+      <div aria-required="true">
+        <time-field
+          v-bind="attrs"
+          v-on="on"
+          :rules="required"
+          required
+        />
+      </div>
     </template>
 
     <template #timeEnd="{ item }">
       {{ $d(new Date("1970-01-01T" + item.timeEnd), "shortTime") }}
     </template>
     <template #timeEnd.field="{ attrs, on }">
-      <time-field
-        v-bind="attrs"
-        v-on="on"
-        :rules="required"
-      />
+      <div aria-required="true">
+        <time-field
+          v-bind="attrs"
+          v-on="on"
+          :rules="required"
+          required
+        />
+      </div>
     </template>
 
     <template #filters="{ attrs, on }">