feat: asterisk mandatory fields

[sanjaytkbabu]

Description

PADS-826

Marked mandatory fields in forms with asterisks

Types of changes

Checklist

• I have read the CONTRIBUTING doc
• I have checked that unit tests pass locally with my changes
• I have added tests that prove my fix is effective or that my feature works
• I have added necessary documentation (if appropriate)

Further comments

[github-actions]

Coverage Report (Application)

Totals
Statements:	86.04% ( 4653 / 5408 )
Methods:	83.62% ( 592 / 708 )
Lines:	90.56% ( 3195 / 3528 )
Branches:	73.89% ( 866 / 1172 )

[github-actions]

Coverage Report (Frontend)

Totals
Statements:	51.85% ( 6285 / 12122 )
Methods:	40.74% ( 867 / 2128 )
Lines:	60.85% ( 3863 / 6348 )
Branches:	42.65% ( 1555 / 3646 )

[Copilot]

Pull request overview

Adds visual required-field indicators (red asterisks) across multiple intake and authorization forms by introducing/propagating a required prop through shared form components and updating section/card headers.

Changes:

• Added a required prop to shared form inputs (InputText/Select/InputMask/TextArea/AutoComplete) to render a required asterisk.
• Marked specific fields as required in various forms/panels/cards by setting :required="true" or adding header-level asterisks.
• Updated select/input internals and several card/panel headers to display the required indicator.

Reviewed changes

Copilot reviewed 30 out of 30 changed files in this pull request and generated 9 comments.

Show a summary per file

File	Description
frontend/src/components/projectCommon/ProjectTeamAddModal.vue	Marks key contact fields as required in the add-team-member modal.
frontend/src/components/note/NoteForm.vue	Marks note title required; adds required indicator for the note body header.
frontend/src/components/form/TextArea.vue	Adds required prop and renders asterisk in the label.
frontend/src/components/form/Select.vue	Adds required prop and forwards it to the non-float-label internal select.
frontend/src/components/form/section/SubmissionStateSection.vue	Marks region/area/queue priority selects as required.
frontend/src/components/form/panel/ResidentialUnitsPanel.vue	Marks rental-included select as required.
frontend/src/components/form/panel/ProjectDescriptionPanel.vue	Adds a required asterisk to the “Additional Info” panel header.
frontend/src/components/form/panel/FinanciallySupportedPanel.vue	Adds required indicators for select groups and BC Housing selection.
frontend/src/components/form/panel/ElectrificationPanel.vue	Marks project type select as required.
frontend/src/components/form/panel/CompanyProjectNamePanel.vue	Marks project name and registered-business autocomplete as required.
frontend/src/components/form/internal/SelectInternal.vue	Adds required prop and asterisk rendering for non-floating labels.
frontend/src/components/form/internal/InputTextInternal.vue	Adds required prop and asterisk rendering in the label.
frontend/src/components/form/internal/InputMaskInternal.vue	Adds required prop and asterisk rendering in the label.
frontend/src/components/form/InputText.vue	Adds required prop and forwards it to the non-float-label internal input.
frontend/src/components/form/InputMask.vue	Adds required prop and forwards it to the non-float-label internal mask input.
frontend/src/components/form/common/TextAreaCard.vue	Adds required prop and renders asterisk in the card header.
frontend/src/components/form/common/ResidentialUnitsCard.vue	Adds required asterisk to the card title.
frontend/src/components/form/common/RentalUnitsCard.vue	Adds required asterisk to the card title.
frontend/src/components/form/common/RegisteredBusinessCard.vue	Adds required asterisk to the card title.
frontend/src/components/form/common/ProjectNameCard.vue	Marks project name input as required.
frontend/src/components/form/common/ProjectDescriptionCard.vue	Marks project description text area as required.
frontend/src/components/form/common/NaturalDisasterCard.vue	Adds required asterisk to the card title.
frontend/src/components/form/common/LocationCard.vue	Adds required asterisk to the card title.
frontend/src/components/form/common/FinanciallySupportedCard.vue	Adds required asterisks to legends/labels for financially-supported groups.
frontend/src/components/form/common/ContactCardIntakeForm.vue	Marks core contact fields/selects as required.
frontend/src/components/form/common/AppliedPermitsCard.vue	Adds required asterisk to the card title.
frontend/src/components/form/AutoComplete.vue	Adds required prop and renders asterisk in the label.
frontend/src/components/enquiry/EnquiryIntakeForm.vue	Marks enquiry description card as required.
frontend/src/components/authorization/AuthorizationStatusUpdatesCard.vue	Marks “Permit needed” select as required.
frontend/src/components/authorization/AuthorizationCardIntake.vue	Marks authorization selection as required.

