diff options
31 files changed, 101 insertions, 67 deletions
diff --git a/CHANGELOG.md b/CHANGELOG.md index 3b9dd2caf..f727686f3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,7 @@ - Show message on reports closed to updates. - Only display last 6 months of reports on around page by default #2098 - Always show all reports by default on /my. + - Much less reliance on input placeholders, for better accessibility #2180 - Admin improvements: - Mandatory defect type selection if defect raised. - Send login email button on user edit page #2041 diff --git a/templates/web/base/alert/index.html b/templates/web/base/alert/index.html index 1442e6bdc..ca1b26e60 100644 --- a/templates/web/base/alert/index.html +++ b/templates/web/base/alert/index.html @@ -30,8 +30,10 @@ within a certain distance of a particular location.', "%s is the site name"), si </p> <form method="get" action="/alert/list" class="form-box js-geolocate"> <fieldset> + <label for="pc">[% loc('Postcode or street name and area') %]</label> + <p class="form-hint" id="pc-hint">[% tprintf(loc('e.g. ‘%s’ or ‘%s’'), c.cobrand.example_places) %]</p> <div class="form-txt-submit-box"> - <input class="form-control" type="text" name="pc" value="[% pc | html %]" placeholder="[% tprintf(loc('e.g. ‘%s’ or ‘%s’'), c.cobrand.example_places) %]"> + <input class="form-control" type="text" name="pc" value="[% pc | html %]" aria-describedby="pc-hint"> <input class="green-btn" type="submit" value="[% loc('Go') %]"> </div> </fieldset> diff --git a/templates/web/base/alert/updates.html b/templates/web/base/alert/updates.html index 82e99d49a..a77f8d0f9 100644 --- a/templates/web/base/alert/updates.html +++ b/templates/web/base/alert/updates.html @@ -19,7 +19,7 @@ <label class="hidden n" for="alert_rznvy">[% loc('Your email') %]</label> <div class="form-txt-submit-box"> - <input class="form-control" type="email" name="rznvy" id="alert_rznvy" value="[% email | html %]" placeholder="[% loc('Your email') %]"> + <input class="form-control" type="email" name="rznvy" id="alert_rznvy" value="[% email | html %]"> <input class="green-btn" type="submit" value="[% loc('Subscribe') %]"> </div> diff --git a/templates/web/base/around/postcode_form.html b/templates/web/base/around/postcode_form.html index 1293028d0..ca82f3388 100644 --- a/templates/web/base/around/postcode_form.html +++ b/templates/web/base/around/postcode_form.html @@ -10,8 +10,9 @@ <form action="[% c.uri_for('/around') %]" method="get" name="postcodeForm" id="postcodeForm" class="js-geolocate"> <label for="pc">[% question %]:</label> + <p class="form-hint" id="pc-hint">[% tprintf(loc('e.g. ‘%s’ or ‘%s’'), c.cobrand.example_places) %]</p> <div> - <input type="text" name="pc" value="[% pc | html %]" id="pc" size="10" maxlength="200" placeholder="[% tprintf(loc('e.g. ‘%s’ or ‘%s’'), c.cobrand.example_places) %]" required> + <input type="text" name="pc" value="[% pc | html %]" id="pc" size="10" maxlength="200" required aria-describedby="pc-hint"> <input type="submit" value="[% loc('Go') %]" id="sub"> </div> diff --git a/templates/web/base/auth/general.html b/templates/web/base/auth/general.html index 1e44bb68e..4dbdb179f 100644 --- a/templates/web/base/auth/general.html +++ b/templates/web/base/auth/general.html @@ -80,10 +80,10 @@ <div id="form_sign_in_yes" class="form-box"> <h5>[% loc('<strong>Yes</strong> I have a password') %]</h5> - <label class="hidden-js n" for="password_sign_in">[% loc('Password:') %]</label> + <label for="password_sign_in">[% loc('Your password') %]</label> <div class="form-txt-submit-box"> - <input type="password" name="password_sign_in" class="form-control" id="password_sign_in" value="" placeholder="[% loc('Your password') %]"> + <input type="password" name="password_sign_in" class="form-control" id="password_sign_in" value=""> <input class="green-btn" type="submit" name="sign_in_by_password" value="[% loc('Sign in') %]"> </div> @@ -112,8 +112,8 @@ <h5>[% loc('<strong>No</strong> let me sign in by email') %]</h5> [% END %] - <label for="name">[% loc('Name') %]</label> - <input class="form-control" type="text" name="name" value="" placeholder="[% loc('Your name') %]"> + <label for="name">[% loc('Your name') %]</label> + <input class="form-control" type="text" name="name" value=""> <label for="password_register">[% loc('Password (optional)') %]</label> [% IF field_errors.password_register %] @@ -125,7 +125,7 @@ </div> <div class="form-txt-submit-box"> - <input class="form-control js-password-validate" type="password" name="password_register" id="password_register" value="" placeholder="[% loc('Enter a password') %]"> + <input class="form-control js-password-validate" type="password" name="password_register" id="password_register" value=""> <input class="green-btn" type="submit" name="sign_in_by_code" value="[% loc('Sign in') %]"> </div> diff --git a/templates/web/base/questionnaire/index.html b/templates/web/base/questionnaire/index.html index 4305f05c9..4b6ce82f9 100644 --- a/templates/web/base/questionnaire/index.html +++ b/templates/web/base/questionnaire/index.html @@ -70,7 +70,7 @@ <p>3. [% loc('If you wish to leave a public update on the problem, please enter it here (please note it will not be sent to the council).') %]</p> -<p><textarea class="form-control" name="update" rows="7" cols="30" placeholder="[% loc('What was your experience of getting the problem fixed?') %]">[% update | html %]</textarea></p> +<p><textarea class="form-control" name="update" rows="7" cols="30">[% update | html %]</textarea></p> [% IF c.cobrand.allow_photo_upload %] <input type="hidden" name="upload_fileid" value="[% upload_fileid %]"> diff --git a/templates/web/base/report/_inspect.html b/templates/web/base/report/_inspect.html index 252fde5ea..adb56190d 100644 --- a/templates/web/base/report/_inspect.html +++ b/templates/web/base/report/_inspect.html @@ -162,9 +162,14 @@ </select> </p> <p> - <label for="detailed_information">[% loc('Extra details') %]</label> <span id="detailed_information_length"></span> + <label for="detailed_information">[% loc('Extra details') %]</label> + [% IF max_detailed_info_length %] + <span id="detailed_information_length"> + [% tprintf(loc('%d characters maximum'), max_detailed_info_length) %] + </span> + [% END %] <textarea rows="2" name="detailed_information" id="detailed_information" class="form-control" - [% IF max_detailed_info_length %]data-max-length="[% max_detailed_info_length %]" placeholder="[% tprintf(loc('%d characters maximum'), max_detailed_info_length) %]"[% END %]>[% problem.get_extra_metadata('detailed_information') | html %]</textarea> + [% IF max_detailed_info_length %]data-max-length="[% max_detailed_info_length %]"[% END %]>[% problem.get_extra_metadata('detailed_information') | html %]</textarea> </p> [% END %] diff --git a/templates/web/base/report/_main.html b/templates/web/base/report/_main.html index 25bbd4c33..fe0fe74d5 100644 --- a/templates/web/base/report/_main.html +++ b/templates/web/base/report/_main.html @@ -106,8 +106,8 @@ </label> </p> <p> - <label for="moderation_reason">[% loc('Moderation reason:') %]</label> - <input type="text" class="form-control" name="moderation_reason" placeholder="[% loc('Describe why you are moderating this') %]"> + <label for="moderation_reason">[% loc('Describe why you are moderating this') %]</label> + <input type="text" class="form-control" name="moderation_reason"> </p> <p> <input type="submit" class="green-btn" value="[% loc('Save changes') %]"> diff --git a/templates/web/base/report/display_tools.html b/templates/web/base/report/display_tools.html index e0d8e3f99..eaf45fdf3 100644 --- a/templates/web/base/report/display_tools.html +++ b/templates/web/base/report/display_tools.html @@ -43,10 +43,10 @@ </a> [% loc('Receive email when updates are left on this problem.' ) %]</p> <fieldset> - <label class="hidden n" for="alert_rznvy">[% loc('Your email') %]</label> + <label for="alert_rznvy">[% loc('Your email') %]</label> <div class="form-txt-submit-box"> [% IF NOT c.user_exists %] - <input type="email" class="form-control" name="rznvy" id="alert_rznvy" value="[% email | html %]" size="30" placeholder="[% loc('Your email') %]"> + <input type="email" class="form-control" name="rznvy" id="alert_rznvy" value="[% email | html %]" size="30"> [% END %] <input class="green-btn" type="submit" value="[% loc('Subscribe') %]"> </div> diff --git a/templates/web/base/report/new/form_report.html b/templates/web/base/report/new/form_report.html index d6efac423..9526b677c 100644 --- a/templates/web/base/report/new/form_report.html +++ b/templates/web/base/report/new/form_report.html @@ -49,12 +49,13 @@ [% TRY %][% PROCESS 'report/new/after_photo.html' %][% CATCH file %][% END %] [% DEFAULT form_detail_label = loc('Explain what’s wrong') %] + [% DEFAULT form_detail_placeholder = loc('e.g. ‘This pothole has been here for two months and…’') %] <label for="form_detail">[% form_detail_label %]</label> + <p class="form-hint" id="detail-hint">[% form_detail_placeholder %]</p> [% IF field_errors.detail %] <p class='form-error'>[% field_errors.detail %]</p> [% END %] - [% DEFAULT form_detail_placeholder = loc('This pothole has been here for two months and…') %] - <textarea class="form-control" rows="7" cols="26" name="detail" id="form_detail" placeholder="[% form_detail_placeholder %]" required>[% report.detail | html %]</textarea> + <textarea class="form-control" rows="7" cols="26" name="detail" id="form_detail" aria-describedby="detail-hint" required>[% report.detail | html %]</textarea> [% TRY %][% PROCESS 'report/new/inline-tips.html' %][% CATCH file %][% END %] diff --git a/templates/web/base/report/new/form_title.html b/templates/web/base/report/new/form_title.html index 88996fd3f..b436092d8 100644 --- a/templates/web/base/report/new/form_title.html +++ b/templates/web/base/report/new/form_title.html @@ -1,7 +1,8 @@ [% DEFAULT form_title = loc('Summarise the problem') %] +[% DEFAULT form_title_placeholder = loc('e.g. ‘10 inch pothole on Example St, near post box’') %] <label for="form_title">[% form_title %]</label> +<p class="form-hint" id="title-hint">[% form_title_placeholder %]</p> [% IF field_errors.title %] <p class='form-error'>[% field_errors.title %]</p> [% END %] -[% DEFAULT form_title_placeholder = loc('10 inch pothole on Example St, near post box') %] -<input class="form-control" type="text" value="[% report.title | html %]" name="title" id="form_title" placeholder="[% form_title_placeholder %]" required> +<input class="form-control" type="text" value="[% report.title | html %]" name="title" id="form_title" aria-describedby="title-hint" required> diff --git a/templates/web/base/report/new/form_user_loggedout_by_email.html b/templates/web/base/report/new/form_user_loggedout_by_email.html index 7bf1f5fdd..7ede54cd1 100644 --- a/templates/web/base/report/new/form_user_loggedout_by_email.html +++ b/templates/web/base/report/new/form_user_loggedout_by_email.html @@ -25,12 +25,12 @@ [% IF field_errors.password_register %] <p class='form-error'>[% field_errors.password_register %]</p> [% END %] - <div class="general-notes form-focus-hidden"> + <div class="general-notes form-focus-hidden" id="password_register_hint"> <p>[% loc('Providing a password is optional, but doing so will allow you to more easily report problems, leave updates and manage your reports.') %]</p> </div> <div class="form-txt-submit-box form-focus-hidden"> - <input class="form-control js-password-validate" type="password" name="password_register" id="password_register" value="" placeholder="[% loc('Enter a password') %]"> + <input class="form-control js-password-validate" type="password" name="password_register" id="password_register" aria-describedby="password_register_hint" value=""> <input class="green-btn js-submit_register" type="submit" name="submit_register" value="[% loc('Submit') %]"> </div> diff --git a/templates/web/base/report/new/form_user_loggedout_password.html b/templates/web/base/report/new/form_user_loggedout_password.html index a4d1aefe0..16b6fdaad 100644 --- a/templates/web/base/report/new/form_user_loggedout_password.html +++ b/templates/web/base/report/new/form_user_loggedout_password.html @@ -2,12 +2,12 @@ <h5>[% loc('<strong>Yes</strong> I have a password') %]</h5> - <label class="hidden-js n" for="password_sign_in">[% loc('Yes I have a password') %]</label> + <label for="password_sign_in">[% loc('Your password') %]</label> [% IF field_errors.password %] <p class='form-error'>[% field_errors.password %]</p> [% END %] <div class="form-txt-submit-box"> - <input class="form-control" type="password" name="password_sign_in" id="password_sign_in" placeholder="[% loc('Your password') %]" value=""> + <input class="form-control" type="password" name="password_sign_in" id="password_sign_in" value=""> <input class="green-btn js-submit_sign_in" type="submit" name="submit_sign_in" value="[% loc('Submit') %]"> </div> diff --git a/templates/web/base/report/update.html b/templates/web/base/report/update.html index de8699802..4a2642c9a 100644 --- a/templates/web/base/report/update.html +++ b/templates/web/base/report/update.html @@ -47,9 +47,8 @@ </div> [% IF permissions.moderate %] <div class="moderate-edit"> - <label for="moderation_reason">[% loc('Moderation reason:') %]</label> - <input type="text" class="form-control" name="moderation_reason" - placeholder="[% loc('Describe why you are moderating this') %]"> + <label for="moderation_reason">[% loc('Describe why you are moderating this') %]</label> + <input type="text" class="form-control" name="moderation_reason"> <input type="submit" class="green-btn" value="[% loc('Save changes') %]"> <input type="button" class="btn cancel" value="[% loc('Discard changes') %]"> </div> diff --git a/templates/web/base/report/update/form_name.html b/templates/web/base/report/update/form_name.html index 218ce4149..fa6595d74 100644 --- a/templates/web/base/report/update/form_name.html +++ b/templates/web/base/report/update/form_name.html @@ -24,13 +24,13 @@ <input class="form-control" name="username" id="form_username" type="text" value="[% c.user.email | html %]"> [% END %] -<label for="form_name">[% loc('Name') %]</label> +<label for="form_name">[% loc('Your name') %]</label> [% IF field_errors.name %] <p class='form-error'>[% field_errors.name %]</p> [% END %] <input type="text" class="form-control validNameU js-form-name" - name="name" id="form_name" value="[% update.name || c.user.name | html %]" placeholder="[% loc('Your name') %]"> + name="name" id="form_name" value="[% update.name || c.user.name | html %]"> [% INCLUDE 'report/_show_name_label.html' %] diff --git a/templates/web/base/report/update/form_update.html b/templates/web/base/report/update/form_update.html index 06104c9e9..ed5b83355 100644 --- a/templates/web/base/report/update/form_update.html +++ b/templates/web/base/report/update/form_update.html @@ -33,7 +33,7 @@ [% IF field_errors.update %] <div class='form-error'>[% field_errors.update %]</div> [% END %] -<textarea rows="7" cols="30" name="update" class="form-control" id="form_update" placeholder="[% loc('Please write your update here') %]" required>[% update.text | html %]</textarea> +<textarea rows="7" cols="30" name="update" class="form-control" id="form_update" required>[% update.text | html %]</textarea> [% IF c.user && c.user.belongs_to_body( problem.bodies_str ) %] <label for="state">[% loc( 'State' ) %]</label> diff --git a/templates/web/base/report/update/form_user_loggedout_by_email.html b/templates/web/base/report/update/form_user_loggedout_by_email.html index d038cdb23..63e6e3e4f 100644 --- a/templates/web/base/report/update/form_user_loggedout_by_email.html +++ b/templates/web/base/report/update/form_user_loggedout_by_email.html @@ -12,12 +12,12 @@ <p class='form-error'>[% field_errors.password_register %]</p> [% END %] - <div class="general-notes"> + <div class="general-notes" id="password_register_hint"> <p>[% loc('Providing a password is optional, but doing so will allow you to more easily report problems, leave updates and manage your reports.') %]</p> </div> <div class="form-txt-submit-box"> - <input type="password" class="form-control js-password-validate" name="password_register" id="password_register" value="" placeholder="[% loc('Enter a password') %]"> + <input type="password" class="form-control js-password-validate" name="password_register" id="password_register" value="" aria-describedby="password_register_hint"> <input class="green-btn js-submit_register" type="submit" name="submit_register" value="[% loc('Post') %]"> </div> diff --git a/templates/web/base/report/update/form_user_loggedout_password.html b/templates/web/base/report/update/form_user_loggedout_password.html index d24f8bd15..c68163fa7 100644 --- a/templates/web/base/report/update/form_user_loggedout_password.html +++ b/templates/web/base/report/update/form_user_loggedout_password.html @@ -1,12 +1,12 @@ <div id="form_sign_in_yes" class="form-box"> <h5>[% loc('<strong>Yes</strong> I have a password') %]</h5> - <label class="hidden-js n" for="password_sign_in">[% loc('Yes I have a password') %]</label> + <label for="password_sign_in">[% loc('Your password') %]</label> [% IF field_errors.password %] <p class='form-error'>[% field_errors.password %]</p> [% END %] <div class="form-txt-submit-box"> - <input type="password" class="form-control" name="password_sign_in" id="password_sign_in" value="" placeholder="[% loc('Your password') %]"> + <input type="password" class="form-control" name="password_sign_in" id="password_sign_in" value=""> <input class="green-btn js-submit_sign_in" type="submit" name="submit_sign_in" value="[% loc('Post') %]"> </div> diff --git a/templates/web/borsetshire/around/postcode_form.html b/templates/web/borsetshire/around/postcode_form.html index bda1c1f1d..0126d8cac 100644 --- a/templates/web/borsetshire/around/postcode_form.html +++ b/templates/web/borsetshire/around/postcode_form.html @@ -17,9 +17,10 @@ <form action="[% c.uri_for('/around') %]" method="get" name="postcodeForm" id="postcodeForm"> <label for="pc">[% question %]:</label> + <p class="form-hint" id="pc-hint">[% tprintf(loc('e.g. ‘%s’ or ‘%s’'), c.cobrand.example_places) %]</p> <div> <input type="hidden" name="pc" value="[% c.cobrand.problems.first.postcode | html %]"> - <input type="text" name="_pc" value="[% pc | html %]" id="pc" size="10" maxlength="200" placeholder="[% tprintf(loc('e.g. ‘%s’ or ‘%s’'), c.cobrand.example_places) %]" required> + <input type="text" name="_pc" value="[% pc | html %]" id="pc" size="10" maxlength="200" aria-describedby="pc-hint" required> <input type="submit" value="[% loc('Go') %]" id="sub"> </div> diff --git a/templates/web/bromley/report/new/form_user_loggedout_by_email.html b/templates/web/bromley/report/new/form_user_loggedout_by_email.html index 7e33a5a89..7613ca339 100644 --- a/templates/web/bromley/report/new/form_user_loggedout_by_email.html +++ b/templates/web/bromley/report/new/form_user_loggedout_by_email.html @@ -21,12 +21,12 @@ [% IF field_errors.password_register %] <p class='form-error'>[% field_errors.password_register %]</p> [% END %] - <div class="general-notes form-focus-hidden"> + <div class="general-notes form-focus-hidden" id="password_register_hint"> <p>[% loc('Providing a password is optional, but doing so will allow you to more easily report future problems, leave updates and manage your reports.') %]</p> </div> <div class="form-txt-submit-box form-focus-hidden"> - <input class="form-control js-password-validate" type="password" name="password_register" id="password_register" value="" placeholder="[% loc('Enter a password') %]"> + <input class="form-control js-password-validate" type="password" name="password_register" id="password_register" value="" aria-describedby="password_register_hint"> <input class="green-btn js-submit_register" type="submit" name="submit_register" value="[% loc('Submit') %]"> </div> diff --git a/templates/web/bromley/report/new/form_user_loggedout_password.html b/templates/web/bromley/report/new/form_user_loggedout_password.html index a4255f647..900fc5d9d 100644 --- a/templates/web/bromley/report/new/form_user_loggedout_password.html +++ b/templates/web/bromley/report/new/form_user_loggedout_password.html @@ -2,12 +2,12 @@ <h5>Confirm my report with my FixMyStreet password</h5> - <label class="hidden-js n" for="password_sign_in">[% loc('Yes I have a password') %]</label> + <label for="password_sign_in">[% loc('Your password') %]</label> [% IF field_errors.password %] <p class='form-error'>[% field_errors.password %]</p> [% END %] <div class="form-txt-submit-box"> - <input class="form-control" type="password" name="password_sign_in" id="password_sign_in" placeholder="[% loc('Your password') %]" value=""> + <input class="form-control" type="password" name="password_sign_in" id="password_sign_in" value=""> <input class="green-btn js-submit_sign_in" type="submit" name="submit_sign_in" value="[% loc('Submit') %]"> </div> diff --git a/templates/web/bromley/report/new/form_user_name.html b/templates/web/bromley/report/new/form_user_name.html index 8102c0ea7..26dd235f3 100644 --- a/templates/web/bromley/report/new/form_user_name.html +++ b/templates/web/bromley/report/new/form_user_name.html @@ -3,10 +3,10 @@ [% IF field_errors.first_name %] <p class='form-error'>[% field_errors.first_name %]</p> [% END %] -<input class="form-control js-form-name [% extra_class %]" type="text" value="[% ( first_name || names.first ) | html %]" name="first_name" id="form_first_name" placeholder="[% loc('Your first name') %]"> +<input class="form-control js-form-name [% extra_class %]" type="text" value="[% ( first_name || names.first ) | html %]" name="first_name" id="form_first_name"> <label for="form_last_name">[% loc('Last Name') %]</label> [% IF field_errors.last_name %] <p class='form-error'>[% field_errors.last_name %]</p> [% END %] -<input class="form-control js-form-name [% extra_class %]" type="text" value="[% ( last_name || names.last ) | html %]" name="last_name" id="form_last_name" placeholder="[% loc('Your last name') %]"> +<input class="form-control js-form-name [% extra_class %]" type="text" value="[% ( last_name || names.last ) | html %]" name="last_name" id="form_last_name"> diff --git a/templates/web/bromley/report/update/form_name.html b/templates/web/bromley/report/update/form_name.html index a33d144bd..07166a431 100644 --- a/templates/web/bromley/report/update/form_name.html +++ b/templates/web/bromley/report/update/form_name.html @@ -10,13 +10,13 @@ [% IF field_errors.first_name %] <p class='form-error'>[% field_errors.first_name %]</p> [% END %] -<input class="js-form-name form-control" type="text" value="[% names.first || first_name | html %]" name="first_name" id="form_first_name" placeholder="[% loc('Your first name') %]"> +<input class="js-form-name form-control" type="text" value="[% names.first || first_name | html %]" name="first_name" id="form_first_name"> <label for="form_last_name">[% loc('Last Name') %]</label> [% IF field_errors.last_name %] <p class='form-error'>[% field_errors.last_name %]</p> [% END %] -<input class="js-form-name form-control" type="text" value="[% names.last || last_name | html %]" name="last_name" id="form_last_name" placeholder="[% loc('Your last name') %]"> +<input class="js-form-name form-control" type="text" value="[% names.last || last_name | html %]" name="last_name" id="form_last_name"> <div class="checkbox-group"> <input type="checkbox" name="may_show_name" id="form_may_show_name" value="1"[% ' checked' IF name_public %]> diff --git a/templates/web/bromley/report/update/form_update.html b/templates/web/bromley/report/update/form_update.html index 06d7c455e..190993a0f 100644 --- a/templates/web/bromley/report/update/form_update.html +++ b/templates/web/bromley/report/update/form_update.html @@ -43,7 +43,7 @@ [% IF field_errors.update %] <div class='form-error'>[% field_errors.update %]</div> [% END %] -<textarea rows="7" cols="30" name="update" class="form-control" id="form_update" placeholder="[% loc('Please write your update here') %]" required>[% update.text | html %]</textarea> +<textarea rows="7" cols="30" name="update" class="form-control" id="form_update" required>[% update.text | html %]</textarea> [% IF c.user && c.user.belongs_to_body( problem.bodies_str ) %] <label for="state">[% loc( 'State' ) %]</label> diff --git a/templates/web/bromley/report/update/form_user_loggedout_by_email.html b/templates/web/bromley/report/update/form_user_loggedout_by_email.html index 393d8e4cc..b70749d87 100644 --- a/templates/web/bromley/report/update/form_user_loggedout_by_email.html +++ b/templates/web/bromley/report/update/form_user_loggedout_by_email.html @@ -7,12 +7,12 @@ [% IF field_errors.password_register %] <p class='form-error'>[% field_errors.password_register %]</p> [% END %] - <div class="general-notes"> + <div class="general-notes" id="password_register_hint"> <p>[% loc('Providing a password is optional, but doing so will allow you to more easily report future problems, leave updates and manage your reports.') %]</p> </div> <div class="form-txt-submit-box"> - <input class="form-control js-password-validate" type="password" name="password_register" id="password_register" value="" placeholder="[% loc('Enter a password') %]"> + <input class="form-control js-password-validate" type="password" name="password_register" id="password_register" value="" aria-describedby="password_register_hint"> <input class="green-btn js-submit_register" type="submit" name="submit_register" value="[% loc('Post') %]"> </div> diff --git a/templates/web/bromley/report/update/form_user_loggedout_email.html b/templates/web/bromley/report/update/form_user_loggedout_email.html index 228ca7509..f088bd63d 100644 --- a/templates/web/bromley/report/update/form_user_loggedout_email.html +++ b/templates/web/bromley/report/update/form_user_loggedout_email.html @@ -5,4 +5,4 @@ [% IF field_errors.username %] <p class='form-error'>[% field_errors.username %]</p> [% END %] -<input class="form-control" type="email" name="username" id="form_username" value="[% update.user.email | html %]" placeholder="[% loc('Your email address' ) %]" required> +<input class="form-control" type="email" name="username" id="form_username" value="[% update.user.email | html %]" required> diff --git a/templates/web/bromley/report/update/form_user_loggedout_password.html b/templates/web/bromley/report/update/form_user_loggedout_password.html index 3b7adb84e..c18b45ff0 100644 --- a/templates/web/bromley/report/update/form_user_loggedout_password.html +++ b/templates/web/bromley/report/update/form_user_loggedout_password.html @@ -2,12 +2,12 @@ <h5>Confirm my report with my FixMyStreet password</h5> - <label class="hidden-js n" for="password_sign_in">[% loc('Yes I have a password') %]</label> + <label for="password_sign_in">[% loc('Your password') %]</label> [% IF field_errors.password %] <p class='form-error'>[% field_errors.password %]</p> [% END %] <div class="form-txt-submit-box"> - <input class="form-control" type="password" name="password_sign_in" id="password_sign_in" placeholder="[% loc('Your password') %]" value=""> + <input class="form-control" type="password" name="password_sign_in" id="password_sign_in" value=""> <input class="green-btn js-submit_sign_in" type="submit" name="submit_sign_in" value="[% loc('Post') %]"> </div> diff --git a/templates/web/fixamingata/report/new/form_user_loggedout.html b/templates/web/fixamingata/report/new/form_user_loggedout.html index dd6ecf1e7..cc869e2be 100644 --- a/templates/web/fixamingata/report/new/form_user_loggedout.html +++ b/templates/web/fixamingata/report/new/form_user_loggedout.html @@ -2,7 +2,7 @@ [% IF field_errors.username %] <p class='form-error'>[% field_errors.username %]</p> [% END %] -<input type="email" class="form-control" value="[% report.user.email | html %]" name="username" id="form_username" placeholder="[% loc('Please enter your email address') %]" required> +<input type="email" class="form-control" value="[% report.user.email | html %]" name="username" id="form_username" required> <div id="form_sign_in"> <h3>[% loc("Now to submit your report…") %]</h3> @@ -18,7 +18,7 @@ <p class='form-error'>[% field_errors.name %]</p> [% END %] - <input type="text" class="form-control form-focus-trigger validName js-form-name" value="[% report.name | html %]" name="name" id="form_name" placeholder="[% loc('Your name') %]"> + <input type="text" class="form-control form-focus-trigger validName js-form-name" value="[% report.name | html %]" name="name" id="form_name"> [%# if there is nothing in the name field then set check box as default on form %] <div class="checkbox-group"> @@ -27,7 +27,7 @@ </div> <label for="form_phone">[% loc('Phone number (optional)') %]</label> - <input type="text" class="form-control" value="[% report.user.phone_display | html %]" name="phone" id="form_phone" placeholder="[% loc('Your phone number') %]"> + <input type="text" class="form-control" value="[% report.user.phone_display | html %]" name="phone" id="form_phone"> <div class="general-notes form-focus-hidden"> <p>Vi visar inte din e-postadress eller ditt telefonnummer publikt.</p> @@ -38,12 +38,12 @@ <p class='form-error'>[% field_errors.password_register %]</p> [% END %] - <div class="general-notes form-focus-hidden"> + <div class="general-notes form-focus-hidden" id="password_register_hint"> <p>[% loc('Providing a password is optional, but doing so will allow you to more easily report problems, leave updates and manage your reports.') %]</p> </div> <div class="form-txt-submit-box"> - <input type="password" class="form-control js-password-validate" name="password_register" id="password_register" value="" placeholder="[% loc('Enter a password') %]"> + <input type="password" class="form-control js-password-validate" name="password_register" id="password_register" aria-describedby="password_register_hint" value=""> <input class="green-btn js-submit_register" type="submit" name="submit_register" value="[% loc('Submit') %]"> </div> @@ -62,7 +62,7 @@ [% IF field_errors.password %] <p class='form-error'>[% field_errors.password %]</p> [% END %] - <input type="password" class="form-control" name="password_sign_in" id="password_sign_in" placeholder="[% loc('Your password') %]" value=""> + <input type="password" class="form-control" name="password_sign_in" id="password_sign_in" value=""> <input class="green-btn js-submit_sign_in" type="submit" name="submit_sign_in" value="[% loc('Submit') %]"> </div> diff --git a/templates/web/zurich/auth/general.html b/templates/web/zurich/auth/general.html index 555a72374..2b183b953 100644 --- a/templates/web/zurich/auth/general.html +++ b/templates/web/zurich/auth/general.html @@ -17,11 +17,11 @@ [% ELSIF sign_in_error %] <div class="form-error">[% loc('There was a problem with your login information. If you cannot remember your password, or do not have one, please fill in the ‘No’ section of the form.') %]</div> [% END %] - <input type="email" class="required email" id="username" name="username" value="[% username | html %]" placeholder="[% loc('Your email address') %]" autofocus> + <input type="email" class="required email" id="username" name="username" value="[% username | html %]" autofocus> <label for="password_sign_in">[% loc('Password (optional)') %]</label> <div class="form-txt-submit-box"> - <input type="password" class="required" name="password_sign_in" id="password_sign_in" value="" placeholder="[% loc('Your password') %]"> + <input type="password" class="required" name="password_sign_in" id="password_sign_in" value=""> <input class="green-btn" type="submit" name="sign_in_by_password" value="[% loc('Sign in') %]"> </div> @@ -45,21 +45,21 @@ [% IF loc_username_error %] <div class="form-error">[% loc_username_error %]</div> [% END %] - <input type="email" class="required email" id="username2" name="username" value="[% username | html %]" placeholder="[% loc('Your email address') %]"> + <input type="email" class="required email" id="username2" name="username" value="[% username | html %]"> <label for="name">[% loc('Name') %]</label> - <input type="text" class="required" name="name" value="" placeholder="[% loc('Your name') %]"> + <input type="text" class="required" name="name" value=""> <label for="password_register">[% loc('Password (optional)') %]</label> [% IF field_errors.password_register %] <p class='form-error'>[% field_errors.password_register %]</p> [% END %] <div class="form-txt-submit-box"> - <input type="password" class="required js-password-validate" name="password_register" id="password_register" value="" placeholder="[% loc('Enter a password') %]"> + <input type="password" class="required js-password-validate" name="password_register" id="password_register" value="" aria-describedby="password_notes"> <input class="green-btn" type="submit" name="sign_in_by_code" value="Registrieren"> </div> - <div class="general-notes"> + <div class="general-notes" id="password_notes"> <p>[% tprintf(loc('Your password should include %d or more characters.'), c.cobrand.password_minimum_length) %]</p> </div> diff --git a/templates/web/zurich/report/new/fill_in_details_form.html b/templates/web/zurich/report/new/fill_in_details_form.html index fd21e0fff..6d75674c4 100644 --- a/templates/web/zurich/report/new/fill_in_details_form.html +++ b/templates/web/zurich/report/new/fill_in_details_form.html @@ -46,7 +46,7 @@ [% IF field_errors.detail %] <p class='form-error'>[% field_errors.detail %]</p> [% END %] - <textarea class="form-control" rows="7" cols="26" name="detail" id="form_detail" placeholder="[% loc('Please fill in details of the problem.') %]" required>[% report.detail | html %]</textarea> + <textarea class="form-control" rows="7" cols="26" name="detail" id="form_detail" required>[% report.detail | html %]</textarea> [% PROCESS "report/new/category_wrapper.html" %] @@ -54,19 +54,19 @@ [% IF field_errors.username %] <p class='form-error'>[% field_errors.username %]</p> [% END %] - <input class="form-control" type="email" value="[% report.user.email | html %]" name="username" id="form_username" placeholder="[% loc('Please enter your email address') %]" required> + <input class="form-control" type="email" value="[% report.user.email | html %]" name="username" id="form_username" required> <label for="form_name">[% loc('Name') %] [% loc('(optional)') %]</label> [% IF field_errors.name %] <p class='form-error'>[% field_errors.name %]</p> [% END %] - <input class="form-control js-form-name" type="text" value="[% report.name | html %]" name="name" id="form_name" placeholder="[% loc('Your name') %]"> + <input class="form-control js-form-name" type="text" value="[% report.name | html %]" name="name" id="form_name"> <label for="form_phone">[% loc('Phone number') %]</label> [% IF field_errors.phone %] <p class='form-error'>[% field_errors.phone %]</p> [% END %] - <input class="form-control" type="text" value="[% report.user.phone | html %]" name="phone" id="form_phone" placeholder="[% loc('Your phone number') %]" required> + <input class="form-control" type="text" value="[% report.user.phone | html %]" name="phone" id="form_phone" required> <div class="form-txt-submit-box"> [%# class of submit_sign_in so name can be optional, name of submit_register so it doesn't try and sign us in %] diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss index 4af940039..4d7ff2c37 100644 --- a/web/cobrands/sass/_base.scss +++ b/web/cobrands/sass/_base.scss @@ -645,8 +645,15 @@ ul.error { } } -#report-updates-data img { +#report-updates-data { + img { float: $right; + } + + // Avoid double margin between opening paragraph and label. + label { + margin-top: 0; + } } #report-share { @@ -1736,6 +1743,16 @@ label .muted { font-weight: normal; } +.form-hint { + color: #666; + + // Reduce space between labels and their form-hints + label + &, + #front-main label + & { + margin-top: -0.5em; + } +} + .description_tips { @include clearfix; @@ -1775,8 +1792,10 @@ label .muted { display: inline-block; } -#problem_form > label:first-child { - margin-top: 0; +#problem_form { + & > label:first-child { + margin-top: 0; + } } .extra-category-questions { @@ -1813,6 +1832,7 @@ label .muted { #detailed_information_length { float: #{$right}; + margin-top: 0.25em; // match the label next to it &.error { color: red; } @@ -1927,6 +1947,9 @@ label .muted { label { margin:0; } + .form-hint { + margin-bottom: 0.5em; + } div { display:table; width:100%; |