Pledge Form: Use agreement text as label content

This calls more attention to the agreement text, and correctly associates it with the input for screen reader users.
This commit is contained in:
Kelly Dwan 2019-10-28 20:09:38 -04:00
parent f49a938c1e
commit aa8b1838cd
No known key found for this signature in database
GPG key ID: 8BA5575F3D11575D
2 changed files with 11 additions and 13 deletions

View file

@ -6,18 +6,6 @@ namespace WordPressDotOrg\FiveForTheFuture\View;
?>
<div class="form-field form-field__agree">
<p>
<?php
printf(
wp_kses_post( '
I understand and agree to the <a href="%s">expectations</a> for
inclusion in the Five for the Future acknowledgement program.
' ),
esc_url( get_permalink( get_page_by_path( 'expectations' ) ) ) // TODO Change this URL?
);
?>
</p>
<input
type="checkbox"
id="5ftf-pledge-agreement"
@ -26,6 +14,11 @@ namespace WordPressDotOrg\FiveForTheFuture\View;
<?php checked( $data['pledge-agreement'] ); ?>
/>
<label for="5ftf-pledge-agreement">
<?php esc_html_e( 'Yes', 'wordpressorg' ); ?>
<?php
printf(
wp_kses_post( __( 'I understand and agree to the <a href="%s">expectations</a> for inclusion in the Five for the Future acknowledgement program.', 'wporg-5ftf' ) ),
esc_url( get_permalink( get_page_by_path( 'expectations' ) ) ) // TODO Change this URL?
);
?>
</label>
</div>

View file

@ -45,7 +45,12 @@
.form-field__agree {
input {
margin-top: 0;
}
label {
display: inline;
margin-bottom: 0;
}
}