Indicate required fields in Experiment and Scoreset forms

src/components/forms/ExperimentFields.vue

@@ -8,7 +8,12 @@
         <p v-if="desc.title.detail" class="wizard-help-detail" v-html="desc.title.detail" />
       </div>
       <div :class="wizardMode && 'wizard-field'">
-        <MvFloatField :error="validationErrors.title" :hint="wizardMode ? undefined : desc.title.hint" label="Title">
+        <MvFloatField
+          :error="validationErrors.title"
+          :hint="wizardMode ? undefined : desc.title.hint"
+          label="Title"
+          required
+        >
           <template #default="{id, invalid}">
             <PInputText
               :id="id"
@@ -35,6 +40,7 @@
           :error="validationErrors.shortDescription"
           :hint="wizardMode ? undefined : desc.shortDescription.hint"
           label="Short description"
+          required
         >
           <template #default="{id, invalid}">
             <PTextarea
@@ -64,6 +70,7 @@
           :hint="wizardMode ? undefined : desc.abstractText.hint"
           label="Abstract"
           :model-value="abstractText"
+          required
           :rows="wizardMode ? 10 : 4"
           @update:model-value="$emit('update:abstractText', $event)"
         />
@@ -83,6 +90,7 @@
           :hint="wizardMode ? undefined : desc.methodText.hint"
           label="Methods"
           :model-value="methodText"
+          required
           :rows="wizardMode ? 10 : 4"
           @update:model-value="$emit('update:methodText', $event)"
         />

src/components/forms/MvFloatField.vue

@@ -2,7 +2,10 @@
   <div :class="error ? 'mv-field-error' : ''">
     <FloatLabel variant="on">
       <slot :id="fieldId" :error-id="error ? errorId : undefined" :invalid="!!error" />
-      <label :for="fieldId">{{ label }}</label>
+      <label :for="fieldId">
+        {{ label }}
+        <MvRequiredMarker v-if="required" />
+      </label>
     </FloatLabel>
     <p v-if="hint && !error" class="mt-1 text-xs text-text-muted">{{ hint }}</p>
     <MvFieldError :id="errorId" :error="error" />
@@ -13,18 +16,20 @@
 import {defineComponent, type PropType} from 'vue'
 import FloatLabel from 'primevue/floatlabel'
 import MvFieldError from '@/components/forms/MvFieldError.vue'
