Skip to content

Checkbox, Radio: Prevent stray A circumflex (Â) #4080

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 11 commits into from
Mar 12, 2021

Conversation

andycochran
Copy link
Contributor

@andycochran andycochran commented Mar 11, 2021

Description

The  character can show up where a non-breaking space should be when <meta charset="utf-8"> isn't set properly. The non-breaking space character is byte 0xA0 in ISO-8859-1. When encoded to UTF-8 it'd be 0xC2,0xA0, which, if incorrectly viewed as ISO-8859-1 displays as Â.

This bug is manifesting in our app's radio buttons and checkboxes:

image

…since content: "\a0"; is used to render checkboxes and radios:

.usa-checkbox__label::before,
.usa-radio__label::before {
background: color("white");
content: "\a0";
display: inline-block;
left: units($theme-input-select-border-width);
position: relative;
vertical-align: middle\0; // Target IE 11 and below to vertically center inputs
}

This change refactors the checkboxes and radios to use a regular space (and white-space: pre; so it does not collapse). This prevent stray A circumflex (Â) characters from appearing next to checkboxes and radio buttons.

Copy link
Contributor

@thisisdano thisisdano left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice. This is a smart fix.

@thisisdano thisisdano changed the base branch from develop to uswds-2.11.0 March 12, 2021 08:31
@thisisdano thisisdano merged commit bdf35a6 into uswds:uswds-2.11.0 Mar 12, 2021
This was referenced Mar 17, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants