The markup around the GDPR checkbox in the OPAC self registration/update form could be improved to make it more consistent with other form fields.
Created attachment 124322 [details] [review] Bug 28934: Correct markup of GDPR consent in OPAC patron entry This patch makes changes to the markup around the GDPR consent checkbox in the OPAC self-registration / update page to make it more consistent with other form fields on the page. The patch also adds some missing attributes which are required to enable JavaScript validation of the checkbox. To test, apply the patch and rebuild the OPAC CSS (https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client). - Go to Administration -> System preferences and Enable the system preference PatronSelfRegistration. - Set the system preference GDPR_Policy to "Enforce". - Go to the OPAC and click the "Register here" link. - Under the "GDPR consent" heading near the bottom of the page, confirm that the "I agree" checkbox lines up with other form fields on the page, and that the "Required" label lines up below it. - Submit the form without checking the GDPR consent checkbox. - The form should not be submitted, and a "This field is required" message should appear next to the checkbox label.
Created attachment 124441 [details] Issue with GDPR checkbox at smaller widths and with Required field text
Hi Owen, This looks good at larger browser widths and the checkbox and Required text lines up with the rest of the form, but at smaller browser widths the checkbox becomes misaligned, and when the form is submitted without checking the checkbox and the This field is required text appears, some weird interaction happens. I have attached a screenshot illustrating this issue. Cheers, Hayley
Created attachment 124830 [details] [review] Bug 28934: Correct markup of GDPR consent in OPAC patron entry This patch makes changes to the markup around the GDPR consent checkbox in the OPAC self-registration / update page to make it more consistent with other form fields on the page. The patch also adds some missing attributes which are required to enable JavaScript validation of the checkbox. To test, apply the patch and rebuild the OPAC CSS (https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client). - Go to Administration -> System preferences and Enable the system preference PatronSelfRegistration. - Set the system preference GDPR_Policy to "Enforce". - Go to the OPAC and click the "Register here" link. - Under the "GDPR consent" heading near the bottom of the page, confirm that the "I agree" checkbox lines up with other form fields on the page, and that the "Required" label lines up below it. - Submit the form without checking the GDPR consent checkbox. - The form should not be submitted, and a "This field is required" message should appear next to the checkbox label.
Created attachment 124852 [details] [review] Bug 28934: Correct markup of GDPR consent in OPAC patron entry This patch makes changes to the markup around the GDPR consent checkbox in the OPAC self-registration / update page to make it more consistent with other form fields on the page. The patch also adds some missing attributes which are required to enable JavaScript validation of the checkbox. To test, apply the patch and rebuild the OPAC CSS (https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client). - Go to Administration -> System preferences and Enable the system preference PatronSelfRegistration. - Set the system preference GDPR_Policy to "Enforce". - Go to the OPAC and click the "Register here" link. - Under the "GDPR consent" heading near the bottom of the page, confirm that the "I agree" checkbox lines up with other form fields on the page, and that the "Required" label lines up below it. - Submit the form without checking the GDPR consent checkbox. - The form should not be submitted, and a "This field is required" message should appear next to the checkbox label. Signed-off-by: Hayley Pelham <hayleypelham@catalyst.net.nz>
(In reply to Hayley Pelham from comment #5) > Created attachment 124852 [details] [review] [review] > Bug 28934: Correct markup of GDPR consent in OPAC patron entry > > This patch makes changes to the markup around the GDPR consent checkbox > in the OPAC self-registration / update page to make it more consistent > with other form fields on the page. > > The patch also adds some missing attributes which are required to enable > JavaScript validation of the checkbox. > > To test, apply the patch and rebuild the OPAC CSS > (https://wiki.koha-community.org/wiki/ > Working_with_SCSS_in_the_OPAC_and_staff_client). > > - Go to Administration -> System preferences and Enable the system > preference PatronSelfRegistration. > - Set the system preference GDPR_Policy to "Enforce". > - Go to the OPAC and click the "Register here" link. > - Under the "GDPR consent" heading near the bottom of the page, > confirm that the "I agree" checkbox lines up with other form fields on > the page, and that the "Required" label lines up below it. > - Submit the form without checking the GDPR consent checkbox. > - The form should not be submitted, and a "This field is > required" message should appear next to the checkbox label. > > Signed-off-by: Hayley Pelham <hayleypelham@catalyst.net.nz> The alignment is still slightly off with this patch, noticable if you put the cursor to the input box above and then use down arrow to scroll to the checkbox. Also, I would prefer we would use consistent way to show the fields, i.e. always label and then the input form, this would make the alignment perfect as well. The gender field has also the same problem. I could send a patch to fix both of them.
Created attachment 125032 [details] [review] Bug 28934: Make the OPAC registration form design consistent The gender/sex and GDPR inputs were slightly misaligned (by 1.5em). Now they are aligned with the other inputs which have a width of 10em (9em width + margin 1em). The label assignments and required attributes for input elements are made also consistent. To test: 1) Enable GDPR_Policy syspref 2) Apply patch, run "yarn build --view opac", restart plack 3) Go to /cgi-bin/koha/opac-memberentry.pl 3) Check that the GDPR input box shows the required text now in red color 3) Check that the alignment of sex/gender and GDPR input matches with the other inputs perfectly.
Hi Joonas, The alignment is much closer to the other form elements now, which is great. However, if all required fields are completed except the GDPR checkbox, we don't get the 'This field is required' text and highlighting like we do for other elements. Should this be present? Cheers, Hayley
(In reply to Hayley Pelham from comment #8) > Hi Joonas, > > The alignment is much closer to the other form elements now, which is great. > > However, if all required fields are completed except the GDPR checkbox, we > don't get the 'This field is required' text and highlighting like we do for > other elements. > > Should this be present? It should be. I will revise this.
Created attachment 125117 [details] [review] Bug 28934: Make the OPAC registration form design consistent The gender/sex and GDPR inputs were slightly misaligned (by 1.5em). Now they are aligned with the other inputs which have a width of 10em (9em width + margin 1em). The label assignments and required attributes for input elements are made also consistent. To test: 1) Enable GDPR_Policy syspref 2) Apply patch, run "yarn build --view opac", restart plack 3) Go to /cgi-bin/koha/opac-memberentry.pl 4) Check that the GDPR input box shows the required text now in red color 5) Check that the alignment of sex/gender and GDPR input matches with the other inputs perfectly.
(In reply to Joonas Kylmälä from comment #9) > However, if all required fields are completed except the GDPR checkbox, we > > don't get the 'This field is required' text and highlighting like we do for > > other elements. > > > > Should this be present? > > It should be. I will revise this. Done.
Created attachment 125123 [details] [review] Bug 28934: Make the OPAC registration form design consistent The gender/sex and GDPR inputs were slightly misaligned (by 1.5em). Now they are aligned with the other inputs which have a width of 10em (9em width + margin 1em). The label assignments and required attributes for input elements are made also consistent. To test: 1) Enable GDPR_Policy syspref 2) Apply patch, run "yarn build --view opac", restart plack 3) Go to /cgi-bin/koha/opac-memberentry.pl 4) Check that the GDPR input box shows the required text now in red color 5) Check that the alignment of sex/gender and GDPR input matches with the other inputs perfectly. Signed-off-by: Hayley Pelham <hayleypelham@catalyst.net.nz>
Created attachment 125334 [details] [review] Bug 28934: Make the OPAC registration form design consistent The gender/sex and GDPR inputs were slightly misaligned (by 1.5em). Now they are aligned with the other inputs which have a width of 10em (9em width + margin 1em). The label assignments and required attributes for input elements are made also consistent. To test: 1) Enable GDPR_Policy syspref 2) Apply patch, run "yarn build --view opac", restart plack 3) Go to /cgi-bin/koha/opac-memberentry.pl 4) Check that the GDPR input box shows the required text now in red color 5) Check that the alignment of sex/gender and GDPR input matches with the other inputs perfectly. Signed-off-by: Hayley Pelham <hayleypelham@catalyst.net.nz> Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Pushed to master for 21.11, thanks to everybody involved!
Pushed to 21.05.x for 21.05.05
Does not apply in 20.11.x, maybe another dependancy