+import MvRequiredMarker from '@/components/forms/MvRequiredMarker.vue'
 import {useFieldId} from '@/composables/scoped-id'
 
 export default defineComponent({
   name: 'MvFloatField',
 
-  components: {FloatLabel, MvFieldError},
+  components: {FloatLabel, MvFieldError, MvRequiredMarker},
 
   props: {
     label: {type: String, required: true},
     error: {type: String as PropType<string | null>, default: null},
     id: {type: String as PropType<string | null>, default: null},
-    hint: {type: String as PropType<string | null>, default: null}
+    hint: {type: String as PropType<string | null>, default: null},
+    required: {type: Boolean, default: false}
   },
 
   setup(props) {

src/components/forms/MvMarkdownField.vue

@@ -14,7 +14,7 @@
       </button>
     </div>
 
-    <MvFloatField :label="label">
+    <MvFloatField :label="label" :required="required">
       <template #default>
         <div v-if="previewing" class="markdown-preview p-inputwrapper-filled">
           <!-- eslint-disable vue/no-v-html -->
@@ -31,6 +31,7 @@
           v-else
           :id="fieldId"
           :aria-describedby="error ? errorId : undefined"
+          :aria-required="required || undefined"
           class="w-full"
           fluid
           :invalid="!!error"
@@ -64,7 +65,8 @@ export default defineComponent({
     rows: {type: Number, default: 10},
     error: {type: String as PropType<string | null>, default: null},
     id: {type: String as PropType<string | null>, default: null},
-    hint: {type: String as PropType<string | null>, default: null}
+    hint: {type: String as PropType<string | null>, default: null},
+    required: {type: Boolean, default: false}
   },
 
   emits: ['update:modelValue'],

src/components/forms/MvRequiredMarker.vue

@@ -0,0 +1,14 @@
+<template>
+  <span class="text-xl text-danger">
+    <span aria-hidden="true">*</span>
+    <span class="sr-only">(required)</span>
+  </span>
+</template>
+
+<script lang="ts">
+import {defineComponent} from 'vue'
+
+export default defineComponent({
+  name: 'MvRequiredMarker'
+})
+</script>

src/components/forms/MvTagField.vue

@@ -6,6 +6,7 @@
         ref="autoCompleteRef"
         :aria-describedby="error ? errorId : undefined"
         :aria-label="label"
+        :aria-required="required || undefined"
         class="w-full"
         :invalid="!!error"
         :model-value="modelValue"
@@ -36,7 +37,10 @@
           </slot>
         </template>
       </AutoComplete>
-      <label :for="fieldId">{{ label }}</label>
+      <label :for="fieldId">
+        {{ label }}
+        <MvRequiredMarker v-if="required" />
+      </label>
     </FloatLabel>
     <p v-if="hint && !error" class="mt-1 text-xs text-text-muted">{{ hint }}</p>
     <MvFieldError :id="errorId" :error="error" />
@@ -48,13 +52,14 @@ import {defineComponent, type PropType} from 'vue'
 import AutoComplete from 'primevue/autocomplete'
 import FloatLabel from 'primevue/floatlabel'
 import MvFieldError from '@/components/forms/MvFieldError.vue'
+import MvRequiredMarker from '@/components/forms/MvRequiredMarker.vue'
 import {useFieldId} from '@/composables/scoped-id'
 import {isEmptySentinel} from '@/lib/form-helpers'
 
 export default defineComponent({
   name: 'MvTagField',
 
-  components: {AutoComplete, FloatLabel, MvFieldError},
+  components: {AutoComplete, FloatLabel, MvFieldError, MvRequiredMarker},
 
   inheritAttrs: false,
 
@@ -70,7 +75,8 @@ export default defineComponent({
     },
     suggestions: {type: Array as PropType<unknown[]>, default: () => []},
     typeahead: {type: Boolean, default: false},
-    hint: {type: String, default: null}
+    hint: {type: String, default: null},
+    required: {type: Boolean, default: false}
   },
 
   emits: ['update:modelValue', 'blur', 'complete', 'escape', 'option-select'],

src/components/forms/MvUploadField.vue

@@ -1,8 +1,9 @@
 <template>
   <div :class="error ? 'mv-field-error' : 'field'">
-    <label v-if="showLabel" class="mb-1 block font-semibold text-xs text-text-secondary" :for="fieldId">{{
-      label
-    }}</label>
+    <label v-if="showLabel" class="mb-1 block font-semibold text-xs text-text-secondary" :for="fieldId">
+      {{ label }}
+      <MvRequiredMarker v-if="required" />
+    </label>
     <FileUpload
       :id="fieldId"
       ref="fileUploadRef"
@@ -37,12 +38,13 @@
 import {defineComponent, type PropType} from 'vue'
 import FileUpload from 'primevue/fileupload'
 import MvFieldError from '@/components/forms/MvFieldError.vue'
+import MvRequiredMarker from '@/components/forms/MvRequiredMarker.vue'
 import {useFieldId} from '@/composables/scoped-id'
 
 export default defineComponent({
   name: 'MvUploadField',
 
-  components: {FileUpload, MvFieldError},
+  components: {FileUpload, MvFieldError, MvRequiredMarker},
 
   inheritAttrs: false,
 
@@ -52,7 +54,8 @@ export default defineComponent({
     error: {type: String as PropType<string | null>, default: null},
     id: {type: String as PropType<string | null>, default: null},
     emptyText: {type: String, default: 'Drop a file here'},
-    showLabel: {type: Boolean, default: true}
+    showLabel: {type: Boolean, default: true},
+    required: {type: Boolean, default: false}
   },
 
   emits: ['select', 'remove'],

src/components/forms/ScoreSetContextFields.vue

@@ -39,7 +39,7 @@
           <p v-if="desc.supersededScoreSet.detail" class="wizard-help-detail">{{ desc.supersededScoreSet.detail }}</p>
         </div>
         <div :class="wizardMode && 'wizard-field'">
-          <MvFloatField :error="validationErrors.supersededScoreSetUrn" label="Supersedes">
+          <MvFloatField :error="validationErrors.supersededScoreSetUrn" label="Supersedes" required>
             <template #default="{id, invalid}">
               <AutoComplete
                 :id="id"
@@ -99,6 +99,7 @@
             :loading="metaAnalyzesLoading"
             :model-value="metaAnalyzesScoreSets"
             option-label="title"
+            required
             :suggestions="metaAnalyzesSuggestions"
             :typeahead="true"
             @complete="$emit('search-meta-analyzes', $event)"
@@ -121,7 +122,7 @@
           <div v-if="desc.experiment.detail" class="wizard-help-detail" v-html="desc.experiment.detail" />
         </div>
         <div :class="wizardMode && 'wizard-field'">
-          <MvFloatField :error="validationErrors.experiment" label="Experiment">
+          <MvFloatField :error="validationErrors.experiment" label="Experiment" required>
             <template #default="{id, invalid}">
               <PSelect
                 :id="id"

src/components/forms/ScoreSetFields.vue

@@ -8,7 +8,12 @@
         <p v-if="desc.title.detail" class="wizard-help-detail" v-html="desc.title.detail" />
       </div>
       <div :class="wizardMode && 'wizard-field'">
-        <MvFloatField :error="validationErrors.title" :hint="wizardMode ? undefined : desc.title.hint" label="Title">
+        <MvFloatField
+          :error="validationErrors.title"
+          :hint="wizardMode ? undefined : desc.title.hint"
+          label="Title"
+          required
+        >
           <template #default="{id, invalid}">
             <PInputText
               :id="id"
@@ -35,6 +40,7 @@
           :error="validationErrors.shortDescription"
           :hint="wizardMode ? undefined : desc.shortDescription.hint"
           label="Short description"
+          required
         >
           <template #default="{id, invalid}">
             <PTextarea
@@ -64,6 +70,7 @@
           :hint="wizardMode ? undefined : desc.abstractText.hint"
           label="Abstract"
           :model-value="abstractText"
+          required
           :rows="wizardMode ? 10 : 4"
           @update:model-value="$emit('update:abstractText', $event)"
         />
@@ -89,6 +96,7 @@
           :hint="wizardMode ? undefined : desc.methodText.hint"
           label="Methods"
           :model-value="methodText"
+          required
           :rows="wizardMode ? 10 : 4"
           @update:model-value="$emit('update:methodText', $event)"
         />
@@ -107,6 +115,7 @@
           :error="validationErrors.licenseId"
           :hint="wizardMode ? undefined : desc.license.hint"
           label="License"
+          required
         >
           <template #default="{id, invalid}">
             <PSelect

src/components/forms/TargetFields.vue

@@ -52,6 +52,7 @@
         <MvFloatField
           :error="fieldError('name')"
           label="Target name"
+          required
           @update:model-value="$emit('update:name', $event)"
         >
           <template #default="{id, invalid}">
@@ -95,7 +96,7 @@
     <!-- Target category -->
     <div :class="wizardMode && 'wizard-row'">
       <div v-if="wizardMode" class="wizard-help">
-        <label>{{ desc.category.help }}</label>
+        <label>{{ desc.category.help }} <MvRequiredMarker /></label>
       </div>
       <div :class="wizardMode && 'wizard-field'">
         <div class="field">
@@ -201,7 +202,7 @@
           <p v-if="desc.taxonomy.detail" class="wizard-help-detail">{{ desc.taxonomy.detail }}</p>
         </div>
         <div :class="wizardMode && 'wizard-field'">
-          <MvFloatField :error="fieldError('targetSequence.taxonomy')" label="Taxonomy">
+          <MvFloatField :error="fieldError('targetSequence.taxonomy')" label="Taxonomy" required>
             <template #default="{id, invalid}">
               <AutoComplete
                 :id="id"
@@ -231,7 +232,7 @@
       <!-- Sequence type -->
       <div :class="wizardMode && 'wizard-row'">
         <div v-if="wizardMode" class="wizard-help">
-          <label>{{ desc.sequenceType.help }}</label>
+          <label>{{ desc.sequenceType.help }} <MvRequiredMarker /></label>
         </div>
         <div :class="wizardMode && 'wizard-field'">
           <div class="field">
@@ -249,7 +250,7 @@
       <!-- Target sequence (FASTA upload / textarea display) -->
       <div :class="wizardMode && 'wizard-row'">
         <div v-if="wizardMode" class="wizard-help">
-          <label>{{ desc.referenceSequence.help }}</label>
+          <label>{{ desc.referenceSequence.help }} <MvRequiredMarker /></label>
         </div>
         <div :class="wizardMode && 'wizard-field'">
           <div class="field">
@@ -269,6 +270,7 @@
               empty-text="Drop a FASTA file here"
               :error="fieldError('targetSequence.sequence')"
               label="Reference sequence"
+              required
               :show-label="!wizardMode"
               @remove="$emit('file-cleared')"
               @select="$emit('file-selected', $event)"
@@ -305,7 +307,7 @@
           <label>{{ desc.assembly.help }}</label>
         </div>
         <div :class="wizardMode && 'wizard-field'">
-          <MvFloatField :error="fieldError('targetAccession.assembly')" label="Assembly">
+          <MvFloatField :error="fieldError('targetAccession.assembly')" label="Assembly" required>
             <template #default="{id, invalid}">
               <PSelect
                 :id="id"
@@ -326,7 +328,7 @@
           <label>{{ desc.geneName.help }}</label>
         </div>
         <div :class="wizardMode && 'wizard-field'">
-          <MvFloatField :error="fieldError('targetAccession.gene')" label="Gene name">
+          <MvFloatField :error="fieldError('targetAccession.gene')" label="Gene name" required>
             <template #default="{id, invalid}">
               <PSelect
                 :id="id"
@@ -350,7 +352,11 @@
           <label>{{ desc.accession.help }}</label>
         </div>
         <div :class="wizardMode && 'wizard-field'">
-          <MvFloatField :error="fieldError('targetAccession.accession')" label="Accession/Transcript Identifier">
+          <MvFloatField
+            :error="fieldError('targetAccession.accession')"
+            label="Accession/Transcript Identifier"
+            required
+          >
             <template #default="{id, invalid}">
               <AutoComplete
                 :id="id"
@@ -399,6 +405,7 @@ import ToggleSwitch from 'primevue/toggleswitch'
 
 import MvFieldError from '@/components/forms/MvFieldError.vue'
 import MvFloatField from '@/components/forms/MvFloatField.vue'
+import MvRequiredMarker from '@/components/forms/MvRequiredMarker.vue'
 import MvUploadField from '@/components/forms/MvUploadField.vue'
 import type {GeneNameOption} from '@/composables/use-target-gene'
 import {targetDescriptions} from '@/data/field-descriptions'
@@ -427,6 +434,7 @@ export default defineComponent({
     InputNumber,
     MvFieldError,
     MvFloatField,
+    MvRequiredMarker,
     MvUploadField,
     PInputText: InputText,
     PSelect: Select,