From 8af820d9a27f21202d3b6f8087e6ba7d515c3dc6 Mon Sep 17 00:00:00 2001 From: Ahonen Mika J Date: Tue, 9 Mar 2021 18:58:42 +0200 Subject: [PATCH 1/5] A validation improved (solid red lines around the text fields in all validated and failed cases). In addition, WCAG 2.1 AA level related global style definition for HTML label tag now applies only to feedback form --- resource/css/styles.css | 10 +++++----- resource/js/docready.js | 8 +++++++- view/feedback.twig | 8 +++++--- 3 files changed, 17 insertions(+), 9 deletions(-) diff --git a/resource/css/styles.css b/resource/css/styles.css index 5ec7f9508..cf3f34017 100644 --- a/resource/css/styles.css +++ b/resource/css/styles.css @@ -5,10 +5,6 @@ li, td > a { font-size: 14px; } -label { - font-weight: normal; -} - h1, .prefLabel, .prefLabelLang, .notation { font-family: 'Fira Sans', sans-serif; font-size: 24px; @@ -777,10 +773,14 @@ span.xl-pref-label > img { /* feedback page ***************************/ -#feedback-fields > .missing-value { +#feedback-fields > p .missing-value { border: 1px solid red; } +#feedback-fields label { + font-weight: normal; +} + #message { height: 150px; } diff --git a/resource/js/docready.js b/resource/js/docready.js index 2300065e3..05f18dc4f 100644 --- a/resource/js/docready.js +++ b/resource/js/docready.js @@ -835,10 +835,12 @@ $(function() { // DOCUMENT READY $("#send-feedback").click(function() { $('#email').removeClass('missing-value'); $('#message').removeClass('missing-value'); + $('#msgsubject').removeClass('missing-value'); var emailMessageVal = $("#message").val(); var emailAddress = $("#email").val(); + var emailSubject = $("#msgsubject").val(); var requiredFields = true; - if (emailAddress !== '' && emailAddress.indexOf('@') === -1) { + if (emailAddress === '' || emailAddress.indexOf('@') === -1) { $("#email").addClass('missing-value'); requiredFields = false; } @@ -846,6 +848,10 @@ $(function() { // DOCUMENT READY $("#message").addClass('missing-value'); requiredFields = false; } + if (emailSubject === '') { + $("#msgsubject").addClass('missing-value'); + requiredFields = false; + } return requiredFields; }); diff --git a/view/feedback.twig b/view/feedback.twig index eb370ff3e..665749f98 100644 --- a/view/feedback.twig +++ b/view/feedback.twig @@ -40,10 +40,12 @@

- + +

+

+ +

- - {{ honeypot.generate('item-description', 'user-captcha')|raw }} From 944cd6b9d64ab68cd2361d5beb09bef2a043d13c Mon Sep 17 00:00:00 2001 From: Ahonen Mika J Date: Wed, 10 Mar 2021 10:33:06 +0200 Subject: [PATCH 2/5] Email removed from the validation --- resource/js/docready.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/resource/js/docready.js b/resource/js/docready.js index 05f18dc4f..1c4490153 100644 --- a/resource/js/docready.js +++ b/resource/js/docready.js @@ -833,17 +833,12 @@ $(function() { // DOCUMENT READY // Some form validation for the feedback form $("#send-feedback").click(function() { - $('#email').removeClass('missing-value'); $('#message').removeClass('missing-value'); $('#msgsubject').removeClass('missing-value'); var emailMessageVal = $("#message").val(); var emailAddress = $("#email").val(); var emailSubject = $("#msgsubject").val(); var requiredFields = true; - if (emailAddress === '' || emailAddress.indexOf('@') === -1) { - $("#email").addClass('missing-value'); - requiredFields = false; - } if (emailMessageVal === '') { $("#message").addClass('missing-value'); requiredFields = false; From f2f34045f65faa04501ea935f27f88225eaa1134 Mon Sep 17 00:00:00 2001 From: Ahonen Mika J Date: Wed, 10 Mar 2021 11:17:55 +0200 Subject: [PATCH 3/5] Removed useless assignment to variable emailAddress in docready.js --- resource/js/docready.js | 1 - 1 file changed, 1 deletion(-) diff --git a/resource/js/docready.js b/resource/js/docready.js index 1c4490153..6c9f90097 100644 --- a/resource/js/docready.js +++ b/resource/js/docready.js @@ -836,7 +836,6 @@ $(function() { // DOCUMENT READY $('#message').removeClass('missing-value'); $('#msgsubject').removeClass('missing-value'); var emailMessageVal = $("#message").val(); - var emailAddress = $("#email").val(); var emailSubject = $("#msgsubject").val(); var requiredFields = true; if (emailMessageVal === '') { From b26b6ac598ecdbc5974f38ae9633514628ecd278 Mon Sep 17 00:00:00 2001 From: Ahonen Mika J Date: Thu, 11 Mar 2021 14:18:52 +0200 Subject: [PATCH 4/5] Property values for #feedback-fields > p .missing-value changed to { border: 2px solid #D95F8A }. Contrast tests for text box with new border style passed (https://contrastchecker.com/). In the feedback form asterisk symbols added for required fields (subject and message) --- resource/css/styles.css | 2 +- view/feedback.twig | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/resource/css/styles.css b/resource/css/styles.css index cf3f34017..5a8a2306e 100644 --- a/resource/css/styles.css +++ b/resource/css/styles.css @@ -774,7 +774,7 @@ span.xl-pref-label > img { /* feedback page ***************************/ #feedback-fields > p .missing-value { - border: 1px solid red; + border: 2px solid #D95F8A; } #feedback-fields label { diff --git a/view/feedback.twig b/view/feedback.twig index 665749f98..378998e68 100644 --- a/view/feedback.twig +++ b/view/feedback.twig @@ -39,11 +39,11 @@

- +

- +

{{ honeypot.generate('item-description', 'user-captcha')|raw }} From 6ae0943e181c74527f7865aa545a409fa6e8af20 Mon Sep 17 00:00:00 2001 From: Ahonen Mika J Date: Thu, 11 Mar 2021 16:35:35 +0200 Subject: [PATCH 5/5] Style for [feedback-fields input placeholder] added -> font-weight: lighter; and font-style: italic; --- resource/css/styles.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/resource/css/styles.css b/resource/css/styles.css index 5a8a2306e..42e5828f4 100644 --- a/resource/css/styles.css +++ b/resource/css/styles.css @@ -781,6 +781,12 @@ span.xl-pref-label > img { font-weight: normal; } +#feedback-fields input::placeholder{ + font-weight: lighter; + font-style: italic; +} + + #message { height: 150px; }