From 86f694b939ed1dab442e3bb73ec81c49188443dd Mon Sep 17 00:00:00 2001
From: swapnamol-abraham <swapnamol.abraham@nhs.net>
Date: Fri, 25 Apr 2025 11:21:37 +0100
Subject: [PATCH] TD-5142: Issue with focussing to the fields on Contribute
 resource screens

---
 .../Scripts/vuesrc/ckeditorwithhint.vue                |  2 +-
 .../Views/Catalogue/CatalogueOwner.cshtml              |  4 ++--
 .../Views/Catalogue/Edit.cshtml                        |  2 +-
 .../Views/Notifications/CreateEdit.cshtml              |  2 +-
 .../vuesrc/catalogue/catalogueaccessrequest.vue        |  2 +-
 .../contribute-resource/ContributeAuthorsTab.vue       |  2 +-
 .../contribute-resource/ContributeLicenceTab.vue       |  2 +-
 .../components/CatalogueSelector.vue                   |  2 +-
 .../contribute-resource/components/KeyWordsEditor.vue  |  2 +-
 .../questions/QuestionBlockCollectionInput.vue         |  2 +-
 .../Scripts/vuesrc/contribute/CatalogueSelect.vue      |  2 +-
 .../Scripts/vuesrc/contribute/Content.vue              |  6 +++---
 .../Scripts/vuesrc/contribute/ContentArticle.vue       |  2 +-
 .../Scripts/vuesrc/contribute/ContentAudio.vue         |  4 ++--
 .../Scripts/vuesrc/contribute/ContentCommon.vue        | 10 +++++-----
 .../Scripts/vuesrc/contribute/ContentGenericFile.vue   |  2 +-
 .../Scripts/vuesrc/contribute/ContentHtml.vue          |  2 +-
 .../Scripts/vuesrc/contribute/ContentImage.vue         |  4 ++--
 .../Scripts/vuesrc/contribute/ContentVideo.vue         |  6 +++---
 .../Scripts/vuesrc/contribute/ContentWeblink.vue       |  6 +++---
 .../Scripts/vuesrc/contribute/GenericFileUploader.vue  |  2 +-
 .../resource/ExtraAssessmentAttemptRequestModal.vue    |  2 +-
 22 files changed, 35 insertions(+), 35 deletions(-)

diff --git a/AdminUI/LearningHub.Nhs.AdminUI/Scripts/vuesrc/ckeditorwithhint.vue b/AdminUI/LearningHub.Nhs.AdminUI/Scripts/vuesrc/ckeditorwithhint.vue
index 824b025cd..b2defb5c2 100644
--- a/AdminUI/LearningHub.Nhs.AdminUI/Scripts/vuesrc/ckeditorwithhint.vue
+++ b/AdminUI/LearningHub.Nhs.AdminUI/Scripts/vuesrc/ckeditorwithhint.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <ckeditor v-model="description" :config="editorConfig" @ready="onEditorReady" @blur="onBlur"></ckeditor>
+        <ckeditor class="nhsuk-textarea" v-model="description" :config="editorConfig" @ready="onEditorReady" @blur="onBlur"></ckeditor>
         <div :class="[`pt-2 footer-text${this.valid ? '' : ' text-danger'}`]">{{ hint }}</div>
     </div>
 </template>
diff --git a/AdminUI/LearningHub.Nhs.AdminUI/Views/Catalogue/CatalogueOwner.cshtml b/AdminUI/LearningHub.Nhs.AdminUI/Views/Catalogue/CatalogueOwner.cshtml
index faa03ac40..09709fd29 100644
--- a/AdminUI/LearningHub.Nhs.AdminUI/Views/Catalogue/CatalogueOwner.cshtml
+++ b/AdminUI/LearningHub.Nhs.AdminUI/Views/Catalogue/CatalogueOwner.cshtml
@@ -47,14 +47,14 @@
             <div class="row mt-5">
                 <div class="col-12">
                     <label>Catalogue owner email address</label>
