Gap between radios and labels gets me every time

[robinwhittleton]

Can we expand the hit area of radio buttons in PR approval panels so that there’s no gap between the radio and the label?

The number of times I’ve clicked here and had to click again is getting pretty annoying. If you need to justify this from an accessibility point of view then WCAG 2.1 criterion 2.5.5 stipulates a 44×44 minimum hit area.

[cehfisher]

Hello @robinwhittleton - thank you for taking the time to file this issue. While it is true that WCAG 2.1 criterion 2.5.5 stipulates a 44×44 minimum hit area this is a AAA requirement, which is outside the scope of our current focus. This doesn’t imply that we’re not considering it in the future, but for now, it is not on our development roadmap. We will file this with our Accessibility team so that it can be reviewed and will follow-up here with any additional questions or updates. Thanks again!

[robinwhittleton]

Ok! It was mostly the gap that annoyed me from an interaction point of view, but feel free to close.

[cehfisher]

Let's leave this community issue open for now and we can go ahead and create an internal issue to have it reviewed. We really do appreciate the feedback!

[dpewaal-iba]

Does the development team have any plans to address this issue in the future?

[cehfisher]

Hi @dpewaal-iba - this issue has been resolved and will roll out to the various parts of GitHub soon. Please see the comment below for more details. Thanks!

[cehfisher]

Great news @robinwhittleton - the Primer and accessibility teams are looking into a fix for this issue. Stay tuned for more info on when it will be released!

[cehfisher]

Thanks for your patience on this issue @robinwhittleton! The accessibility team has a fix in place for this issue and would like you to re-test this on your machine to confirm it has been resolved.

[robinwhittleton]

Is this live on the site? I’ve just tested and the gap still isn’t clickable, at least on a PR approve panel.

[cehfisher]

Hi @robinwhittleton - the changes first appear in the Primer Design System, then are rolled out to the various services through component updates. The best place to do the re-test now is in Primer, below are the two related components. Thanks!

Checkbox component
Radio component

[robinwhittleton]

Thanks, that works much better. If I’m being super-picky there are some gaps top and bottom in the radio button hit area because the input is now actually a circle rather than just painted as a circle, but I can live with that 🙂

[cehfisher]

Thanks @robinwhittleton for re-testing this functionality and for the additional feedback! While I cannot guarantee further modifications will be made to this component, I will add your suggestion it to the internal issue.