Comments suppressed due to low confidence (2)

frontend/src/components/form/internal/InputMaskInternal.vue:62

• The new required prop currently only adds a visual asterisk; the underlying control isn’t marked as required for assistive tech. Consider adding aria-required (and only add the native required attribute if you want browser validation) on the PrimeVue InputMask when required is true.

  <InputMask
    v-model="normalizedValue"
    :aria-describedby="`${name}-help`"
    :aria-labelledby="`${name}-label`"
    :name="name"
    :mask="mask"
    :placeholder="placeholder"
    class="w-full"
    :class="{ 'p-invalid': errorMessage }"
    :disabled="disabled"
    @blur="handleBlur"

frontend/src/components/form/AutoComplete.vue:83

• The new required prop currently only adds a visual asterisk; the underlying autocomplete input isn’t marked as required for assistive tech. Consider wiring aria-required through to the rendered input (e.g., via component attrs / input props) when required is true.

  <div>
    <label
      :id="`${name}-label`"
      :class="{ 'font-bold': bold }"
      :for="name"
    >
      {{ label }}
      <span
        v-if="required"
        class="text-[var(--p-red-400)]"
      >
        *
      </span>
    </label>
    <AutoComplete
      v-model="value"
      append-to="body"
      :aria-describedby="`${name}-help`"
      :aria-labelledby="`${name}-label`"
      class="w-full"
      :invalid="!!errorMessage"
      :delay="delay"
      :disabled="disabled"
      :editable="editable"
      :force-selection="forceSelection"
      input-class="w-full"
      :loading="loading"
      :name="name"
      :option-label="getOptionLabel"
      :placeholder="placeholder"
      :suggestions="suggestions"
      @blur="handleBlur"

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[sanjaytkbabu]

This will be addressed in the accessibility ticket.

[slhurley]

• In Electric, the Project Type field asterisk was missed on the intake form
• In General (and the others), I think Location should be mandatory
• In Housing, the fields that become mandatory after you select Yes should probably be highlighted (registered in bc, # of units, location details and permit details)
• In Housing, if you say Yes to the financially supported but then don't fill in the other field that goes with it you just get a 422 instead of the red validation indicator
• I think we should mark Last Name as mandatory even if you have it optional in the database as this was just a BCeID workaround
• Bring Forward Date is missing the asterisk on the Notes tab when it is a BF
• The Contact fill in form is missing the asterisks (first thing you get when you first log in) and also the Update Contact screen

[minchang00]

Proponent

• Can't upload files on proponent's side in Housing

Navigator

• "Add note" from Required Enquiries doesn't work. Takes page to "Not Found"
• Enquiry detail form Electrification is missing asteriks
• From "Add user(s)" modal, is the "Last name" suppose to miss an asteriks?

[sanjaytkbabu]

Proponent

• Can't upload files on proponent's side in Housing
  Addressed in a separate ticket

Navigator

• "Add note" from Required Enquiries doesn't work. Takes page to "Not Found"

Addressed in a separate ticket

• Enquiry detail form Electrification is missing asteriks

fixed!

• From "Add user(s)" modal, is the "Last name" suppose to miss an asteriks?

done!

[sanjaytkbabu]

• In Electric, the Project Type field asterisk was missed on the intake form

done!

• In General (and the others), I think Location should be mandatory

done!

• In Housing, the fields that become mandatory after you select Yes should probably be highlighted (registered in bc, # of units, location details and permit details)

done!

• In Housing, if you say Yes to the financially supported but then don't fill in the other field that goes with it you just get a 422 instead of the red validation indicator

fixed!

• I think we should mark Last Name as mandatory even if you have it optional in the database as this was just a BCeID workaround

done!

• Bring Forward Date is missing the asterisk on the Notes tab when it is a BF

done!

• The Contact fill in form is missing the asterisks (first thing you get when you first log in) and also the Update Contact screen

done!

[kyle1morel]

I think we should add a support class to the theme instead of placing --p-red-400 everywhere.

[sonarqubecloud]

Quality Gate passed for 'nr-permitconnect-navigator-service app'

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[sonarqubecloud]

Quality Gate failed for 'nr-permitconnect-navigator-service frontend'

Failed conditions
49.2% Coverage on New Code (required ≥ 80%)
3.7% Duplication on New Code (required ≤ 3%)

See analysis details on SonarQube Cloud