diff --git a/hypha/apply/templates/forms/includes/field.html b/hypha/apply/templates/forms/includes/field.html
index b0dbf0c81795f1e8a525e28d795684257afdf6bb..5b5e3cdfa6c4e8fb4851d1bbd22ea2ec766007c9 100644
--- a/hypha/apply/templates/forms/includes/field.html
+++ b/hypha/apply/templates/forms/includes/field.html
@@ -10,6 +10,14 @@
<span class="form__required">*</span>
{% endif %}
</label>
+ {% elif widget_type == 'checkbox_select_multiple' or widget_type == 'radio_select' %}
+ <fieldset>
+ <legend class="form__question form__question--{{ field_type }} {{ widget_type }}" {% if field.field.required %}required{% endif %}>
+ <span>{{ field.label }}</span>
+ {% if field.field.required %}
+ <span class="form__required">*</span>
+ {% endif %}
+ </legend>
{% else %}
<label for="{{ field.id_for_label }}" class="form__question form__question--{{ field_type }} {{ widget_type }}" {% if field.field.required %}required{% endif %}>
<span>{{ field.label }}</span>
@@ -47,5 +55,8 @@
</div>
{% endif %}
</div>
+ {% if widget_type == 'checkbox_select_multiple' or widget_type == 'radio_select' %}
+ </fieldset>
+ {% endif %}
</div>
{% endwith %}
diff --git a/hypha/static_src/src/javascript/apply/application-form.js b/hypha/static_src/src/javascript/apply/application-form.js
index 12949278f1fb236d90181f8b291ba9a8d10e73b0..477b1c33d26e97a030bb0757d3bd51982cad5983 100644
--- a/hypha/static_src/src/javascript/apply/application-form.js
+++ b/hypha/static_src/src/javascript/apply/application-form.js
@@ -6,6 +6,30 @@
var $application_form = $(this);
var $application_form_button = $application_form.find('button[type="submit"]');
+ // set aria-required attribute true for required fields
+ $application_form.find('input[required]').each(function (index, input_field) {
+ input_field.setAttribute('aria-required', true);
+ });
+
+ // add label_id as aria-describedby to help texts
+ $application_form.find('.form__group').each(function (index, form_group) {
+ var label_id = form_group.querySelector('label').getAttribute('for');
+ if (form_group.querySelector('.form__help')) {
+ form_group.querySelector('.form__help').setAttribute('aria-describedby', label_id);
+ }
+ });
+
+ // set aria-invalid for field with errors
+ var $error_fields = $application_form.find('.form__error');
+ if ($error_fields.length) {
+ // set focus to the first error field
+ $error_fields[0].querySelector('input').focus();
+
+ $error_fields.each(function (index, error_field) {
+ error_field.querySelector('input').setAttribute('aria-invalid', true);
+ });
+ }
+
// Remove the "no javascript" messages
$('.message-no-js').detach();
diff --git a/hypha/static_src/src/sass/apply/components/_form.scss b/hypha/static_src/src/sass/apply/components/_form.scss
index f9ff745a3b103bd2c5156742b8969a747fcd494e..a0c755425f31bd121409b6086ad8452039b921d3 100644
--- a/hypha/static_src/src/sass/apply/components/_form.scss
+++ b/hypha/static_src/src/sass/apply/components/_form.scss
@@ -107,7 +107,7 @@
&--multi_file_field,
&--single_file_field,
&--file_field {
- @include button($color--light-blue, $color--dark-blue);
+ @include button($color--light-blue, $color--darkest-blue);
max-width: 290px;
text-align: center;
background: url('./../../images/upload.svg') $color--light-blue no-repeat 40px center;
@@ -118,7 +118,7 @@
}
&:hover {
- background: url('./../../images/upload.svg') $color--dark-blue no-repeat 40px center;
+ background: url('./../../images/upload.svg') $color--darkest-blue no-repeat 40px center;
.no-js & {
background: none;
@@ -283,6 +283,12 @@
}
&__help-link {
+ a {
+ &:hover {
+ cursor: pointer;
+ color: $color--darkest-blue;
+ }
+ }
}
&__open-icon {
diff --git a/hypha/static_src/src/sass/normalize.scss b/hypha/static_src/src/sass/normalize.scss
index 71efb575a5e9d40aa370a859a9e71bf43047605a..806998fd27f41d7b641db2096fbdee0d61565565 100644
--- a/hypha/static_src/src/sass/normalize.scss
+++ b/hypha/static_src/src/sass/normalize.scss
@@ -4,6 +4,8 @@
/* Document
========================================================================== */
+@import 'apply/abstracts/variables';
+
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
@@ -229,6 +231,9 @@ button:-moz-focusring,
fieldset {
padding: 0.35em 0.75em 0.625em;
+ border-width: 1px;
+ border-style: solid;
+ border-color: $color--mid-grey;
}
/**
diff --git a/hypha/static_src/src/sass/public/components/_form.scss b/hypha/static_src/src/sass/public/components/_form.scss
index 289ec40ff032152006ec3f91e4d47236424a8662..27046ab65d9d6e15b37e9f4f84aef50411378710 100644
--- a/hypha/static_src/src/sass/public/components/_form.scss
+++ b/hypha/static_src/src/sass/public/components/_form.scss
@@ -125,7 +125,7 @@
&--multi_file_field,
&--single_file_field,
&--file_field {
- @include button($color--light-blue, $color--dark-blue);
+ @include button($color--light-blue, $color--darkest-blue);
max-width: 290px;
text-align: center;
background: url('./../../images/upload.svg') $color--light-blue no-repeat 50px center;
@@ -136,7 +136,7 @@
}
&:hover {
- background: url('./../../images/upload.svg') $color--dark-blue no-repeat 50px center;
+ background: url('./../../images/upload.svg') $color--darkest-blue no-repeat 50px center;
.no-js & {
background: none;
@@ -292,6 +292,12 @@
}
&__help-link {
+ a {
+ &:hover {
+ cursor: pointer;
+ color: $color--darkest-blue;
+ }
+ }
}
&__open-icon {
@@ -456,6 +462,10 @@
position: relative;
padding-left: 30px;
cursor: pointer;
+
+ &:hover {
+ font-weight: bold;
+ }
}
[type='radio'] + label::before,
diff --git a/hypha/static_src/src/sass/public/components/_link.scss b/hypha/static_src/src/sass/public/components/_link.scss
index 113be555b4cabb00d6e15ccb675b57e73f6572c8..a0170037ac9715ed02cb1269ef4b08dab702810d 100644
--- a/hypha/static_src/src/sass/public/components/_link.scss
+++ b/hypha/static_src/src/sass/public/components/_link.scss
@@ -6,7 +6,7 @@
}
&--button {
- @include button($color--light-blue, $color--dark-blue);
+ @include button($color--light-blue, $color--darkest-blue);
display: inline-block;
&--narrow {