-                    <input asp-for="OwnerEmailAddress" class="form-control" maxlength="250" />
+                    <input asp-for="OwnerEmailAddress" class="form-control nhsuk-input" maxlength="250" />
                     <span asp-validation-for="OwnerEmailAddress"></span>
                 </div>
             </div>
             <div class="row mt-5">
                 <div class="col-12">
                     <label>Notes</label>
-                    <textarea asp-for="Notes" class="form-control"></textarea>
+                    <textarea asp-for="Notes" class="form-control nhsuk-input"></textarea>
                     <span asp-validation-for="Notes"></span>
                 </div>
             </div>
diff --git a/AdminUI/LearningHub.Nhs.AdminUI/Views/Catalogue/Edit.cshtml b/AdminUI/LearningHub.Nhs.AdminUI/Views/Catalogue/Edit.cshtml
index 75f4cddf2..1d8ab66da 100644
--- a/AdminUI/LearningHub.Nhs.AdminUI/Views/Catalogue/Edit.cshtml
+++ b/AdminUI/LearningHub.Nhs.AdminUI/Views/Catalogue/Edit.cshtml
@@ -137,7 +137,7 @@
         <div class="row mt-5">
             <div class="col-12">
                 <label for="Description">Description</label>
-                <textarea asp-for="Description" class="form-control"></textarea>
+                <textarea asp-for="Description" class="form-control nhsuk-input"></textarea>
                 <small id="with-hint-info" class="pt-2">Only the first 3,000 characters of the description will be used by search</small>
                 <span asp-validation-for="Description"></span>
             </div>
diff --git a/AdminUI/LearningHub.Nhs.AdminUI/Views/Notifications/CreateEdit.cshtml b/AdminUI/LearningHub.Nhs.AdminUI/Views/Notifications/CreateEdit.cshtml
index 327cce4b8..627deb40b 100644
--- a/AdminUI/LearningHub.Nhs.AdminUI/Views/Notifications/CreateEdit.cshtml
+++ b/AdminUI/LearningHub.Nhs.AdminUI/Views/Notifications/CreateEdit.cshtml
@@ -73,7 +73,7 @@
                 </div>
                 <div class="form-group col-12">
                     <label asp-for="Message" class="control-label"></label>
-                    <textarea asp-for="Message" class="form-control" rows="10" required></textarea>
+                    <textarea asp-for="Message" class="form-control nhsuk-input" rows="10" required></textarea>
                     <span asp-validation-for="Message" class="text-danger"></span>
                 </div>
                 <div class="form-group col-lg-3 col-md-6">
diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/catalogue/catalogueaccessrequest.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/catalogue/catalogueaccessrequest.vue
index 89d5bba9d..b178e70f3 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/catalogue/catalogueaccessrequest.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/catalogue/catalogueaccessrequest.vue
@@ -99,7 +99,7 @@
                             <div class="row mt-5">
                                 <div class="col">
                                     <label class="nhsuk-u-visually-hidden" for="rejectionMessage"></label>
-                                    <textarea v-model="rejectionMessage" id="rejectionMessage" class="form-control rejection-message-input" rows="6"></textarea>
+                                    <textarea v-model="rejectionMessage" id="rejectionMessage" class="form-control rejection-message-input nhsuk-textarea" rows="6"></textarea>
                                 </div>
                             </div>
                         </div>
diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeAuthorsTab.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeAuthorsTab.vue
index 7970c5263..dfee1fa07 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeAuthorsTab.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeAuthorsTab.vue
@@ -24,7 +24,7 @@
                             <label class="checkContainer" for="currentUserAuthor">
                                 I am the author or co-author
                                 <input type="checkbox" id="currentUserAuthor" v-model="authorIsContributor" v-on:change="currentUserAuthorChange">
-                                <span class="checkmark"></span>
+                                <span class="checkmark nhsuk-input"></span>
                             </label>
                         </div>
                         <CharacterCount v-model="authorName"
diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeLicenceTab.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeLicenceTab.vue
index 04f60d05d..e75ef63ef 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeLicenceTab.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeLicenceTab.vue
@@ -8,7 +8,7 @@
                     <a v-bind:href="moreInfoLink" class="mb-10 accessible-link" target="_blank">More information on licences</a>
                 </div>
 
-                <select class="form-control" aria-labelledby="licence-heading" id="licence" v-model="resourceDetails.resourceLicenceId">
+                <select class="form-control nhsuk-input" aria-labelledby="licence-heading" id="licence" v-model="resourceDetails.resourceLicenceId">
                     <option disabled v-bind:value="null" id="select">Please choose...</option>
                     <option v-for="licence in licences" :value="licence.id" :id="licence.id">
                         {{licence.title}}
diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/CatalogueSelector.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/CatalogueSelector.vue
index f3354ab8d..217116d4f 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/CatalogueSelector.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/CatalogueSelector.vue
@@ -5,7 +5,7 @@
         <CatalogueSelectorAccordion/>
         
         <div class="form-group">
-            <select class="form-control" aria-labelledby="primary-catalogue-heading" id="catalogue" v-model="selectedCatalogue" @change="catalogueChange">
+            <select class="form-control nhsuk-input" aria-labelledby="primary-catalogue-heading" id="catalogue" v-model="selectedCatalogue" @change="catalogueChange">
                 <option disabled v-bind:value="{ nodeId: 0 }">Please choose...</option>
                 <option v-for="catalogue in userCatalogues" :value="catalogue">
                     {{getCatalogueName(catalogue)}}
diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/KeyWordsEditor.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/KeyWordsEditor.vue
index 9c09b5828..9b32f2d83 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/KeyWordsEditor.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/KeyWordsEditor.vue
@@ -16,7 +16,7 @@
                     To help learners find this resource, type one or more relevant keywords separated by commas and click 'Add'.
                 </div>
                 <div class="col-12 input-with-button">
-                    <input id="newKeyword" aria-labelledby="keyword-label" type="text" class="form-control" maxlength="260" v-model="newKeyword" v-bind:class="{ 'input-validation-error': keywordError }" @input="keywordError=false" @change="keywordChange" />
+                    <input id="newKeyword" aria-labelledby="keyword-label" type="text" class="form-control nhsuk-input" maxlength="260" v-model="newKeyword" v-bind:class="{ 'input-validation-error': keywordError }" @input="keywordError=false" @change="keywordChange" />
                     <button type="button" class="nhsuk-button nhsuk-button--secondary ml-3 button_width nhsuk-u-margin-bottom-0" @click="addKeyword">&nbsp;Add</button>
                 </div>
                 <div class="col-12 footer-text" id="keyword-label">
diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/questions/QuestionBlockCollectionInput.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/questions/QuestionBlockCollectionInput.vue
index 8bd0090b2..b5e4cc6a4 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/questions/QuestionBlockCollectionInput.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/questions/QuestionBlockCollectionInput.vue
@@ -5,7 +5,7 @@
                 <div class="mr-20">
                     <ckeditorwithhint v-if="richText" :initialValue="message" :maxLength="textMaxLength" @change="updateByCkEditor" />
                     <div v-else>
-                        <textarea class="form-control text-input"
+                        <textarea class="form-control text-input nhsuk-textarea"
                                   placeholder="Text input"
                                   rows="4"
                                   :maxlength="textMaxLength"
diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/CatalogueSelect.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/CatalogueSelect.vue
index 1d132cf5f..9b2a854c7 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/CatalogueSelect.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/CatalogueSelect.vue
@@ -36,7 +36,7 @@
 
         <div class="row">
             <div class="form-group col-12">
