Skip to content

USWDS - Radio and checkbox: Update label width to fit content #6192

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.

Sign up for GitHub

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

Jump to bottom
Merged
merged 8 commits into from
Jan 22, 2025
Merged

USWDS - Radio and checkbox: Update label width to fit content #6192

merged 8 commits into from
Jan 22, 2025

Conversation

cathybaptista
Copy link
Contributor

@cathybaptista cathybaptista commented Nov 8, 2024 •
edited
Loading

Summary

Changed display for radio buttons and checkbox to inline-block so that label fits its content. Added inherit to display for tile variant.

Breaking change

This is not a breaking change.

Related issue

Closes #6111

Related pull requests

Changelog

Preview link

Preview link radios:

Preview link checkboxes:

Problem statement

The selectable area adjacent to radio buttons and checkboxes was full width. This resulted in being able to select the button from an area far away from the component. This fix tightens the selectable area around these components.

NOTE

This issue also impacts checkbox. The same solution should apply to both components.

Solution

With display: block, the radio button's label occupies the full width of its parent container. With display: inline-block, the label will only occupy the space needed to fit its content.

Testing and review

  1. Open the federalist link for radios.
  2. Verify that each radio button item under form inputs is only actionable directly over the button.
  3. Open the federalist link for checkboxes.
  4. Verify that each checkbox item under form inputs is only actionable directly over the button.
  5. Check for regressions, especially that in tiled variant the right margin is not ragged.

Before opening this PR, make sure you’ve done whichever of these applies to you:

  • Confirm that this code follows the 18F Front End Coding Style Guide and Accessibility Guide.
  • Run git pull origin [base branch] to pull in the most recent updates from your base and check for merge conflicts. (Often, the base branch is develop).
  • Run npm run prettier:sass to format any Sass updates.
  • Run npm test and confirm that all tests pass.
  • Run your code through HTML_CodeSniffer and make sure it’s error free.

@cathybaptista cathybaptista force-pushed the cb-tighten-selectable-whitespace-in-radios branch from 9693c82 to 45da634 Compare November 8, 2024 20:56
@cathybaptista cathybaptista mentioned this pull request Nov 8, 2024
Merged
@cathybaptista cathybaptista marked this pull request as ready for review November 8, 2024 21:04
@cathybaptista cathybaptista requested a review from a team as a code owner November 8, 2024 21:04
@cathybaptista cathybaptista removed the request for review from a team November 8, 2024 21:05
mahoneycm
mahoneycm suggested changes Nov 18, 2024
View reviewed changes
Copy link
Contributor

@mahoneycm mahoneycm left a comment

Choose a reason for hiding this comment

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

Issue (blocking): This causes a visual regression for the tile variants.

Before After
image image

It looks like we'll want to maintain the block display in tile variants to prevent this regression.

@cathybaptista cathybaptista force-pushed the cb-tighten-selectable-whitespace-in-radios branch from b9b2120 to 7dc27a2 Compare December 19, 2024 17:44
@cathybaptista
Copy link
Contributor Author

Issue (blocking): This causes a visual regression for the tile variants.

Before After
image image
It looks like we'll want to maintain the block display in tile variants to prevent this regression.

@mahoneycm,

I moved the inherit to the tiled radios and kept display:inline-block. I think this both solves the regression and may even make it so for that variant this is not a breaking change. However, I'm not sure if it's a breaking change for the regular radios. I suppose it could be, if someone is relying on the selectable white space for some reason?

@cathybaptista
Copy link
Contributor Author

We should consider checkboxes as well. :)

@cathybaptista cathybaptista force-pushed the cb-tighten-selectable-whitespace-in-radios branch from 42e7a73 to a2fc5a0 Compare December 23, 2024 20:57
@cathybaptista cathybaptista changed the title Radio label should be display:inline-block. Radio and checkbox labels should be display:inline-block. Dec 27, 2024
@cathybaptista
Copy link
Contributor Author

@mahoneycm, based on our discussion on slack I decided to include checkboxes as part of this PR and the original ticket. I have fixed checkbox and updated testing steps.

@amyleadem amyleadem requested a review from mejiaj January 2, 2025 22:40
mahoneycm
mahoneycm approved these changes Jan 3, 2025
View reviewed changes
Copy link
Contributor

@mahoneycm mahoneycm left a comment

Choose a reason for hiding this comment

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

LGTM! Thanks Cathy!

  • No visual regressions
  • Standard radio/checkbox cannot be triggered via whitespace
  • Tile variants can be activated on their tile
  • Styles make sense and are necessary for proper display

@amyleadem amyleadem changed the title Radio and checkbox labels should be display:inline-block. USWDS - Radio and checkbox: Update label width to fit content Jan 3, 2025
amyleadem
amyleadem approved these changes Jan 3, 2025
View reviewed changes
Copy link
Contributor

@amyleadem amyleadem left a comment

Choose a reason for hiding this comment

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

LGTM! Thanks @cathybaptista

I completed the following checks in Firefox, Safari, and Chromium:

  • Confirm the interaction area for both radio and checkboxes do not expand beyond the label content in default variant
    • image
    • image
  • Confirm the interaction area for both radio and checkboxes fills the entire bordered area in the tile variant
  • Confirm there are no visual regressions in any of the component variants
  • Confirm that the checkboxes and radio buttons can still be interacted with as expected with both keyboard and mouse.
  • Confirm the code changes make sense and meet USWDS standards
  • Confirm the PR description is up-to-date and accurate

@amyleadem amyleadem requested a review from heymatthenry January 3, 2025 21:55
@amyleadem amyleadem requested a review from thisisdano January 3, 2025 21:55
This was referenced Jan 3, 2025
Merged
Closed
thisisdano
thisisdano approved these changes Jan 22, 2025
View reviewed changes
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.

Does what it says on the tin! Nice change

@thisisdano thisisdano merged commit 08dfb9f into develop Jan 22, 2025
5 checks passed
@thisisdano thisisdano deleted the cb-tighten-selectable-whitespace-in-radios branch January 22, 2025 22:31
@heymatthenry heymatthenry mentioned this pull request Mar 7, 2025
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@thisisdano thisisdano thisisdano approved these changes

@mahoneycm mahoneycm mahoneycm approved these changes

@amyleadem amyleadem amyleadem approved these changes

@mandylloyd mandylloyd Awaiting requested review from mandylloyd

@RachelCorsino RachelCorsino Awaiting requested review from RachelCorsino

@mejiaj mejiaj Awaiting requested review from mejiaj

@heymatthenry heymatthenry Awaiting requested review from heymatthenry

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

USWDS - Bug: White space in radio button and checkbox label is clickable
4 participants
@cathybaptista @thisisdano @mahoneycm @amyleadem