Skip to content

Commit d47a72b

Browse files
swapnamol-abrahamswapnamol-abraham
committed
TD-5142 - Accessbility issues on contribution screen
1 parent 19af23d commit d47a72b

16 files changed

+243
-62
lines changed

‎LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeAuthorsTab.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
<div class="mt-5" v-if="!isCurrentUserSavedAsAuthor">
2424
<label class="checkContainer" for="currentUserAuthor">
2525
I am the author or co-author
26-
<input type="checkbox" id="currentUserAuthor" v-model="authorIsContributor" v-on:change="currentUserAuthorChange">
26+
<input type="checkbox" id="currentUserAuthor" class="nhsuk-checkboxes__input" v-model="authorIsContributor" v-on:change="currentUserAuthorChange">
2727
<span class="checkmark nhsuk-input"></span>
2828
</label>
2929
</div>

‎LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeCaseResourceAccessTab.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,14 @@
1515
<div class="row">
1616
<label class="checkContainer ml-3">
1717
<span class="my-auto">Make this resource available to everyone within the Learning Hub community.</span>
18-
<input type="radio" name="resourceAccessibilityEnum" v-model="resourceDetails.resourceAccessibilityEnum" v-bind:value="2"/>
18+
<input type="radio" class="nhsuk-radios__input" name="resourceAccessibilityEnum" v-model="resourceDetails.resourceAccessibilityEnum" v-bind:value="2"/>
1919
<span class="radioButton"></span>
2020
</label>
2121
</div>
2222
<div class="row">
2323
<label class="checkContainer ml-3">
2424
<span class="my-auto">Make this resource available only to the NHS and Social care workforce community.</span>
25-
<input type="radio" name="resourceAccessibilityEnum" v-model="resourceDetails.resourceAccessibilityEnum" v-bind:value="3"/>
25+
<input type="radio" class="nhsuk-radios__input" name="resourceAccessibilityEnum" v-model="resourceDetails.resourceAccessibilityEnum" v-bind:value="3"/>
2626
<span class="radioButton"></span>
2727
</label>
2828
</div>

‎LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeCertificateTab.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,12 @@
77
<div class="mb-10">
88
<label class="checkContainer mr-0">
99
<span>Yes</span>
10-
<input type="radio" name="resourceCertificateRadio" value="true" v-model="resourceDetails.certificateEnabled" @click="certificateEnabledChange($event.target.value)" />
10+
<input type="radio" name="resourceCertificateRadio" class="nhsuk-radios__input" value="true" v-model="resourceDetails.certificateEnabled" @click="certificateEnabledChange($event.target.value)" />
1111
<span class="radioButton"></span>
1212
</label>
1313
<label class="checkContainer mr-0">
1414
<span>No</span>
15-
<input type="radio" name="resourceCertificateRadio" value="false" v-model="resourceDetails.certificateEnabled" @click="certificateEnabledChange($event.target.value)" checked/>
15+
<input type="radio" name="resourceCertificateRadio" class="nhsuk-radios__input" value="false" v-model="resourceDetails.certificateEnabled" @click="certificateEnabledChange($event.target.value)" checked/>
1616
<span class="radioButton"></span>
1717
</label>
1818
</div>

‎LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeProvideByTab.vue‎

Lines changed: 51 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<span class="span-provider nhsuk-u-font-weight-normal">Not applicable</span>
1010
<div v-for="provider in userProviders">
1111
<label class="my-0 span-provider nhsuk-u-font-weight-normal">
12-
<input class="radio-button" name="resourceProviderId" type="radio" :value="provider.id" v-model="resourceProviderId" @click="setResourceProvider($event.target.value)" />
12+
<input class="radio-button" name="resourceProviderId" type="radio" :value="provider.id" v-model="resourceProviderId" @click="setResourceProvider($event.target.value)" />
1313
{{provider.name}}
1414
</label>
1515
<br />
@@ -19,10 +19,14 @@
1919
<div class="row my-2">
2020
<div class="accordion col-12" id="provided-by-info-accordion">
2121
<div class="pt-0 pb-4">
22+
2223
<div class="heading" id="headingProvidedBy">
2324
<div class="mb-0">
24-
<a href="#" class="collapsed" data-toggle="collapse" data-target="#collapseProvidedByInfo" aria-expanded="false" aria-controls="collapseProvidedByInfo">
25-
<div class="accordion-arrow">Why should I flag a resource as 'Developed with'</div>
25+
<a href="#" class="collapsed text-decoration-skip" style="color:#005EB8;" data-toggle="collapse" data-target="#collapseProvidedByInfo" aria-expanded="false" aria-controls="collapseProvidedByInfo">
26+
<div class="accordion-arrow"></div>
27+
<span class="pl-3">
28+
Why should I flag a resource as 'Developed with''
29+
</span>
2630
</a>
2731
</div>
2832
</div>
@@ -107,4 +111,48 @@
107111
font-family: $font-stack !important;
108112
font-size: 19px !important;
109113
}
114+
/*Add a background color to the radio button when focused */
115+
.radio-button:focus {
116+
box-shadow: 0 0 0 4px $nhsuk-yellow !important;
117+
outline: 0;
118+
//box-shadow: 0 0 0 4px rgba(255, 255, 0, 0.5);
119+
}
120+
121+
.radio-button {
122+
appearance: none;
123+
-webkit-appearance: none;
124+
width: 24px;
125+
height: 24px;
126+
border: 2px solid black;
127+
border-radius: 50%;
128+
position: relative;
129+
cursor: pointer;
130+
transition: box-shadow 0.3s;
131+
outline: none;
132+
filter: grayscale(0) !important;
133+
}
134+
135+
/* Yellow glow on focus */
136+
.radio-button:focus {
137+
box-shadow: 0 0 0 4px $nhsuk-yellow; /* yellow circle */
138+
}
139+
140+
/* Inner black dot when selected */
141+
.radio-button:checked::before {
142+
content: "";
143+
position: absolute;
144+
top: 4px;
145+
left: 4px;
146+
width: 12px;
147+
height: 12px;
148+
background-color: black;
149+
border-radius: 50%;
150+
}
151+
152+
label {
153+
display: inline-flex;
154+
align-items: center;
155+
gap: 5px; /* space between radio and text */
156+
margin: 7px;
157+
}
110158
</style>

‎LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/CatalogueSelectorAccordion.vue‎

Lines changed: 30 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,35 @@
11
<template>
2-
<details>
3-
<summary class="mb-10">
4-
More information on catalogues
5-
</summary>
6-
<div class="catalogue-selector-accordion-content">
7-
<p>
8-
A catalogue is a curated set of resources that has its own web page.
9-
</p>
10-
<p>
11-
You can contribute a resource as an editor of a catalogue or in your own name.
12-
To contribute a resource in your own name, select Community contributions from the drop down menu.
13-
</p>
14-
<p>
15-
You can manage all resources that you have contributed in the My contributions area.
16-
</p>
2+
<div class="row my-2">
3+
<div class="accordion col-12" id="cat-accordion">
4+
<div class="pt-0 pb-4">
5+
6+
<div class="heading" id="accessibilityTypeInfo">
7+
<div class="mb-0">
8+
<a href="#" class="collapsed text-decoration-skip" style="color:#005EB8;" data-toggle="collapse" data-target="#collapseAccessibilityTypeInfo" aria-expanded="false" aria-controls="collapseAccessibilityTypeInfo">
9+
<div class="accordion-arrow"></div>
10+
<span class="pl-3">
11+
More information on catalogues
12+
</span>
13+
</a>
14+
</div>
15+
</div>
16+
<div id="collapseAccessibilityTypeInfo" class="collapse" aria-labelledby="accessibilityTypeInfo" data-parent="#cat-accordion">
17+
<div class="content col-12">
18+
<p>
19+
A catalogue is a curated set of resources that has its own web page.
20+
</p>
21+
<p>
22+
You can contribute a resource as an editor of a catalogue or in your own name.
23+
To contribute a resource in your own name, select Community contributions from the drop down menu.
24+
</p>
25+
<p>
26+
You can manage all resources that you have contributed in the My contributions area.
27+
</p>
28+
</div>
29+
</div>
30+
</div>
1731
</div>
18-
</details>
32+
</div>
1933
</template>
2034

2135
<script lang="ts">

‎LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/SensitiveContentTickBox.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
<div class="mt-3">
1414
<label class="checkContainer mb-0" for="sensitivecontent">
1515
Yes
16-
<input type="checkbox" id="sensitivecontent" v-model="resourceDetails.sensitiveContent">
16+
<input type="checkbox" id="sensitivecontent" class="nhsuk-checkboxes__input" v-model="resourceDetails.sensitiveContent">
1717
<span class="checkmark"></span>
1818
</label>
1919
</div>

‎LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/CatalogueSelect.vue‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,18 @@
99
<div class="row my-2">
1010
<div class="accordion col-12" id="cat-accordion">
1111
<div class="pt-0 pb-4">
12-
<div class="heading" id="headingCat">
12+
13+
<div class="heading" id="accessibilityTypeInfo">
1314
<div class="mb-0">
14-
<a href="#" class="collapsed" data-toggle="collapse" data-target="#collapseCat" aria-expanded="false" aria-controls="collapseCat">
15-
<div class="accordion-arrow">More information on catalogues</div>
15+
<a href="#" class="collapsed text-decoration-skip" style="color:#005EB8;" data-toggle="collapse" data-target="#collapseAccessibilityTypeInfo" aria-expanded="false" aria-controls="collapseAccessibilityTypeInfo">
16+
<div class="accordion-arrow"></div>
17+
<span class="pl-3">
18+
More information on catalogues
19+
</span>
1620
</a>
1721
</div>
1822
</div>
19-
<div id="collapseCat" class="collapse" aria-labelledby="headingCat" data-parent="#cat-accordion">
23+
<div id="collapseAccessibilityTypeInfo" class="collapse" aria-labelledby="accessibilityTypeInfo" data-parent="#cat-accordion">
2024
<div class="content col-12">
2125
<p>
2226
A catalogue is a curated set of resources that has its own web page.
@@ -33,7 +37,6 @@
3337
</div>
3438
</div>
3539
</div>
36-
3740
<div class="row">
3841
<div class="form-group col-12">
3942
<select class="form-control nhsuk-input" aria-labelledby="type-label" id="catalogue" v-model="selectedCatalogue" @change="catalogueChange">

‎LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/Content.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1168,7 +1168,6 @@
11681168
})
11691169
11701170
</script>
1171-
11721171
<style lang="scss" scoped>
11731172
.resource-area-body-file-upload {
11741173
min-height: auto !important;
@@ -1181,4 +1180,5 @@
11811180
.password-div-width{
11821181
max-width:70% !important;
11831182
}
1183+
11841184
</style>

‎LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentAccess.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,14 @@
1313
<div class="row">
1414
<label class="checkContainer ml-3">
1515
<span class="my-auto">Make this resource available to everyone within the Learning Hub community.</span>
16-
<input type="radio" name="resourceAccessibilityEnum" v-model="localResourceDetail.resourceAccessibilityEnum" v-bind:value="2" @click="setProperty($event.target.name, $event.target.value)" />
16+
<input type="radio" class="nhsuk-radios__input" name="resourceAccessibilityEnum" v-model="localResourceDetail.resourceAccessibilityEnum" v-bind:value="2" @click="setProperty($event.target.name, $event.target.value)" />
1717
<span class="radioButton"></span>
1818
</label>
1919
</div>
2020
<div class="row">
2121
<label class="checkContainer ml-3">
2222
<span class="my-auto">Make this resource available only to the NHS and Social care workforce community.</span>
23-
<input type="radio" name="resourceAccessibilityEnum" v-model="localResourceDetail.resourceAccessibilityEnum" v-bind:value="3" @click="setProperty($event.target.name, $event.target.value)" checked />
23+
<input type="radio" class="nhsuk-radios__input" name="resourceAccessibilityEnum" v-model="localResourceDetail.resourceAccessibilityEnum" v-bind:value="3" @click="setProperty($event.target.name, $event.target.value)" checked />
2424
<span class="radioButton"></span>
2525
</label>
2626
</div>
@@ -148,5 +148,5 @@
148148
left: 4px;
149149
width: 12px;
150150
height: 12px;
151-
}
151+
}
152152
</style>

‎LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentCommon.vue‎

Lines changed: 58 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -25,11 +25,16 @@
2525
<div class="pt-0 pb-4">
2626
<div class="heading" id="headingProvidedBy">
2727
<div class="mb-0">
28-
<a href="#" class="collapsed" data-toggle="collapse" data-target="#collapseProvidedByInfo" aria-expanded="false" aria-controls="collapseProvidedByInfo">
29-
<div class="accordion-arrow">Why should I flag a resource as 'Developed with'</div>
28+
<a href="#" class="collapsed text-decoration-skip" style="color:#005EB8;" data-toggle="collapse" data-target="#collapseProvidedByInfo" aria-expanded="false" aria-controls="collapseProvidedByInfo">
29+
<div class="accordion-arrow"></div>
30+
<span class="pl-3">
31+
Why should I flag a resource as 'Developed with'
32+
</span>
3033
</a>
3134
</div>
3235
</div>
36+
37+
3338
<div id="collapseProvidedByInfo" class="collapse" aria-labelledby="headingProvidedBy" data-parent="#provided-by-info-accordion">
3439
<div class="content col-12">
3540
<p>
@@ -68,7 +73,7 @@
6873
<div class="mt-3">
6974
<label class="checkContainer mb-0" for="sensitivecontent">
7075
Yes
71-
<input type="checkbox" id="sensitivecontent" v-model="sensitiveContent" @click="setSensitiveContent($event.target.checked)">
76+
<input type="checkbox" id="sensitivecontent" class="nhsuk-checkboxes__input" v-model="sensitiveContent" @click="setSensitiveContent($event.target.checked)">
7277
<span class="checkmark"></span>
7378
</label>
7479
</div>
@@ -153,7 +158,7 @@
153158
<div>
154159
<label class="checkContainer" for="currentUserAuthor">
155160
I am the author or co-author
156-
<input type="checkbox" id="currentUserAuthor" v-model="currentUserAuthor" @change="currentUserAuthorChange">
161+
<input type="checkbox" class="nhsuk-checkboxes__input" id="currentUserAuthor" v-model="currentUserAuthor" @change="currentUserAuthorChange">
157162
<span class="checkmark"></span>
158163
</label>
159164
</div>
@@ -223,12 +228,12 @@
223228
<div class="mb-10">
224229
<label class="checkContainer mr-0">
225230
<span>Yes</span>
226-
<input type="radio" name="resourceCertificateRadio" value="true" v-model="certificateEnabled" @click="certificateEnabledChange($event.target.value)" />
231+
<input type="radio" name="resourceCertificateRadio" class="nhsuk-radios__input" value="true" v-model="certificateEnabled" @click="certificateEnabledChange($event.target.value)" />
227232
<span class="radioButton"></span>
228233
</label>
229234
<label class="checkContainer mr-0">
230235
<span>No</span>
231-
<input type="radio" name="resourceCertificateRadio" value="false" v-model="certificateEnabled" @click="certificateEnabledChange($event.target.value)" />
236+
<input type="radio" name="resourceCertificateRadio" class="nhsuk-radios__input" value="false" v-model="certificateEnabled" @click="certificateEnabledChange($event.target.value)" />
232237
<span class="radioButton"></span>
233238
</label>
234239
</div>
@@ -597,3 +602,50 @@
597602
})
598603
599604
</script>
605+
606+
<style lang="scss" scoped>
607+
@use "../../../Styles/abstracts/all" as *;
608+
609+
/*Add a background color to the radio button when focused */
610+
.radio-button:focus {
611+
box-shadow: 0 0 0 4px $nhsuk-yellow !important;
612+
outline: 0;
613+
//box-shadow: 0 0 0 4px rgba(255, 255, 0, 0.5);
614+
}
615+
.radio-button {
616+
appearance: none;
617+
-webkit-appearance: none;
618+
width: 24px;
619+
height: 24px;
620+
border: 2px solid black;
621+
border-radius: 50%;
622+
position: relative;
623+
cursor: pointer;
624+
transition: box-shadow 0.3s;
625+
outline: none;
626+
}
627+
628+
/* Yellow glow on focus */
629+
.radio-button:focus {
630+
box-shadow: 0 0 0 4px $nhsuk-yellow; /* yellow circle */
631+
}
632+
633+
/* Inner black dot when selected */
634+
.radio-button:checked::before {
635+
content: "";
636+
position: absolute;
637+
top: 4px;
638+
left: 4px;
639+
width: 12px;
640+
height: 12px;
641+
background-color: black;
642+
border-radius: 50%;
643+
}
644+
label {
645+
display: inline-flex;
646+
align-items: center;
647+
gap: 5px; /* space between radio and text */
648+
margin: 7px;
649+
}
650+
651+
</style>

0 commit comments

Comments
 (0)