-                <select class="form-control" aria-labelledby="type-label" id="catalogue" v-model="selectedCatalogue" @change="catalogueChange">
+                <select class="form-control nhsuk-input" aria-labelledby="type-label" id="catalogue" v-model="selectedCatalogue" @change="catalogueChange">
                     <option disabled v-bind:value="{ nodeId: 0 }">Please choose...</option>
                     <option v-for="catalogue in userCatalogues" :value="catalogue">
                         {{getCatalogueName(catalogue)}}
diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/Content.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/Content.vue
index 488594fec..9cbc9227b 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/Content.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/Content.vue
@@ -21,7 +21,7 @@
                             <div class="form-group col-12 mt-5">
                                 <h2 id="title-label" class="nhsuk-heading-l">Title<i v-if="$v.resourceDetailTitle.$invalid" class="warningTriangle fa-solid fa-triangle-exclamation"></i></h2>
                                 <div class="mb-3"><label for="resourceDetail_title">Give your resource a concise, useful title that will make sense to learners.</label></div>
-                                <input type="text" class="form-control" aria-labelledby="title-label" maxlength="255" id="resourceDetail_title" name="resourceDetail_title" v-model="resourceDetailTitle" @change="setTitle($event.target.value)" autocomplete="off" v-bind:disabled="resourceLoading">
+                                <input type="text" class="form-control nhsuk-input" aria-labelledby="title-label" maxlength="255" id="resourceDetail_title" name="resourceDetail_title" v-model="resourceDetailTitle" @change="setTitle($event.target.value)" autocomplete="off" v-bind:disabled="resourceLoading">
                             </div>
                         </div>
                         <div class="row mt-4">
@@ -125,7 +125,7 @@
                                                 </div>
                                                 <div class="p-4 uploadInnerBox mt-4">
                                                     <div class="upload-btn-wrapper nhsuk-u-font-size-16">
-                                                        <label for="fileUpload" class="nhsuk-button nhsuk-button--secondary">Choose file</label> No file chosen
+                                                        <label for="fileUpload" class="nhsuk-button nhsuk-button--secondary" tabindex="0">Choose file</label> No file chosen
                                                         <input hidden type="file" id="fileUpload" aria-label="Choose file" ref="fileUpload" @change="onScormPackageFileChange($event)" />
                                                     </div>
                                                 </div>
@@ -359,7 +359,7 @@
                                                     <div>
                                                         <div class="modal-section-header"><label for="notes">Notes</label></div>
                                                         <p class="mt-1">Provide information to help learners understand why this new version has been created.</p>
-                                                        <textarea class="form-control" id="notes" v-bind:class="{ 'input-validation-error': $v.publishNotes.$invalid && $v.publishNotes.$dirty }" rows="4" maxlength="4000" v-model="publishNotes"></textarea>
+                                                        <textarea class="form-control nhsuk-textarea" id="notes" v-bind:class="{ 'input-validation-error': $v.publishNotes.$invalid && $v.publishNotes.$dirty }" rows="4" maxlength="4000" v-model="publishNotes"></textarea>
                                                         <div class="error-text pt-3" v-if="$v.publishNotes.$invalid && $v.publishNotes.$dirty">
                                                             <span class="text-danger">Enter notes.</span>
                                                         </div>
diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentArticle.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentArticle.vue
index 14b529e10..d84a4e962 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentArticle.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentArticle.vue
@@ -29,7 +29,7 @@
             <div class="form-group col-12">
                 <div class="p-4 uploadInnerBox">
                     <div class="upload-btn-wrapper nhsuk-u-font-size-16">
-                        <label for="articleFileUpload" class="nhsuk-button nhsuk-button--secondary">Choose file</label> No file chosen
+                        <label for="articleFileUpload" class="nhsuk-button nhsuk-button--secondary" tabindex="0">Choose file</label> No file chosen
                         <input type="file" id="articleFileUpload" aria-label="Choose file" ref="articleFileUpload" @change="onArticleFileChange" hidden />
                     </div>
                 </div>
diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentAudio.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentAudio.vue
index 1d8fbc8ab..34fbeef97 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentAudio.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentAudio.vue
@@ -25,7 +25,7 @@
             <div class="form-group col-12">
                 <div class="p-4 uploadInnerBox">
                     <div class="upload-btn-wrapper nhsuk-u-font-size-16">
-                        <label for="transcriptFileUpload" class="nhsuk-button nhsuk-button--secondary">Choose file</label> No file chosen
+                        <label for="transcriptFileUpload" class="nhsuk-button nhsuk-button--secondary" tabindex="0">Choose file</label> No file chosen
                         <input type="file" id="transcriptFileUpload" aria-label="Choose transcript file" ref="transcriptFileUpload" @change="onTranscriptFileChange" hidden />
                     </div>
                 </div>
@@ -43,7 +43,7 @@
                 for example, how it was developed or what is required for it to be used.
             </div>
             <div class="col-12 mt-3">
-                <textarea class="form-control" id="additionalinfo" aria-labelledby="additionalinfo-label" rows="4" maxlength="250" v-model="additionalInformation" @change="setAdditionalInformation($event.target.value)"></textarea>
+                <textarea class="form-control nhsuk-textarea" id="additionalinfo" aria-labelledby="additionalinfo-label" rows="4" maxlength="250" v-model="additionalInformation" @change="setAdditionalInformation($event.target.value)"></textarea>
             </div>
             <div class="col-12 footer-text">
                 You can enter a maximum of 250 characters
diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentCommon.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentCommon.vue
index d670ced15..9e32d9072 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentCommon.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentCommon.vue
@@ -96,7 +96,7 @@
                     To help learners find this resource, type one or more relevant keywords separated by commas and click 'Add'.
                 </div>
                 <div class="col-12 mt-4 input-with-button">
-                    <input id="newKeyword" aria-labelledby="keyword-label" aria-describedby="keyworddesc" type="text" class="form-control" maxlength="260" v-model="newKeyword" v-bind:class="{ 'input-validation-error': keywordError }" @input="keywordError=false" @change="keywordChange" />
+                    <input id="newKeyword" aria-labelledby="keyword-label" aria-describedby="keyworddesc" type="text" class="form-control nhsuk-input" maxlength="260" v-model="newKeyword" v-bind:class="{ 'input-validation-error': keywordError }" @input="keywordError=false" @change="keywordChange" />
                     <button type="button" class="nhsuk-button nhsuk-button--secondary ml-3 nhsuk-u-margin-bottom-0" @click="addKeyword">&nbsp;Add</button>
                 </div>
                 <div class="col-12 footer-text" id="keyword-label">
@@ -126,7 +126,7 @@
             </div>
             <div class="row">
                 <div class="col-12 form-group">
-                    <select id="licenceSelection" aria-labelledby="licence-label" class="form-control" v-model="resourceLicenceId" @change="licenceSelected">
+                    <select id="licenceSelection" aria-labelledby="licence-label" class="form-control nhsuk-input" v-model="resourceLicenceId" @change="licenceSelected">
                         <option disabled v-bind:value="0">Please choose...</option>
                         <option v-for="licence in resourceLicences" :value="licence.id">
                             {{ licence.title }}
@@ -171,7 +171,7 @@
                             <label class="mb-0" for="authorName">Author name</label>
                         </div>
                         <div class="col-12">
-                            <input type="text" id="authorName" name="authorName" class="form-control" aria-describedby="authorNamehint" v-bind:class="{ 'input-validation-error': authorError }" maxlength="100" v-model="authorName" v-bind:disabled="currentUserAuthor" @input="authorError=false" />
+                            <input type="text" id="authorName" name="authorName" class="form-control nhsuk-input" aria-describedby="authorNamehint" v-bind:class="{ 'input-validation-error': authorError }" maxlength="100" v-model="authorName" v-bind:disabled="currentUserAuthor" @input="authorError=false" />
                         </div>
                         <div class="col-12 footer-text" id="authorNamehint">
                             You can enter a maximum of 100 characters
@@ -180,7 +180,7 @@
                             <label class="mb-0" for="authorOganisation">Organisation</label>
                         </div>
                         <div class="col-12">
-                            <input type="text" id="authorOganisation" name="authorOganisation" aria-describedby="authorOganisationhint" class="form-control" v-bind:class="{ 'input-validation-error': authorError }" maxlength="100" v-model="authorOganisation" @input="authorError=false" />
+                            <input type="text" id="authorOganisation" name="authorOganisation" aria-describedby="authorOganisationhint" class="form-control nhsuk-input" v-bind:class="{ 'input-validation-error': authorError }" maxlength="100" v-model="authorOganisation" @input="authorError=false" />
                         </div>
                         <div class="col-12 footer-text" id="authorOganisationhint">
                             You can enter a maximum of 100 characters
@@ -190,7 +190,7 @@
                         <label class="mb-0" for="authorRole">Role <span class="optional">(optional)</span></label>
                     </div>
                     <div class="col-12">
-                        <input type="text" id="authorRole" name="authorRole" class="form-control" maxlength="100" v-model="authorRole" aria-describedby="authorRolehint" />
+                        <input type="text" id="authorRole" name="authorRole" class="form-control nhsuk-input" maxlength="100" v-model="authorRole" aria-describedby="authorRolehint" />
                     </div>
                     <div class="col-12 footer-text" id="authorRolehint">
                         You can enter a maximum of 100 characters
diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentGenericFile.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentGenericFile.vue
index 8b137b756..6f6295c1a 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentGenericFile.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentGenericFile.vue
@@ -71,7 +71,7 @@
                 for example, how it was developed or what is required for it to be used.
             </div>
             <div class="col-12 mt-3">
-                <textarea class="form-control" id="additionalinfo" aria-labelledby="additionalinfo-label" rows="4" maxlength="250" v-model="additionalInformation" @change="setAdditionalInformation($event.target.value)"></textarea>
+                <textarea class="form-control nhsuk-textarea" id="additionalinfo" aria-labelledby="additionalinfo-label" rows="4" maxlength="250" v-model="additionalInformation" @change="setAdditionalInformation($event.target.value)"></textarea>
             </div>
             <div class="col-12 footer-text">
                 You can enter a maximum of 250 characters
diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentHtml.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentHtml.vue
index 9927f4530..64a89e90d 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentHtml.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentHtml.vue
@@ -12,7 +12,7 @@
             <div class="mb-4 uploadBox">
                 <div class="p-4 uploadInnerBox mt-4">
                     <div class="upload-btn-wrapper nhsuk-u-font-size-16">
-                        <label for="fileUpload" class="nhsuk-button nhsuk-button--secondary">Choose file</label> No file chosen
+                        <label for="fileUpload" class="nhsuk-button nhsuk-button--secondary" tabindex="0">Choose file</label> No file chosen
                         <input hidden type="file" id="fileUpload" accept=".zip,.rar,.7zip" aria-label="Choose file" ref="fileUpload" v-on:change="onResourceFileChange" />
                     </div>
                 </div>
diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentImage.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentImage.vue
index c6f2e1043..4b1499a74 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentImage.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentImage.vue
@@ -22,7 +22,7 @@
                 This will not be shown on screen but it will help those using screen readers.
             </div>
             <div class="col-12 mt-3">
-                <textarea class="form-control" id="alttag" name="alttag" aria-labelledby="alttag-label" rows="4" maxlength="125" v-model="localImageDetail.altTag" @change="setProperty('altTag', $event.target.value)" @input="altTextKeyup"></textarea>
+                <textarea class="form-control nhsuk-textarea" id="alttag" name="alttag" aria-labelledby="alttag-label" rows="4" maxlength="125" v-model="localImageDetail.altTag" @change="setProperty('altTag', $event.target.value)" @input="altTextKeyup"></textarea>
             </div>
             <div class="col-12 footer-text">
                 You can enter a maximum of 125 characters
@@ -40,7 +40,7 @@
                 for example, how it was developed or what is required for it to be used.
             </div>
             <div class="col-12 mt-3">
-                <textarea class="form-control" id="additionalinfo" aria-labelledby="additionalinfo-label" rows="4" maxlength="250" v-model="additionalInformation" @change="setAdditionalInformation($event.target.value)"></textarea>
+                <textarea class="form-control nhsuk-textarea" id="additionalinfo" aria-labelledby="additionalinfo-label" rows="4" maxlength="250" v-model="additionalInformation" @change="setAdditionalInformation($event.target.value)"></textarea>
             </div>
             <div class="col-12 footer-text">
                 You can enter a maximum of 250 characters
diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentVideo.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentVideo.vue
index b97de9a86..a7f37cdc2 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentVideo.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentVideo.vue
@@ -25,7 +25,7 @@
             <div class="form-group col-12">
                 <div class="p-4 uploadInnerBox">
                     <div class="upload-btn-wrapper nhsuk-u-font-size-16">
-                        <label for="transcriptFileUpload" class="nhsuk-button nhsuk-button--secondary">Choose file</label> No file chosen
+                        <label for="transcriptFileUpload" class="nhsuk-button nhsuk-button--secondary" tabindex="0">Choose file</label> No file chosen
                         <input type="file" id="transcriptFileUpload" aria-label="Choose transcript file" ref="transcriptFileUpload" @change="onTranscriptFileChange" hidden />
                     </div>
                 </div>
@@ -45,7 +45,7 @@
             <div class="form-group col-12">
                 <div class="p-4 uploadInnerBox">
                     <div class="upload-btn-wrapper nhsuk-u-font-size-16">
-                        <label for="closedCaptionsFileUpload" class="nhsuk-button nhsuk-button--secondary">Choose file</label> No file chosen
+                        <label for="closedCaptionsFileUpload" class="nhsuk-button nhsuk-button--secondary" tabindex="0">Choose file</label> No file chosen
                         <input type="file" id="closedCaptionsFileUpload" aria-label="Choose closed captions file" ref="closedCaptionsFileUpload" @change="onClosedCaptionsFileChange" hidden />
                     </div>
                 </div>
@@ -63,7 +63,7 @@
                 for example, how it was developed or what is required for it to be used.
             </div>
             <div class="col-12 mt-3">
-                <textarea class="form-control" id="additionalinfo" aria-labelledby="additionalinfo-label" rows="4" maxlength="250" v-model="additionalInformation" @change="setAdditionalInformation($event.target.value)"></textarea>
+                <textarea class="form-control nhsuk-textarea" id="additionalinfo" aria-labelledby="additionalinfo-label" rows="4" maxlength="250" v-model="additionalInformation" @change="setAdditionalInformation($event.target.value)"></textarea>
             </div>
             <div class="col-12 footer-text">
                 You can enter a maximum of 250 characters
diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentWeblink.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentWeblink.vue
index ee8c78400..f23eae4b4 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentWeblink.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentWeblink.vue
@@ -10,7 +10,7 @@
                 This can be found in the address bar of your browser, for example, https://www.england.nhs.uk
             </div>
             <div class="col-12 mt-3">
-                <input type="text" id="web-link-text" name="web-link-text" aria-labelledby="web-link-label" aria-describedby="web-link-labelhint" placeholder="https://" class="form-control" v-bind:class="{ 'input-validation-error': (!urlIsAccessible || $v.localWeblinkDetail.url.$invalid) && $v.localWeblinkDetail.url.$dirty }" v-model="localWeblinkDetail.url" @change="setProperty('url', $event.target.value)" @input="urlKeyup" />
+                <input type="text" id="web-link-text" name="web-link-text" aria-labelledby="web-link-label" aria-describedby="web-link-labelhint" placeholder="https://" class="form-control nhsuk-input" v-bind:class="{ 'input-validation-error': (!urlIsAccessible || $v.localWeblinkDetail.url.$invalid) && $v.localWeblinkDetail.url.$dirty }" v-model="localWeblinkDetail.url" @change="setProperty('url', $event.target.value)" @input="urlKeyup" />
             </div>
         </div>
         <div class="error-text pt-3" v-if="!$v.localWeblinkDetail.url.url && $v.localWeblinkDetail.url.$dirty">
@@ -31,7 +31,7 @@
                 you can change the way it is shown to learners so that they understand what it is for, for example, NHS England.
             </div>
             <div class="col-12 mt-3">
-                <input type="text" id="localWeblinkDetaildisplayText" name= "localWeblinkDetaildisplayText" aria-labelledby="text-to-display-label" describedby="localWeblinkDetaildisplayTexthint" class="form-control" maxlength="50" v-model="localWeblinkDetail.displayText" @change="setProperty('displayText', $event.target.value)" />
+                <input type="text" id="localWeblinkDetaildisplayText" name= "localWeblinkDetaildisplayText" aria-labelledby="text-to-display-label" describedby="localWeblinkDetaildisplayTexthint" class="form-control nhsuk-input" maxlength="50" v-model="localWeblinkDetail.displayText" @change="setProperty('displayText', $event.target.value)" />
             </div>
             <div class="col-12 footer-text" id="localWeblinkDetaildisplayTexthint">
                 You can enter a maximum of 50 characters
@@ -49,7 +49,7 @@
                 for example, how it was developed or what is required for it to be used.
             </div>
             <div class="col-12 mt-3">
-                <textarea class="form-control" id="additionalinfo-label" name="additionalinfo-label" aria-labelledby="additionalinfo-label" aria-describedby="additionalinfo-label-hint" rows="4" maxlength="250" v-model="additionalInformation" @change="setAdditionalInformation($event.target.value)"></textarea>
+                <textarea class="form-control nhsuk-textarea" id="additionalinfo-label" name="additionalinfo-label" aria-labelledby="additionalinfo-label" aria-describedby="additionalinfo-label-hint" rows="4" maxlength="250" v-model="additionalInformation" @change="setAdditionalInformation($event.target.value)"></textarea>
             </div>
             <div class="col-12 footer-text" id="additionalinfo-label-hint">
                 You can enter a maximum of 250 characters
diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/GenericFileUploader.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/GenericFileUploader.vue
index 01cab1336..c31e030e5 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/GenericFileUploader.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/GenericFileUploader.vue
@@ -11,7 +11,7 @@
 
             <div class="p-4 uploadInnerBox">
                 <div class="upload-btn-wrapper nhsuk-u-font-size-16">
-                    <label for="fileUpload" class="nhsuk-button nhsuk-button--secondary">Choose file</label> No file chosen
+                    <label for="fileUpload" class="nhsuk-button nhsuk-button--secondary" tabindex="0">Choose file</label> No file chosen
                     <input type="file" id="fileUpload" :accept="fileAccept" aria-label="Choose file" ref="fileUpload" v-on:change="onResourceFileChange" hidden />
                 </div>
             </div>
diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/resource/ExtraAssessmentAttemptRequestModal.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/resource/ExtraAssessmentAttemptRequestModal.vue
index a23ab5a74..1403b36e8 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/resource/ExtraAssessmentAttemptRequestModal.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/resource/ExtraAssessmentAttemptRequestModal.vue
@@ -13,7 +13,7 @@
             <h2 class="font-weight-bold mb-5">Reason for retaking assessment</h2>
             <div class="text-box p-0">
                 <label class="nhsuk-u-visually-hidden" for="reason"></label>
-                <textarea class="form-control" id="reason" placeholder="Add your reason..." rows="4" :maxlength="maxLength" v-model="reason"></textarea>
+                <textarea class="form-control nhsuk-textarea" id="reason" placeholder="Add your reason..." rows="4" :maxlength="maxLength" v-model="reason"></textarea>
                 <div class="characters-count">
                     You have {{ charactersRemaining }} characters remaining
                 </div>