From 5ed29de348d59fc82c6d65d3440d4dc0dd32e96c Mon Sep 17 00:00:00 2001
From: Tim Bradgate <timbradgate@hotmail.co.uk>
Date: Fri, 30 Jan 2026 12:44:28 +0000
Subject: [PATCH 1/2] Fix duplicate HTML IDs across Vue modal components

Resolves SonarQube reliability issues by ensuring unique HTML IDs in
components with both 'add' and 'edit' modals. Each form element now uses
context-specific prefixes (new-/edit-) to prevent accessibility issues
and JavaScript selector conflicts.

Also adds explanatory comment to intentionally empty catch block in
ServerSelector.vue URL validator.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 client/src/views/electron/ServerSelector.vue  |   1 +
 client/src/views/show/config/ConfigCast.vue   |  56 +++++---
 .../views/show/config/ConfigCharacters.vue    |  50 +++++---
 client/src/views/show/config/ConfigCues.vue   |  64 +++++-----
 .../config/acts_and_scenes/ConfigActs.vue     |  58 +++++----
 .../config/acts_and_scenes/ConfigScenes.vue   |  54 ++++----
 .../config/characters/CharacterGroups.vue     |  56 ++++----
 .../show/config/cues/ScriptLineCueEditor.vue  |  36 +++---
 .../show/config/mics/MicList.vue              |  44 +++----
 .../config/script/StageDirectionStyles.vue    | 100 ++++++++-------
 .../show/config/stage/CrewList.vue            |  56 +++++---
 .../show/config/stage/PropsList.vue           | 120 ++++++++++--------
 .../user/settings/CueColourPreferences.vue    |  24 ++--
 .../user/settings/StageDirectionStyles.vue    |  76 ++++++-----
 14 files changed, 443 insertions(+), 352 deletions(-)

diff --git a/client/src/views/electron/ServerSelector.vue b/client/src/views/electron/ServerSelector.vue
index cc3cb033..9ba8eb00 100644
--- a/client/src/views/electron/ServerSelector.vue
+++ b/client/src/views/electron/ServerSelector.vue
@@ -350,6 +350,7 @@ const validUrl = (value) => {
     const url = new URL(value.startsWith('http') ? value : `http://${value}`);
     return url.protocol === 'http:' || url.protocol === 'https:';
   } catch {
+    // Invalid URL syntax - return false for validation
     return false;
   }
 };
diff --git a/client/src/views/show/config/ConfigCast.vue b/client/src/views/show/config/ConfigCast.vue
index 5a274225..39b0e7f7 100644
--- a/client/src/views/show/config/ConfigCast.vue
+++ b/client/src/views/show/config/ConfigCast.vue
@@ -62,27 +62,35 @@
       @ok="onSubmitNew"
     >
       <b-form ref="new-cast-form" @submit.stop.prevent="onSubmitNew">
-        <b-form-group id="first-name-input-group" label="First Name" label-for="first-name-input">
+        <b-form-group
+          id="new-first-name-input-group"
+          label="First Name"
+          label-for="new-first-name-input"
+        >
           <b-form-input
-            id="first-name-input"
+            id="new-first-name-input"
             v-model="$v.newFormState.firstName.$model"
-            name="first-name-input"
+            name="new-first-name-input"
             :state="validateNewState('firstName')"
-            aria-describedby="name-feedback"
+            aria-describedby="new-first-name-feedback"
           />
-          <b-form-invalid-feedback id="first-name-feedback">
+          <b-form-invalid-feedback id="new-first-name-feedback">
             This is a required field.
           </b-form-invalid-feedback>
         </b-form-group>
-        <b-form-group id="last-name-input-group" label="Last Name" label-for="last-name-input">
+        <b-form-group
+          id="new-last-name-input-group"
+          label="Last Name"
+          label-for="new-last-name-input"
+        >
           <b-form-input
-            id="last-name-input"
+            id="new-last-name-input"
             v-model="$v.newFormState.lastName.$model"
-            name="last-name-input"
+            name="new-last-name-input"
             :state="validateNewState('lastName')"
-            aria-describedby="name-feedback"
+            aria-describedby="new-last-name-feedback"
           />
-          <b-form-invalid-feedback id="last-name-feedback">
+          <b-form-invalid-feedback id="new-last-name-feedback">
             This is a required field.
           </b-form-invalid-feedback>
         </b-form-group>
@@ -98,27 +106,35 @@
       @ok="onSubmitEdit"
     >
       <b-form ref="edit-cast-form" @submit.stop.prevent="onSubmitEdit">
-        <b-form-group id="first-name-input-group" label="First Name" label-for="first-name-input">
+        <b-form-group
+          id="edit-first-name-input-group"
+          label="First Name"
+          label-for="edit-first-name-input"
+        >
           <b-form-input
-            id="first-name-input"
+            id="edit-first-name-input"
             v-model="$v.editFormState.firstName.$model"
-            name="first-name-input"
+            name="edit-first-name-input"
             :state="validateEditState('firstName')"
-            aria-describedby="name-feedback"
+            aria-describedby="edit-first-name-feedback"
           />
-          <b-form-invalid-feedback id="first-name-feedback">
+          <b-form-invalid-feedback id="edit-first-name-feedback">
             This is a required field.
           </b-form-invalid-feedback>
         </b-form-group>
-        <b-form-group id="last-name-input-group" label="Last Name" label-for="last-name-input">
+        <b-form-group
+          id="edit-last-name-input-group"
+          label="Last Name"
+          label-for="edit-last-name-input"
+        >
           <b-form-input
-            id="last-name-input"
+            id="edit-last-name-input"
             v-model="$v.editFormState.lastName.$model"
-            name="last-name-input"
+            name="edit-last-name-input"
             :state="validateEditState('lastName')"
-            aria-describedby="name-feedback"
+            aria-describedby="edit-last-name-feedback"
           />
-          <b-form-invalid-feedback id="last-name-feedback">
+          <b-form-invalid-feedback id="edit-last-name-feedback">
             This is a required field.
           </b-form-invalid-feedback>
         </b-form-group>
diff --git a/client/src/views/show/config/ConfigCharacters.vue b/client/src/views/show/config/ConfigCharacters.vue
index 74dd670c..ffe45695 100644
--- a/client/src/views/show/config/ConfigCharacters.vue
+++ b/client/src/views/show/config/ConfigCharacters.vue
@@ -73,32 +73,37 @@
       @ok="onSubmitNew"
     >
       <b-form ref="new-character-form" @submit.stop.prevent="onSubmitNew">
-        <b-form-group id="name-input-group" label="Name" label-for="name-input">
+        <b-form-group id="new-name-input-group" label="Name" label-for="new-name-input">
           <b-form-input
-            id="name-input"
+            id="new-name-input"
             v-model="$v.newFormState.name.$model"
-            name="name-input"
+            name="new-name-input"
             :state="validateNewState('name')"
-            aria-describedby="name-feedback"
+            aria-describedby="new-name-feedback"
           />
-          <b-form-invalid-feedback id="name-feedback">
+          <b-form-invalid-feedback id="new-name-feedback">
             This is a required field.
           </b-form-invalid-feedback>
         </b-form-group>
         <b-form-group
-          id="description-input-group"
+          id="new-description-input-group"
           label="Description"
-          label-for="description-input"
+          label-for="new-description-input"
         >
           <b-form-input
-            id="description-input"
+            id="new-description-input"
             v-model="$v.newFormState.description.$model"
-            name="description-input"
+            name="new-description-input"
             :state="validateNewState('description')"
           />
         </b-form-group>
-        <b-form-group id="played-by-input-group" label="Played By" label-for="played-by-input">
+        <b-form-group
+          id="new-played-by-input-group"
+          label="Played By"
+          label-for="new-played-by-input"
+        >
           <b-form-select
+            id="new-played-by-input"
             v-model="$v.newFormState.played_by.$model"
             :options="castOptions"
             :state="validateNewState('played_by')"
@@ -116,32 +121,37 @@
       @ok="onSubmitEdit"
     >
       <b-form ref="edit-character-form" @submit.stop.prevent="onSubmitEdit">
-        <b-form-group id="name-input-group" label="Name" label-for="name-input">
+        <b-form-group id="edit-name-input-group" label="Name" label-for="edit-name-input">
           <b-form-input
-            id="name-input"
+            id="edit-name-input"
             v-model="$v.editFormState.name.$model"
-            name="name-input"
+            name="edit-name-input"
             :state="validateEditState('name')"
-            aria-describedby="name-feedback"
+            aria-describedby="edit-name-feedback"
           />
-          <b-form-invalid-feedback id="name-feedback">
+          <b-form-invalid-feedback id="edit-name-feedback">
             This is a required field.
           </b-form-invalid-feedback>
         </b-form-group>
         <b-form-group
-          id="description-input-group"
+          id="edit-description-input-group"
           label="Description"
-          label-for="description-input"
+          label-for="edit-description-input"
         >
           <b-form-input
-            id="description-input"
+            id="edit-description-input"
             v-model="$v.editFormState.description.$model"
-            name="description-input"
+            name="edit-description-input"
             :state="validateEditState('description')"
           />
         </b-form-group>
-        <b-form-group id="played-by-input-group" label="Played By" label-for="played-by-input">
+        <b-form-group
+          id="edit-played-by-input-group"
+          label="Played By"
+          label-for="edit-played-by-input"
+        >
           <b-form-select
+            id="edit-played-by-input"
             v-model="$v.editFormState.played_by.$model"
             :options="castOptions"
             :state="validateEditState('played_by')"
diff --git a/client/src/views/show/config/ConfigCues.vue b/client/src/views/show/config/ConfigCues.vue
index 5ab4fe39..18952285 100644
--- a/client/src/views/show/config/ConfigCues.vue
+++ b/client/src/views/show/config/ConfigCues.vue
@@ -70,44 +70,44 @@
       @ok="onSubmitNewCueType"
     >
       <b-form ref="new-cue-type-form" @submit.stop.prevent="onSubmitNewCueType">
-        <b-form-group id="prefix-input-group" label="Prefix" label-for="prefix-input">
+        <b-form-group id="new-prefix-input-group" label="Prefix" label-for="new-prefix-input">
           <b-form-input
-            id="prefix-input"
+            id="new-prefix-input"
             v-model="$v.newCueTypeForm.prefix.$model"
-            name="prefix-input"
+            name="new-prefix-input"
             :state="validateNewCueTypeState('prefix')"
-            aria-describedby="prefix-feedback"
+            aria-describedby="new-prefix-feedback"
           />
-          <b-form-invalid-feedback id="prefix-feedback">
+          <b-form-invalid-feedback id="new-prefix-feedback">
             This is a required field and must be 5 characters or less.
           </b-form-invalid-feedback>
         </b-form-group>
         <b-form-group
-          id="description-input-group"
+          id="new-description-input-group"
           label="Description"
-          label-for="description-input"
+          label-for="new-description-input"
         >
           <b-form-input
-            id="description-input"
+            id="new-description-input"
             v-model="$v.newCueTypeForm.description.$model"
-            name="description-input"
+            name="new-description-input"
             :state="validateNewCueTypeState('description')"
-            aria-describedby="description-feedback"
+            aria-describedby="new-description-feedback"
           />
-          <b-form-invalid-feedback id="description-feedback">
+          <b-form-invalid-feedback id="new-description-feedback">
             This is a required field and must be 100 characters or less.
           </b-form-invalid-feedback>
         </b-form-group>
-        <b-form-group id="colour-input-group" label="Colour" label-for="colour-input">
+        <b-form-group id="new-colour-input-group" label="Colour" label-for="new-colour-input">
           <b-form-input
-            id="colour-input"
+            id="new-colour-input"
             v-model="$v.newCueTypeForm.colour.$model"
-            name="colour-input"
+            name="new-colour-input"
             type="color"
             :state="validateNewCueTypeState('colour')"
-            aria-describedby="colour-feedback"
+            aria-describedby="new-colour-feedback"
           />
-          <b-form-invalid-feedback id="colour-feedback">
+          <b-form-invalid-feedback id="new-colour-feedback">
             This is a required field.
           </b-form-invalid-feedback>
         </b-form-group>
@@ -123,44 +123,44 @@
       @ok="onSubmitEditCueType"
     >
       <b-form ref="edit-cue-type-form" @submit.stop.prevent="onSubmitEditCueType">
-        <b-form-group id="prefix-input-group" label="Prefix" label-for="prefix-input">
+        <b-form-group id="edit-prefix-input-group" label="Prefix" label-for="edit-prefix-input">
           <b-form-input
-            id="prefix-input"
+            id="edit-prefix-input"
             v-model="$v.editCueTypeFormState.prefix.$model"
-            name="prefix-input"
+            name="edit-prefix-input"
             :state="validateEditCueTypeState('prefix')"
-            aria-describedby="prefix-feedback"
+            aria-describedby="edit-prefix-feedback"
           />
-          <b-form-invalid-feedback id="prefix-feedback">
+          <b-form-invalid-feedback id="edit-prefix-feedback">
             This is a required field and must be 5 characters or less.
           </b-form-invalid-feedback>
         </b-form-group>
         <b-form-group
-          id="description-input-group"
+          id="edit-description-input-group"
           label="Description"
-          label-for="description-input"
+          label-for="edit-description-input"
         >
           <b-form-input
-            id="description-input"
+            id="edit-description-input"
             v-model="$v.editCueTypeFormState.description.$model"
-            name="description-input"
+            name="edit-description-input"
             :state="validateEditCueTypeState('description')"
-            aria-describedby="description-feedback"
+            aria-describedby="edit-description-feedback"
           />
-          <b-form-invalid-feedback id="description-feedback">
+          <b-form-invalid-feedback id="edit-description-feedback">
             This is a required field and must be 100 characters or less.
           </b-form-invalid-feedback>
         </b-form-group>
-        <b-form-group id="colour-input-group" label="Colour" label-for="colour-input">
+        <b-form-group id="edit-colour-input-group" label="Colour" label-for="edit-colour-input">
           <b-form-input
-            id="colour-input"
+            id="edit-colour-input"
             v-model="$v.editCueTypeFormState.colour.$model"
-            name="colour-input"
+            name="edit-colour-input"
             type="color"
             :state="validateEditCueTypeState('colour')"
-            aria-describedby="colour-feedback"
+            aria-describedby="edit-colour-feedback"
           />
-          <b-form-invalid-feedback id="colour-feedback">
+          <b-form-invalid-feedback id="edit-colour-feedback">
             This is a required field.
           </b-form-invalid-feedback>
         </b-form-group>
diff --git a/client/src/vue_components/show/config/acts_and_scenes/ConfigActs.vue b/client/src/vue_components/show/config/acts_and_scenes/ConfigActs.vue
index 37af19e6..e1487819 100644
--- a/client/src/vue_components/show/config/acts_and_scenes/ConfigActs.vue
+++ b/client/src/vue_components/show/config/acts_and_scenes/ConfigActs.vue
@@ -67,35 +67,39 @@
       @ok="onSubmitNew"
     >
       <b-form ref="new-act-form" @submit.stop.prevent="onSubmitNew">
-        <b-form-group id="name-input-group" label="Name" label-for="name-input">
+        <b-form-group id="new-name-input-group" label="Name" label-for="new-name-input">
           <b-form-input
-            id="name-input"
+            id="new-name-input"
             v-model="$v.newFormState.name.$model"
-            name="name-input"
+            name="new-name-input"
             :state="validateNewState('name')"
-            aria-describedby="name-feedback"
+            aria-describedby="new-name-feedback"
           />
-          <b-form-invalid-feedback id="name-feedback">
+          <b-form-invalid-feedback id="new-name-feedback">
             This is a required field.
           </b-form-invalid-feedback>
         </b-form-group>
-        <b-form-group id="interval-input-group" label="Interval After" label-for="interval-input">
+        <b-form-group
+          id="new-interval-input-group"
+          label="Interval After"
+          label-for="new-interval-input"
+        >
           <b-form-checkbox
-            id="interval-input"
+            id="new-interval-input"
             v-model="newFormState.interval_after"
-            name="interval-input"
+            name="new-interval-input"
           />
         </b-form-group>
         <b-form-group
-          id="previous-act-input-group"
+          id="new-previous-act-input-group"
           label="Previous Act"
-          label-for="previous-act-input"
+          label-for="new-previous-act-input"
         >
           <b-form-select
-            id="previous-act-input"
+            id="new-previous-act-input"
             v-model="newFormState.previous_act_id"
             :options="previousActOptions"
-            aria-describedby="previous-act-feedback"
+            aria-describedby="new-previous-act-feedback"
           />
         </b-form-group>
       </b-form>
@@ -110,38 +114,42 @@
       @ok="onSubmitEdit"
     >
       <b-form ref="edit-act-form" @submit.stop.prevent="onSubmitEdit">
-        <b-form-group id="name-input-group" label="Name" label-for="name-input">
+        <b-form-group id="edit-name-input-group" label="Name" label-for="edit-name-input">
           <b-form-input
-            id="name-input"
+            id="edit-name-input"
             v-model="$v.editFormState.name.$model"
-            name="name-input"
+            name="edit-name-input"
             :state="validateEditState('name')"
-            aria-describedby="name-feedback"
+            aria-describedby="edit-name-feedback"
           />
-          <b-form-invalid-feedback id="name-feedback">
+          <b-form-invalid-feedback id="edit-name-feedback">
             This is a required field.
           </b-form-invalid-feedback>
         </b-form-group>
-        <b-form-group id="interval-input-group" label="Interval After" label-for="interval-input">
+        <b-form-group
+          id="edit-interval-input-group"
+          label="Interval After"
+          label-for="edit-interval-input"
+        >
           <b-form-checkbox
-            id="interval-input"
+            id="edit-interval-input"
             v-model="editFormState.interval_after"
-            name="interval-input"
+            name="edit-interval-input"
           />
         </b-form-group>
         <b-form-group
-          id="previous-act-input-group"
+          id="edit-previous-act-input-group"
           label="Previous Act"
-          label-for="previous-act-input"
+          label-for="edit-previous-act-input"
         >
           <b-form-select
-            id="previous-act-input"
+            id="edit-previous-act-input"
             v-model="$v.editFormState.previous_act_id.$model"
             :options="editFormActOptions"
             :state="validateEditState('previous_act_id')"
-            aria-describedby="previous-act-feedback"
+            aria-describedby="edit-previous-act-feedback"
           />
-          <b-form-invalid-feedback id="previous-act-feedback">
+          <b-form-invalid-feedback id="edit-previous-act-feedback">
             This cannot form a circular dependency between acts.
           </b-form-invalid-feedback>
         </b-form-group>
diff --git a/client/src/vue_components/show/config/acts_and_scenes/ConfigScenes.vue b/client/src/vue_components/show/config/acts_and_scenes/ConfigScenes.vue
index 568e12f9..78d1cc18 100644
--- a/client/src/vue_components/show/config/acts_and_scenes/ConfigScenes.vue
+++ b/client/src/vue_components/show/config/acts_and_scenes/ConfigScenes.vue
@@ -91,40 +91,40 @@
       @ok="onSubmitNew"
     >
       <b-form ref="new-scene-form" @submit.stop.prevent="onSubmitNew">
-        <b-form-group id="name-input-group" label="Name" label-for="name-input">
+        <b-form-group id="new-name-input-group" label="Name" label-for="new-name-input">
           <b-form-input
-            id="name-input"
+            id="new-name-input"
             v-model="$v.newFormState.name.$model"
-            name="name-input"
+            name="new-name-input"
             :state="validateNewState('name')"
-            aria-describedby="name-feedback"
+            aria-describedby="new-name-feedback"
           />
-          <b-form-invalid-feedback id="name-feedback">
+          <b-form-invalid-feedback id="new-name-feedback">
             This is a required field.
           </b-form-invalid-feedback>
         </b-form-group>
-        <b-form-group id="act-input-group" label="Act" label-for="act-input">
+        <b-form-group id="new-act-input-group" label="Act" label-for="new-act-input">
           <b-form-select
-            id="act-input"
+            id="new-act-input"
             v-model="$v.newFormState.act_id.$model"
             :options="actOptions"
             :state="validateNewState('act_id')"
-            aria-describedby="act-feedback"
+            aria-describedby="new-act-feedback"
           />
-          <b-form-invalid-feedback id="act-feedback">
+          <b-form-invalid-feedback id="new-act-feedback">
             This is a required field.
           </b-form-invalid-feedback>
         </b-form-group>
         <b-form-group
-          id="previous-scene-input-group"
+          id="new-previous-scene-input-group"
           label="Previous Scene"
-          label-for="previous-scene-input"
+          label-for="new-previous-scene-input"
         >
           <b-form-select
-            id="previous-scene-input"
+            id="new-previous-scene-input"
             v-model="$v.newFormState.previous_scene_id.$model"
             :options="previousSceneOptions[$v.newFormState.act_id.$model]"
-            aria-describedby="previous-scene-feedback"
+            aria-describedby="new-previous-scene-feedback"
           />
         </b-form-group>
       </b-form>
@@ -139,44 +139,44 @@
       @ok="onSubmitEdit"
     >
       <b-form ref="edit-act-form" @submit.stop.prevent="onSubmitEdit">
-        <b-form-group id="name-input-group" label="Name" label-for="name-input">
+        <b-form-group id="edit-name-input-group" label="Name" label-for="edit-name-input">
           <b-form-input
-            id="name-input"
+            id="edit-name-input"
             v-model="$v.editFormState.name.$model"
-            name="name-input"
+            name="edit-name-input"
             :state="validateEditState('name')"
-            aria-describedby="name-feedback"
+            aria-describedby="edit-name-feedback"
           />
-          <b-form-invalid-feedback id="name-feedback">
+          <b-form-invalid-feedback id="edit-name-feedback">
             This is a required field.
           </b-form-invalid-feedback>
         </b-form-group>
-        <b-form-group id="act-input-group" label="Act" label-for="act-input">
+        <b-form-group id="edit-act-input-group" label="Act" label-for="edit-act-input">
           <b-form-select
-            id="act-input"
+            id="edit-act-input"
             v-model="$v.editFormState.act_id.$model"
             :options="actOptions"
             :state="validateEditState('act_id')"
-            aria-describedby="act-feedback"
+            aria-describedby="edit-act-feedback"
             @change="editActChanged"
           />
-          <b-form-invalid-feedback id="act-feedback">
+          <b-form-invalid-feedback id="edit-act-feedback">
             This is a required field.
           </b-form-invalid-feedback>
         </b-form-group>
         <b-form-group
-          id="previous-scene-input-group"
+          id="edit-previous-scene-input-group"
           label="Previous Scene"
-          label-for="previous-scene-input"
+          label-for="edit-previous-scene-input"
         >
           <b-form-select
-            id="previous-scene-input"
+            id="edit-previous-scene-input"
             v-model="$v.editFormState.previous_scene_id.$model"
             :options="editFormPrevScenes"
             :state="validateEditState('previous_scene_id')"
-            aria-describedby="previous-scene-feedback"
+            aria-describedby="edit-previous-scene-feedback"
           />
-          <b-form-invalid-feedback id="previous-scene-feedback">
+          <b-form-invalid-feedback id="edit-previous-scene-feedback">
             This cannot form a circular dependency between scenes.
           </b-form-invalid-feedback>
         </b-form-group>
diff --git a/client/src/vue_components/show/config/characters/CharacterGroups.vue b/client/src/vue_components/show/config/characters/CharacterGroups.vue
index 3fea250d..1788981a 100644
--- a/client/src/vue_components/show/config/characters/CharacterGroups.vue
+++ b/client/src/vue_components/show/config/characters/CharacterGroups.vue
@@ -62,35 +62,39 @@
       @ok="onSubmitNew"
     >
       <b-form ref="new-character-form" @submit.stop.prevent="onSubmitNew">
-        <b-form-group id="name-input-group" label="Name" label-for="name-input">
+        <b-form-group id="new-name-input-group" label="Name" label-for="new-name-input">
           <b-form-input
-            id="name-input"
+            id="new-name-input"
             v-model="$v.newFormState.name.$model"
-            name="name-input"
+            name="new-name-input"
             :state="validateNewState('name')"
-            aria-describedby="name-feedback"
+            aria-describedby="new-name-feedback"
           />
-          <b-form-invalid-feedback id="name-feedback">
+          <b-form-invalid-feedback id="new-name-feedback">
             This is a required field.
           </b-form-invalid-feedback>
         </b-form-group>
         <b-form-group
-          id="description-input-group"
+          id="new-description-input-group"
           label="Description"
-          label-for="description-input"
+          label-for="new-description-input"
         >
           <b-form-input
-            id="description-input"
+            id="new-description-input"
             v-model="$v.newFormState.description.$model"
-            name="description-input"
+            name="new-description-input"
             :state="validateNewState('description')"
           />
         </b-form-group>
-        <b-form-group id="characters-input-group" label="Characters" label-for="characters-input">
+        <b-form-group
+          id="new-characters-input-group"
+          label="Characters"
+          label-for="new-characters-input"
+        >
           <multi-select
-            id="characters-input"
+            id="new-characters-input"
             v-model="tempCharacterList"
-            name="characters-input"
+            name="new-characters-input"
             :multiple="true"
             :options="CHARACTER_LIST"
             track-by="id"
@@ -111,35 +115,39 @@
       @ok="onSubmitEdit"
     >
       <b-form ref="edit-character-form" @submit.stop.prevent="onSubmitEdit">
-        <b-form-group id="name-input-group" label="Name" label-for="name-input">
+        <b-form-group id="edit-name-input-group" label="Name" label-for="edit-name-input">
           <b-form-input
-            id="name-input"
+            id="edit-name-input"
             v-model="$v.editFormState.name.$model"
-            name="name-input"
+            name="edit-name-input"
             :state="validateEditState('name')"
-            aria-describedby="name-feedback"
+            aria-describedby="edit-name-feedback"
           />
-          <b-form-invalid-feedback id="name-feedback">
+          <b-form-invalid-feedback id="edit-name-feedback">
             This is a required field.
           </b-form-invalid-feedback>
         </b-form-group>
         <b-form-group
-          id="description-input-group"
+          id="edit-description-input-group"
           label="Description"
-          label-for="description-input"
+          label-for="edit-description-input"
         >
           <b-form-input
-            id="description-input"
+            id="edit-description-input"
             v-model="$v.editFormState.description.$model"
-            name="description-input"
+            name="edit-description-input"
             :state="validateEditState('description')"
           />
         </b-form-group>
-        <b-form-group id="characters-input-group" label="Characters" label-for="characters-input">
+        <b-form-group
+          id="edit-characters-input-group"
+          label="Characters"
+          label-for="edit-characters-input"
+        >
           <multi-select
-            id="characters-input"
+            id="edit-characters-input"
             v-model="tempEditCharacterList"
-            name="characters-input"
+            name="edit-characters-input"
             :multiple="true"
             :options="CHARACTER_LIST"
             track-by="id"
diff --git a/client/src/vue_components/show/config/cues/ScriptLineCueEditor.vue b/client/src/vue_components/show/config/cues/ScriptLineCueEditor.vue
index 9884189e..308b05ce 100644
--- a/client/src/vue_components/show/config/cues/ScriptLineCueEditor.vue
+++ b/client/src/vue_components/show/config/cues/ScriptLineCueEditor.vue
@@ -102,27 +102,27 @@
       @ok="onSubmitNew"
     >
       <b-form ref="new-cue-form" @submit.stop.prevent="onSubmitNew">
-        <b-form-group id="type-input-group" label="Cue Type" label-for="type-input">
+        <b-form-group id="new-type-input-group" label="Cue Type" label-for="new-type-input">
           <b-form-select
-            id="act-input"
+            id="new-type-input"
             v-model="$v.newFormState.cueType.$model"
             :options="cueTypeOptions"
             :state="validateNewState('cueType')"
-            aria-describedby="cue-type-feedback"
+            aria-describedby="new-cue-type-feedback"
           />
-          <b-form-invalid-feedback id="cue-type-feedback">
+          <b-form-invalid-feedback id="new-cue-type-feedback">
             This is a required field.
           </b-form-invalid-feedback>
         </b-form-group>
-        <b-form-group id="ident-input-group" label="Identifier" label-for="ident-input">
+        <b-form-group id="new-ident-input-group" label="Identifier" label-for="new-ident-input">
           <b-form-input
-            id="ident-input"
+            id="new-ident-input"
             v-model="$v.newFormState.ident.$model"
-            name="ident-input"
+            name="new-ident-input"
             :state="validateNewState('ident')"
-            aria-describedby="ident-feedback"
+            aria-describedby="new-ident-feedback"
           />
-          <b-form-invalid-feedback id="ident-feedback">
+          <b-form-invalid-feedback id="new-ident-feedback">
             This is a required field.
           </b-form-invalid-feedback>
         </b-form-group>
@@ -208,27 +208,27 @@
       @ok="onSubmitEdit"
     >
       <b-form ref="edit-cue-form" @submit.stop.prevent="onSubmitEdit">
-        <b-form-group id="type-input-group" label="Cue Type" label-for="type-input">
+        <b-form-group id="edit-type-input-group" label="Cue Type" label-for="edit-type-input">
           <b-form-select
-            id="act-input"
+            id="edit-type-input"
             v-model="$v.editFormState.cueType.$model"
             :options="cueTypeOptions"
             :state="validateEditState('cueType')"
-            aria-describedby="cue-type-feedback"
+            aria-describedby="edit-cue-type-feedback"
           />
-          <b-form-invalid-feedback id="cue-type-feedback">
+          <b-form-invalid-feedback id="edit-cue-type-feedback">
             This is a required field.
           </b-form-invalid-feedback>
         </b-form-group>
-        <b-form-group id="ident-input-group" label="Identifier" label-for="ident-input">
+        <b-form-group id="edit-ident-input-group" label="Identifier" label-for="edit-ident-input">
           <b-form-input
-            id="ident-input"
+            id="edit-ident-input"
             v-model="$v.editFormState.ident.$model"
-            name="ident-input"
+            name="edit-ident-input"
             :state="validateEditState('ident')"
-            aria-describedby="ident-feedback"
+            aria-describedby="edit-ident-feedback"
           />
-          <b-form-invalid-feedback id="ident-feedback">
+          <b-form-invalid-feedback id="edit-ident-feedback">
             This is a required field.
           </b-form-invalid-feedback>
           <b-form-text v-if="isDuplicateEditCue" class="text-warning">
diff --git a/client/src/vue_components/show/config/mics/MicList.vue b/client/src/vue_components/show/config/mics/MicList.vue
index e5625f94..8621d678 100644
--- a/client/src/vue_components/show/config/mics/MicList.vue
+++ b/client/src/vue_components/show/config/mics/MicList.vue
@@ -48,31 +48,31 @@
       @ok="onSubmitNewMicrophone"
     >
       <b-form ref="new-microphone-form" @submit.stop.prevent="onSubmitNewMicrophone">
-        <b-form-group id="name-input-group" label="Name" label-for="name-input">
+        <b-form-group id="new-name-input-group" label="Name" label-for="new-name-input">
           <b-form-input
-            id="name-input"
+            id="new-name-input"
             v-model="$v.newMicrophoneForm.name.$model"
-            name="name-input"
+            name="new-name-input"
             :state="validateNewMicrophone('name')"
-            aria-describedby="name-feedback"
+            aria-describedby="new-name-feedback"
           />
-          <b-form-invalid-feedback id="name-feedback">
+          <b-form-invalid-feedback id="new-name-feedback">
             This is a required field, and must be unique.
           </b-form-invalid-feedback>
         </b-form-group>
         <b-form-group
-          id="description-input-group"
+          id="new-description-input-group"
           label="Description"
-          label-for="description-input"
+          label-for="new-description-input"
         >
           <b-form-input
-            id="description-input"
+            id="new-description-input"
             v-model="$v.newMicrophoneForm.description.$model"
-            name="description-input"
+            name="new-description-input"
             :state="validateNewMicrophone('description')"
-            aria-describedby="description-feedback"
+            aria-describedby="new-description-feedback"
           />
-          <b-form-invalid-feedback id="description-feedback">
+          <b-form-invalid-feedback id="new-description-feedback">
             Something went wrong!
           </b-form-invalid-feedback>
         </b-form-group>
@@ -88,31 +88,31 @@
       @ok="onSubmitEditMicrophone"
     >
       <b-form ref="edit-microphone-form" @submit.stop.prevent="onSubmitEditMicrophone">
-        <b-form-group id="name-input-group" label="Name" label-for="name-input">
+        <b-form-group id="edit-name-input-group" label="Name" label-for="edit-name-input">
           <b-form-input
-            id="name-input"
+            id="edit-name-input"
             v-model="$v.editMicrophoneForm.name.$model"
-            name="name-input"
+            name="edit-name-input"
             :state="validateEditMicrophone('name')"
-            aria-describedby="name-feedback"
+            aria-describedby="edit-name-feedback"
           />
-          <b-form-invalid-feedback id="name-feedback">
+          <b-form-invalid-feedback id="edit-name-feedback">
             This is a required field, and must be unique.
           </b-form-invalid-feedback>
         </b-form-group>
         <b-form-group
-          id="description-input-group"
+          id="edit-description-input-group"
           label="Description"
-          label-for="description-input"
+          label-for="edit-description-input"
         >
           <b-form-input
-            id="description-input"
+            id="edit-description-input"
             v-model="$v.editMicrophoneForm.description.$model"
-            name="description-input"
+            name="edit-description-input"
             :state="validateEditMicrophone('description')"
-            aria-describedby="description-feedback"
+            aria-describedby="edit-description-feedback"
           />
-          <b-form-invalid-feedback id="description-feedback">
+          <b-form-invalid-feedback id="edit-description-feedback">
             Something went wrong!
           </b-form-invalid-feedback>
         </b-form-group>
diff --git a/client/src/vue_components/show/config/script/StageDirectionStyles.vue b/client/src/vue_components/show/config/script/StageDirectionStyles.vue
index 6d7cabeb..220b3e65 100644
--- a/client/src/vue_components/show/config/script/StageDirectionStyles.vue
+++ b/client/src/vue_components/show/config/script/StageDirectionStyles.vue
@@ -39,23 +39,27 @@
           <h4>Configuration Options</h4>
           <b-form ref="new-config-form" @ok="onSubmitNewStyle">
             <b-form-group
-              id="description-input-group"
+              id="new-description-input-group"
               label="Description"
-              label-for="description-input"
+              label-for="new-description-input"
             >
               <b-form-input
-                id="description-input"
+                id="new-description-input"
                 v-model="$v.newStyleFormState.description.$model"
-                name="description-input"
+                name="new-description-input"
                 :state="validateNewStyleState('description')"
-                aria-describedby="description-feedback"
+                aria-describedby="new-description-feedback"
               />
-              <b-form-invalid-feedback id="description-feedback">
+              <b-form-invalid-feedback id="new-description-feedback">
                 This is a required field.
               </b-form-invalid-feedback>
             </b-form-group>
-            <b-form-group id="styling-group" label="Default Styles" label-for="styling-input">
-              <b-button-group id="styling-input">
+            <b-form-group
+              id="new-styling-group"
+              label="Default Styles"
+              label-for="new-styling-input"
+            >
+              <b-button-group id="new-styling-input">
                 <b-button
                   v-for="(btn, idx) in $v.newStyleFormState.styleOptions.$model"
                   :key="idx"
@@ -67,12 +71,12 @@
               </b-button-group>
             </b-form-group>
             <b-form-group
-              id="text-formatting-group"
+              id="new-text-formatting-group"
               label="Default Text Format"
-              label-for="text-format-input"
+              label-for="new-text-format-input"
             >
               <b-form-select
-                id="text-format-input"
+                id="new-text-format-input"
                 v-model="$v.newStyleFormState.textFormat.$model"
               >
                 <b-form-select-option value="default"> Default </b-form-select-option>
@@ -81,41 +85,41 @@
               </b-form-select>
             </b-form-group>
             <b-form-group
-              id="text-colour-input-group"
+              id="new-text-colour-input-group"
               label="Text Colour"
-              label-for="text-colour-input"
+              label-for="new-text-colour-input"
             >
               <b-form-input
-                id="text-colour-input"
+                id="new-text-colour-input"
                 v-model="$v.newStyleFormState.textColour.$model"
-                name="text-colour-input"
+                name="new-text-colour-input"
                 type="color"
                 :state="validateNewStyleState('textColour')"
-                aria-describedby="colour-feedback"
+                aria-describedby="new-colour-feedback"
               />
-              <b-form-invalid-feedback id="colour-feedback">
+              <b-form-invalid-feedback id="new-colour-feedback">
                 This is a required field.
               </b-form-invalid-feedback>
             </b-form-group>
             <b-form-group
-              id="background-colour-enable-group"
+              id="new-background-colour-enable-group"
               label="Background Colour"
-              label-for="background-colour-enable"
+              label-for="new-background-colour-enable"
             >
               <b-form-checkbox
-                id="background-colour-enable"
+                id="new-background-colour-enable"
                 v-model="$v.newStyleFormState.enableBackgroundColour.$model"
                 :switch="true"
               />
             </b-form-group>
             <b-form-group
               v-if="newStyleFormState.enableBackgroundColour"
-              id="background-colour-input-group"
+              id="new-background-colour-input-group"
             >
               <b-form-input
-                id="background-colour-picker"
+                id="new-background-colour-picker"
                 v-model="$v.newStyleFormState.backgroundColour.$model"
-                name="background-colour-picker"
+                name="new-background-colour-picker"
                 type="color"
                 :state="validateNewStyleState('textColour')"
               />
@@ -150,23 +154,27 @@
           <h4>Configuration Options</h4>
           <b-form ref="edit-config-form" @ok="onSubmitEditStyle">
             <b-form-group
-              id="description-input-group"
+              id="edit-description-input-group"
               label="Description"
-              label-for="description-input"
+              label-for="edit-description-input"
             >
               <b-form-input
-                id="description-input"
+                id="edit-description-input"
                 v-model="$v.editStyleFormState.description.$model"
-                name="description-input"
+                name="edit-description-input"
                 :state="validateEditStyleState('description')"
-                aria-describedby="description-feedback"
+                aria-describedby="edit-description-feedback"
               />
-              <b-form-invalid-feedback id="description-feedback">
+              <b-form-invalid-feedback id="edit-description-feedback">
                 This is a required field.
               </b-form-invalid-feedback>
             </b-form-group>
-            <b-form-group id="styling-group" label="Default Styles" label-for="styling-input">
-              <b-button-group id="styling-input">
+            <b-form-group
+              id="edit-styling-group"
+              label="Default Styles"
+              label-for="edit-styling-input"
+            >
+              <b-button-group id="edit-styling-input">
                 <b-button
                   v-for="(btn, idx) in $v.editStyleFormState.styleOptions.$model"
                   :key="idx"
@@ -178,12 +186,12 @@
               </b-button-group>
             </b-form-group>
             <b-form-group
-              id="text-formatting-group"
+              id="edit-text-formatting-group"
               label="Default Text Format"
-              label-for="text-format-input"
+              label-for="edit-text-format-input"
             >
               <b-form-select
-                id="text-format-input"
+                id="edit-text-format-input"
                 v-model="$v.editStyleFormState.textFormat.$model"
               >
                 <b-form-select-option value="default"> Default </b-form-select-option>
@@ -192,41 +200,41 @@
               </b-form-select>
             </b-form-group>
             <b-form-group
-              id="text-colour-input-group"
+              id="edit-text-colour-input-group"
               label="Text Colour"
-              label-for="text-colour-input"
+              label-for="edit-text-colour-input"
             >
               <b-form-input
-                id="text-colour-input"
+                id="edit-text-colour-input"
                 v-model="$v.editStyleFormState.textColour.$model"
-                name="text-colour-input"
+                name="edit-text-colour-input"
                 type="color"
                 :state="validateEditStyleState('textColour')"
-                aria-describedby="colour-feedback"
+                aria-describedby="edit-colour-feedback"
               />
-              <b-form-invalid-feedback id="colour-feedback">
+              <b-form-invalid-feedback id="edit-colour-feedback">
                 This is a required field.
               </b-form-invalid-feedback>
             </b-form-group>
             <b-form-group
-              id="background-colour-enable-group"
+              id="edit-background-colour-enable-group"
               label="Background Colour"
-              label-for="background-colour-enable"
+              label-for="edit-background-colour-enable"
             >
               <b-form-checkbox
-                id="background-colour-enable"
+                id="edit-background-colour-enable"
                 v-model="$v.editStyleFormState.enableBackgroundColour.$model"
                 :switch="true"
               />
             </b-form-group>
             <b-form-group
               v-if="editStyleFormState.enableBackgroundColour"
-              id="background-colour-input-group"
+              id="edit-background-colour-input-group"
             >
               <b-form-input
-                id="background-colour-picker"
+                id="edit-background-colour-picker"
                 v-model="$v.editStyleFormState.backgroundColour.$model"
-                name="background-colour-picker"
+                name="edit-background-colour-picker"
                 type="color"
                 :state="validateEditStyleState('textColour')"
               />
diff --git a/client/src/vue_components/show/config/stage/CrewList.vue b/client/src/vue_components/show/config/stage/CrewList.vue
index d1c0b566..0a5388c6 100644
--- a/client/src/vue_components/show/config/stage/CrewList.vue
+++ b/client/src/vue_components/show/config/stage/CrewList.vue
@@ -38,27 +38,35 @@
       @ok="onSubmitNew"
     >
       <b-form ref="new-crew-form" @submit.stop.prevent="onSubmitNew">
-        <b-form-group id="first-name-input-group" label="First Name" label-for="first-name-input">
+        <b-form-group
+          id="new-first-name-input-group"
+          label="First Name"
+          label-for="new-first-name-input"
+        >
           <b-form-input
-            id="first-name-input"
+            id="new-first-name-input"
             v-model="$v.newFormState.firstName.$model"
-            name="first-name-input"
+            name="new-first-name-input"
             :state="validateNewState('firstName')"
-            aria-describedby="name-feedback"
+            aria-describedby="new-first-name-feedback"
           />
-          <b-form-invalid-feedback id="first-name-feedback">
+          <b-form-invalid-feedback id="new-first-name-feedback">
             This is a required field.
           </b-form-invalid-feedback>
         </b-form-group>
-        <b-form-group id="last-name-input-group" label="Last Name" label-for="last-name-input">
+        <b-form-group
+          id="new-last-name-input-group"
+          label="Last Name"
+          label-for="new-last-name-input"
+        >
           <b-form-input
-            id="last-name-input"
+            id="new-last-name-input"
             v-model="$v.newFormState.lastName.$model"
-            name="last-name-input"
+            name="new-last-name-input"
             :state="validateNewState('lastName')"
-            aria-describedby="name-feedback"
+            aria-describedby="new-last-name-feedback"
           />
-          <b-form-invalid-feedback id="last-name-feedback">
+          <b-form-invalid-feedback id="new-last-name-feedback">
             This is a required field.
           </b-form-invalid-feedback>
         </b-form-group>
@@ -73,27 +81,35 @@
       @ok="onSubmitEdit"
     >
       <b-form ref="edit-crew-form" @submit.stop.prevent="onSubmitEdit">
-        <b-form-group id="first-name-input-group" label="First Name" label-for="first-name-input">
+        <b-form-group
+          id="edit-first-name-input-group"
+          label="First Name"
+          label-for="edit-first-name-input"
+        >
           <b-form-input
-            id="first-name-input"
+            id="edit-first-name-input"
             v-model="$v.editFormState.firstName.$model"
-            name="first-name-input"
+            name="edit-first-name-input"
             :state="validateEditState('firstName')"
-            aria-describedby="name-feedback"
+            aria-describedby="edit-first-name-feedback"
           />
-          <b-form-invalid-feedback id="first-name-feedback">
+          <b-form-invalid-feedback id="edit-first-name-feedback">
             This is a required field.
           </b-form-invalid-feedback>
         </b-form-group>
-        <b-form-group id="last-name-input-group" label="Last Name" label-for="last-name-input">
+        <b-form-group
+          id="edit-last-name-input-group"
+          label="Last Name"
+          label-for="edit-last-name-input"
+        >
           <b-form-input
-            id="last-name-input"
+            id="edit-last-name-input"
             v-model="$v.editFormState.lastName.$model"
-            name="last-name-input"
+            name="edit-last-name-input"
             :state="validateEditState('lastName')"
-            aria-describedby="name-feedback"
+            aria-describedby="edit-last-name-feedback"
           />
-          <b-form-invalid-feedback id="last-name-feedback">
+          <b-form-invalid-feedback id="edit-last-name-feedback">
             This is a required field.
           </b-form-invalid-feedback>
         </b-form-group>
diff --git a/client/src/vue_components/show/config/stage/PropsList.vue b/client/src/vue_components/show/config/stage/PropsList.vue
index 37fa495b..533d2abf 100644
--- a/client/src/vue_components/show/config/stage/PropsList.vue
+++ b/client/src/vue_components/show/config/stage/PropsList.vue
@@ -77,31 +77,35 @@
       @ok="onSubmitNewPropType"
     >
       <b-form ref="new-prop-type-form" @submit.stop.prevent="onSubmitNewPropType">
-        <b-form-group id="name-input-group" label="Name" label-for="name-input">
+        <b-form-group
+          id="new-prop-type-name-input-group"
+          label="Name"
+          label-for="new-prop-type-name-input"
+        >
           <b-form-input
-            id="name-input"
+            id="new-prop-type-name-input"
             v-model="$v.newPropTypeFormState.name.$model"
-            name="name-input"
+            name="new-prop-type-name-input"
             :state="validateNewPropTypeState('name')"
-            aria-describedby="name-feedback"
+            aria-describedby="new-prop-type-name-feedback"
           />
-          <b-form-invalid-feedback id="name-feedback">
+          <b-form-invalid-feedback id="new-prop-type-name-feedback">
             This is a required field.
           </b-form-invalid-feedback>
         </b-form-group>
         <b-form-group
-          id="description-input-group"
+          id="new-prop-type-description-input-group"
           label="Description"
-          label-for="description-input"
+          label-for="new-prop-type-description-input"
         >
           <b-form-input
-            id="description-input"
+            id="new-prop-type-description-input"
             v-model="$v.newPropTypeFormState.description.$model"
-            name="description-input"
+            name="new-prop-type-description-input"
             :state="validateNewPropTypeState('description')"
-            aria-describedby="name-feedback"
+            aria-describedby="new-prop-type-description-feedback"
           />
-          <b-form-invalid-feedback id="description-feedback">
+          <b-form-invalid-feedback id="new-prop-type-description-feedback">
             This is a required field.
           </b-form-invalid-feedback>
         </b-form-group>
@@ -116,31 +120,35 @@
       @ok="onSubmitEditPropType"
     >
       <b-form ref="edit-prop-type-form" @submit.stop.prevent="onSubmitEditPropType">
-        <b-form-group id="name-input-group" label="Name" label-for="name-input">
+        <b-form-group
+          id="edit-prop-type-name-input-group"
+          label="Name"
+          label-for="edit-prop-type-name-input"
+        >
           <b-form-input
-            id="name-input"
+            id="edit-prop-type-name-input"
             v-model="$v.editPropTypeFormState.name.$model"
-            name="name-input"
+            name="edit-prop-type-name-input"
             :state="validateEditPropTypeState('name')"
-            aria-describedby="name-feedback"
+            aria-describedby="edit-prop-type-name-feedback"
           />
-          <b-form-invalid-feedback id="name-feedback">
+          <b-form-invalid-feedback id="edit-prop-type-name-feedback">
             This is a required field.
           </b-form-invalid-feedback>
         </b-form-group>
         <b-form-group
-          id="description-input-group"
+          id="edit-prop-type-description-input-group"
           label="Description"
-          label-for="description-input"
+          label-for="edit-prop-type-description-input"
         >
           <b-form-input
-            id="description-input"
+            id="edit-prop-type-description-input"
             v-model="$v.editPropTypeFormState.description.$model"
-            name="description-input"
+            name="edit-prop-type-description-input"
             :state="validateEditPropTypeState('description')"
-            aria-describedby="name-feedback"
+            aria-describedby="edit-prop-type-description-feedback"
           />
-          <b-form-invalid-feedback id="description-feedback">
+          <b-form-invalid-feedback id="edit-prop-type-description-feedback">
             This is a required field.
           </b-form-invalid-feedback>
         </b-form-group>
@@ -156,43 +164,47 @@
       @ok="onSubmitNewProp"
     >
       <b-form ref="new-props-form" @submit.stop.prevent="onSubmitNewProp">
-        <b-form-group id="prop-type-input-group" label="Prop Type" label-for="prop-type-input">
+        <b-form-group
+          id="new-prop-prop-type-input-group"
+          label="Prop Type"
+          label-for="new-prop-prop-type-input"
+        >
           <b-form-select
-            id="prop-type-input"
+            id="new-prop-prop-type-input"
             v-model="$v.newPropFormState.prop_type_id.$model"
             :options="propTypeOptions"
             :state="validateNewPropState('prop_type_id')"
-            aria-describedby="prop-type-feedback"
+            aria-describedby="new-prop-prop-type-feedback"
           />
-          <b-form-invalid-feedback id="prop-type-feedback">
+          <b-form-invalid-feedback id="new-prop-prop-type-feedback">
             This is a required field.
           </b-form-invalid-feedback>
         </b-form-group>
-        <b-form-group id="name-input-group" label="Name" label-for="name-input">
+        <b-form-group id="new-prop-name-input-group" label="Name" label-for="new-prop-name-input">
           <b-form-input
-            id="name-input"
+            id="new-prop-name-input"
             v-model="$v.newPropFormState.name.$model"
-            name="name-input"
+            name="new-prop-name-input"
             :state="validateNewPropState('name')"
-            aria-describedby="name-feedback"
+            aria-describedby="new-prop-name-feedback"
           />
-          <b-form-invalid-feedback id="name-feedback">
+          <b-form-invalid-feedback id="new-prop-name-feedback">
             This is a required field.
           </b-form-invalid-feedback>
         </b-form-group>
         <b-form-group
-          id="description-input-group"
+          id="new-prop-description-input-group"
           label="Description"
-          label-for="description-input"
+          label-for="new-prop-description-input"
         >
           <b-form-input
-            id="description-input"
+            id="new-prop-description-input"
             v-model="$v.newPropFormState.description.$model"
-            name="description-input"
+            name="new-prop-description-input"
             :state="validateNewPropState('description')"
-            aria-describedby="name-feedback"
+            aria-describedby="new-prop-description-feedback"
           />
-          <b-form-invalid-feedback id="description-feedback">
+          <b-form-invalid-feedback id="new-prop-description-feedback">
             This is a required field.
           </b-form-invalid-feedback>
         </b-form-group>
@@ -207,43 +219,47 @@
       @ok="onSubmitEditProp"
     >
       <b-form ref="edit-props-form" @submit.stop.prevent="onSubmitEditProp">
-        <b-form-group id="prop-type-input-group" label="Prop Type" label-for="prop-type-input">
+        <b-form-group
+          id="edit-prop-prop-type-input-group"
+          label="Prop Type"
+          label-for="edit-prop-prop-type-input"
+        >
           <b-form-select
-            id="prop-type-input"
+            id="edit-prop-prop-type-input"
             v-model="$v.editPropFormState.prop_type_id.$model"
             :options="propTypeOptions"
             :state="validateEditPropState('prop_type_id')"
-            aria-describedby="prop-type-feedback"
+            aria-describedby="edit-prop-prop-type-feedback"
           />
-          <b-form-invalid-feedback id="prop-type-feedback">
+          <b-form-invalid-feedback id="edit-prop-prop-type-feedback">
             This is a required field.
           </b-form-invalid-feedback>
         </b-form-group>
-        <b-form-group id="name-input-group" label="Name" label-for="name-input">
+        <b-form-group id="edit-prop-name-input-group" label="Name" label-for="edit-prop-name-input">
           <b-form-input
-            id="name-input"
+            id="edit-prop-name-input"
             v-model="$v.editPropFormState.name.$model"
-            name="name-input"
+            name="edit-prop-name-input"
             :state="validateEditPropState('name')"
-            aria-describedby="name-feedback"
+            aria-describedby="edit-prop-name-feedback"
           />
-          <b-form-invalid-feedback id="name-feedback">
+          <b-form-invalid-feedback id="edit-prop-name-feedback">
             This is a required field.
           </b-form-invalid-feedback>
         </b-form-group>
         <b-form-group
-          id="description-input-group"
+          id="edit-prop-description-input-group"
           label="Description"
-          label-for="description-input"
+          label-for="edit-prop-description-input"
         >
           <b-form-input
-            id="description-input"
+            id="edit-prop-description-input"
             v-model="$v.editPropFormState.description.$model"
-            name="description-input"
+            name="edit-prop-description-input"
             :state="validateEditPropState('description')"
-            aria-describedby="name-feedback"
+            aria-describedby="edit-prop-description-feedback"
           />
-          <b-form-invalid-feedback id="description-feedback">
+          <b-form-invalid-feedback id="edit-prop-description-feedback">
             This is a required field.
           </b-form-invalid-feedback>
         </b-form-group>
diff --git a/client/src/vue_components/user/settings/CueColourPreferences.vue b/client/src/vue_components/user/settings/CueColourPreferences.vue
index 008f708f..9593e463 100644
--- a/client/src/vue_components/user/settings/CueColourPreferences.vue
+++ b/client/src/vue_components/user/settings/CueColourPreferences.vue
@@ -53,19 +53,19 @@
           <h4>Configuration Options</h4>
           <b-form ref="new-config-form" @ok="onSubmitNewOverride">
             <b-form-group
-              id="colour-input-group"
+              id="new-colour-input-group"
               label="Cue Button Colour"
-              label-for="colour-input"
+              label-for="new-colour-input"
             >
               <b-form-input
-                id="colour-input"
+                id="new-colour-input"
                 v-model="$v.newFormState.colour.$model"
-                name="colour-input"
+                name="new-colour-input"
                 type="color"
                 :state="validateNewState('colour')"
-                aria-describedby="colour-feedback"
+                aria-describedby="new-colour-feedback"
               />
-              <b-form-invalid-feedback id="colour-feedback">
+              <b-form-invalid-feedback id="new-colour-feedback">
                 This is a required field.
               </b-form-invalid-feedback>
             </b-form-group>
@@ -97,19 +97,19 @@
           <h4>Configuration Options</h4>
           <b-form ref="edit-config-form" @ok="onSubmitEditOverride">
             <b-form-group
-              id="colour-input-group"
+              id="edit-colour-input-group"
               label="Cue Button Colour"
-              label-for="colour-input"
+              label-for="edit-colour-input"
             >
               <b-form-input
-                id="colour-input"
+                id="edit-colour-input"
                 v-model="$v.editFormState.colour.$model"
-                name="colour-input"
+                name="edit-colour-input"
                 type="color"
                 :state="validateEditState('colour')"
-                aria-describedby="colour-feedback"
+                aria-describedby="edit-colour-feedback"
               />
-              <b-form-invalid-feedback id="colour-feedback">
+              <b-form-invalid-feedback id="edit-colour-feedback">
                 This is a required field.
               </b-form-invalid-feedback>
             </b-form-group>
diff --git a/client/src/vue_components/user/settings/StageDirectionStyles.vue b/client/src/vue_components/user/settings/StageDirectionStyles.vue
index 559239f6..8f5aceb8 100644
--- a/client/src/vue_components/user/settings/StageDirectionStyles.vue
+++ b/client/src/vue_components/user/settings/StageDirectionStyles.vue
@@ -54,8 +54,12 @@
         <div>
           <h4>Configuration Options</h4>
           <b-form ref="new-config-form" @ok="onSubmitNewOverride">
-            <b-form-group id="styling-group" label="Default Styles" label-for="styling-input">
-              <b-button-group id="styling-input">
+            <b-form-group
+              id="new-styling-group"
+              label="Default Styles"
+              label-for="new-styling-input"
+            >
+              <b-button-group id="new-styling-input">
                 <b-button
                   v-for="(btn, idx) in $v.newStyleFormState.styleOptions.$model"
                   :key="idx"
@@ -67,12 +71,12 @@
               </b-button-group>
             </b-form-group>
             <b-form-group
-              id="text-formatting-group"
+              id="new-text-formatting-group"
               label="Default Text Format"
-              label-for="text-format-input"
+              label-for="new-text-format-input"
             >
               <b-form-select
-                id="text-format-input"
+                id="new-text-format-input"
                 v-model="$v.newStyleFormState.textFormat.$model"
               >
                 <b-form-select-option value="default"> Default </b-form-select-option>
@@ -81,41 +85,41 @@
               </b-form-select>
             </b-form-group>
             <b-form-group
-              id="text-colour-input-group"
+              id="new-text-colour-input-group"
               label="Text Colour"
-              label-for="text-colour-input"
+              label-for="new-text-colour-input"
             >
               <b-form-input
-                id="text-colour-input"
+                id="new-text-colour-input"
                 v-model="$v.newStyleFormState.textColour.$model"
-                name="text-colour-input"
+                name="new-text-colour-input"
                 type="color"
                 :state="validateNewStyleState('textColour')"
-                aria-describedby="colour-feedback"
+                aria-describedby="new-colour-feedback"
               />
-              <b-form-invalid-feedback id="colour-feedback">
+              <b-form-invalid-feedback id="new-colour-feedback">
                 This is a required field.
               </b-form-invalid-feedback>
             </b-form-group>
             <b-form-group
-              id="background-colour-enable-group"
+              id="new-background-colour-enable-group"
               label="Background Colour"
-              label-for="background-colour-enable"
+              label-for="new-background-colour-enable"
             >
               <b-form-checkbox
-                id="background-colour-enable"
+                id="new-background-colour-enable"
                 v-model="$v.newStyleFormState.enableBackgroundColour.$model"
                 :switch="true"
               />
             </b-form-group>
             <b-form-group
               v-if="newStyleFormState.enableBackgroundColour"
-              id="background-colour-input-group"
+              id="new-background-colour-input-group"
             >
               <b-form-input
-                id="background-colour-picker"
+                id="new-background-colour-picker"
                 v-model="$v.newStyleFormState.backgroundColour.$model"
-                name="background-colour-picker"
+                name="new-background-colour-picker"
                 type="color"
                 :state="validateNewStyleState('textColour')"
               />
@@ -149,8 +153,12 @@
         <div>
           <h4>Configuration Options</h4>
           <b-form ref="edit-config-form" @ok="onSubmitEditOverride">
-            <b-form-group id="styling-group" label="Default Styles" label-for="styling-input">
-              <b-button-group id="styling-input">
+            <b-form-group
+              id="edit-styling-group"
+              label="Default Styles"
+              label-for="edit-styling-input"
+            >
+              <b-button-group id="edit-styling-input">
                 <b-button
                   v-for="(btn, idx) in $v.editStyleFormState.styleOptions.$model"
                   :key="idx"
@@ -162,12 +170,12 @@
               </b-button-group>
             </b-form-group>
             <b-form-group
-              id="text-formatting-group"
+              id="edit-text-formatting-group"
               label="Default Text Format"
-              label-for="text-format-input"
+              label-for="edit-text-format-input"
             >
               <b-form-select
-                id="text-format-input"
+                id="edit-text-format-input"
                 v-model="$v.editStyleFormState.textFormat.$model"
               >
                 <b-form-select-option value="default"> Default </b-form-select-option>
@@ -176,41 +184,41 @@
               </b-form-select>
             </b-form-group>
             <b-form-group
-              id="text-colour-input-group"
+              id="edit-text-colour-input-group"
               label="Text Colour"
-              label-for="text-colour-input"
+              label-for="edit-text-colour-input"
             >
               <b-form-input
-                id="text-colour-input"
+                id="edit-text-colour-input"
                 v-model="$v.editStyleFormState.textColour.$model"
-                name="text-colour-input"
+                name="edit-text-colour-input"
                 type="color"
                 :state="validateEditStyleState('textColour')"
-                aria-describedby="colour-feedback"
+                aria-describedby="edit-colour-feedback"
               />
-              <b-form-invalid-feedback id="colour-feedback">
+              <b-form-invalid-feedback id="edit-colour-feedback">
                 This is a required field.
               </b-form-invalid-feedback>
             </b-form-group>
             <b-form-group
-              id="background-colour-enable-group"
+              id="edit-background-colour-enable-group"
               label="Background Colour"
-              label-for="background-colour-enable"
+              label-for="edit-background-colour-enable"
             >
               <b-form-checkbox
-                id="background-colour-enable"
+                id="edit-background-colour-enable"
                 v-model="$v.editStyleFormState.enableBackgroundColour.$model"
                 :switch="true"
               />
             </b-form-group>
             <b-form-group
               v-if="editStyleFormState.enableBackgroundColour"
-              id="background-colour-input-group"
+              id="edit-background-colour-input-group"
             >
               <b-form-input
-                id="background-colour-picker"
+                id="edit-background-colour-picker"
                 v-model="$v.editStyleFormState.backgroundColour.$model"
-                name="background-colour-picker"
+                name="edit-background-colour-picker"
                 type="color"
                 :state="validateEditStyleState('textColour')"
               />

From dc6634f7ab21c59c3215538363f9731903b5602b Mon Sep 17 00:00:00 2001
From: Tim Bradgate <timbradgate@hotmail.co.uk>
Date: Fri, 30 Jan 2026 14:20:28 +0000
Subject: [PATCH 2/2] Fix duplicate HTML IDs in SceneryList.vue

Add unique prefixes to form element IDs in the new-scenery-type,
edit-scenery-type, new-scenery, and edit-scenery modals.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../show/config/stage/SceneryList.vue         | 124 ++++++++++--------
 1 file changed, 70 insertions(+), 54 deletions(-)

diff --git a/client/src/vue_components/show/config/stage/SceneryList.vue b/client/src/vue_components/show/config/stage/SceneryList.vue
index b61363df..4d686482 100644
--- a/client/src/vue_components/show/config/stage/SceneryList.vue
+++ b/client/src/vue_components/show/config/stage/SceneryList.vue
@@ -77,31 +77,35 @@
       @ok="onSubmitNewSceneryType"
     >
       <b-form ref="new-scenery-type-form" @submit.stop.prevent="onSubmitNewSceneryType">
-        <b-form-group id="name-input-group" label="Name" label-for="name-input">
+        <b-form-group
+          id="new-scenery-type-name-input-group"
+          label="Name"
+          label-for="new-scenery-type-name-input"
+        >
           <b-form-input
-            id="name-input"
+            id="new-scenery-type-name-input"
             v-model="$v.newSceneryTypeFormState.name.$model"
-            name="name-input"
+            name="new-scenery-type-name-input"
             :state="validateNewSceneryTypeState('name')"
-            aria-describedby="name-feedback"
+            aria-describedby="new-scenery-type-name-feedback"
           />
-          <b-form-invalid-feedback id="name-feedback">
+          <b-form-invalid-feedback id="new-scenery-type-name-feedback">
             This is a required field.
           </b-form-invalid-feedback>
         </b-form-group>
         <b-form-group
-          id="description-input-group"
+          id="new-scenery-type-description-input-group"
           label="Description"
-          label-for="description-input"
+          label-for="new-scenery-type-description-input"
         >
           <b-form-input
-            id="description-input"
+            id="new-scenery-type-description-input"
             v-model="$v.newSceneryTypeFormState.description.$model"
-            name="description-input"
+            name="new-scenery-type-description-input"
             :state="validateNewSceneryTypeState('description')"
-            aria-describedby="name-feedback"
+            aria-describedby="new-scenery-type-description-feedback"
           />
-          <b-form-invalid-feedback id="description-feedback">
+          <b-form-invalid-feedback id="new-scenery-type-description-feedback">
             This is a required field.
           </b-form-invalid-feedback>
         </b-form-group>
@@ -116,31 +120,35 @@
       @ok="onSubmitEditSceneryType"
     >
       <b-form ref="edit-scenery-type-form" @submit.stop.prevent="onSubmitEditSceneryType">
-        <b-form-group id="name-input-group" label="Name" label-for="name-input">
+        <b-form-group
+          id="edit-scenery-type-name-input-group"
+          label="Name"
+          label-for="edit-scenery-type-name-input"
+        >
           <b-form-input
-            id="name-input"
+            id="edit-scenery-type-name-input"
             v-model="$v.editSceneryTypeFormState.name.$model"
-            name="name-input"
+            name="edit-scenery-type-name-input"
             :state="validateEditSceneryTypeState('name')"
-            aria-describedby="name-feedback"
+            aria-describedby="edit-scenery-type-name-feedback"
           />
-          <b-form-invalid-feedback id="name-feedback">
+          <b-form-invalid-feedback id="edit-scenery-type-name-feedback">
             This is a required field.
           </b-form-invalid-feedback>
         </b-form-group>
         <b-form-group
-          id="description-input-group"
+          id="edit-scenery-type-description-input-group"
           label="Description"
-          label-for="description-input"
+          label-for="edit-scenery-type-description-input"
         >
           <b-form-input
-            id="description-input"
+            id="edit-scenery-type-description-input"
             v-model="$v.editSceneryTypeFormState.description.$model"
-            name="description-input"
+            name="edit-scenery-type-description-input"
             :state="validateEditSceneryTypeState('description')"
-            aria-describedby="name-feedback"
+            aria-describedby="edit-scenery-type-description-feedback"
           />
-          <b-form-invalid-feedback id="description-feedback">
+          <b-form-invalid-feedback id="edit-scenery-type-description-feedback">
             This is a required field.
           </b-form-invalid-feedback>
         </b-form-group>
@@ -157,46 +165,50 @@
     >
       <b-form ref="new-scenery-form" @submit.stop.prevent="onSubmitNewScenery">
         <b-form-group
-          id="scenery-type-input-group"
+          id="new-scenery-type-input-group"
           label="Scenery Type"
-          label-for="scenery-type-input"
+          label-for="new-scenery-type-input"
         >
           <b-form-select
-            id="scenery-type-input"
+            id="new-scenery-type-input"
             v-model="$v.newSceneryFormState.scenery_type_id.$model"
             :options="sceneryTypeOptions"
             :state="validateNewSceneryState('scenery_type_id')"
-            aria-describedby="scenery-type-feedback"
+            aria-describedby="new-scenery-type-feedback"
           />
-          <b-form-invalid-feedback id="scenery-type-feedback">
+          <b-form-invalid-feedback id="new-scenery-type-feedback">
             This is a required field.
           </b-form-invalid-feedback>
         </b-form-group>
-        <b-form-group id="name-input-group" label="Name" label-for="name-input">
+        <b-form-group
+          id="new-scenery-name-input-group"
+          label="Name"
+          label-for="new-scenery-name-input"
+        >
           <b-form-input
-            id="name-input"
+            id="new-scenery-name-input"
             v-model="$v.newSceneryFormState.name.$model"
-            name="name-input"
+            name="new-scenery-name-input"
             :state="validateNewSceneryState('name')"
-            aria-describedby="name-feedback"
+            aria-describedby="new-scenery-name-feedback"
           />
-          <b-form-invalid-feedback id="name-feedback">
+          <b-form-invalid-feedback id="new-scenery-name-feedback">
             This is a required field.
           </b-form-invalid-feedback>
         </b-form-group>
         <b-form-group
-          id="description-input-group"
+          id="new-scenery-description-input-group"
           label="Description"
-          label-for="description-input"
+          label-for="new-scenery-description-input"
         >
           <b-form-input
-            id="description-input"
+            id="new-scenery-description-input"
             v-model="$v.newSceneryFormState.description.$model"
-            name="description-input"
+            name="new-scenery-description-input"
             :state="validateNewSceneryState('description')"
-            aria-describedby="name-feedback"
+            aria-describedby="new-scenery-description-feedback"
           />
-          <b-form-invalid-feedback id="description-feedback">
+          <b-form-invalid-feedback id="new-scenery-description-feedback">
             This is a required field.
           </b-form-invalid-feedback>
         </b-form-group>
@@ -212,46 +224,50 @@
     >
       <b-form ref="edit-scenery-form" @submit.stop.prevent="onSubmitEditScenery">
         <b-form-group
-          id="scenery-type-input-group"
+          id="edit-scenery-type-input-group"
           label="Scenery Type"
-          label-for="scenery-type-input"
+          label-for="edit-scenery-type-input"
         >
           <b-form-select
-            id="scenery-type-input"
+            id="edit-scenery-type-input"
             v-model="$v.editSceneryFormState.scenery_type_id.$model"
             :options="sceneryTypeOptions"
             :state="validateEditSceneryState('scenery_type_id')"
-            aria-describedby="scenery-type-feedback"
+            aria-describedby="edit-scenery-type-feedback"
           />
-          <b-form-invalid-feedback id="scenery-type-feedback">
+          <b-form-invalid-feedback id="edit-scenery-type-feedback">
             This is a required field.
           </b-form-invalid-feedback>
         </b-form-group>
-        <b-form-group id="name-input-group" label="Name" label-for="name-input">
+        <b-form-group
+          id="edit-scenery-name-input-group"
+          label="Name"
+          label-for="edit-scenery-name-input"
+        >
           <b-form-input
-            id="name-input"
+            id="edit-scenery-name-input"
             v-model="$v.editSceneryFormState.name.$model"
-            name="name-input"
+            name="edit-scenery-name-input"
             :state="validateEditSceneryState('name')"
-            aria-describedby="name-feedback"
+            aria-describedby="edit-scenery-name-feedback"
           />
-          <b-form-invalid-feedback id="name-feedback">
+          <b-form-invalid-feedback id="edit-scenery-name-feedback">
             This is a required field.
           </b-form-invalid-feedback>
         </b-form-group>
         <b-form-group
-          id="description-input-group"
+          id="edit-scenery-description-input-group"
           label="Description"
-          label-for="description-input"
+          label-for="edit-scenery-description-input"
         >
           <b-form-input
-            id="description-input"
+            id="edit-scenery-description-input"
             v-model="$v.editSceneryFormState.description.$model"
-            name="description-input"
+            name="edit-scenery-description-input"
             :state="validateEditSceneryState('description')"
-            aria-describedby="name-feedback"
+            aria-describedby="edit-scenery-description-feedback"
           />
-          <b-form-invalid-feedback id="description-feedback">
+          <b-form-invalid-feedback id="edit-scenery-description-feedback">
             This is a required field.
           </b-form-invalid-feedback>
         </b-form-group>