search

ogcio / ogcio-ds

MIT License
4 stars 0 forks source link

Checkboxes focus states are inconsistent in "medium" size #154

Closed ekynoxe closed 6 months ago

ekynoxe commented 10 months ago

Whilst using checkboxes in our forms in https://github.com/ogcio/formsSG-4IE, we noticed that when using

.govie-checkboxes-medium__input with .govie-checkboxes-medium__label, the outlines aren't shown on focus.

I believe the issue is because the css in https://github.com/ogcio/ogcio-ds/blob/main/src/govie/components/checkboxes/_index.scss#L319 references govie-checkboxes__label rather than govie-checkboxes-medium__label

Comparing this to code around this line, and to the styles of medium Radio elements in focus (which focus styles do work as expected), I believe that the correct selector should be .govie-checkboxes-medium__input:focus+.govie-checkboxes-medium__label:before {

We've added a temporary fix in our application's css overrides, but ideally the fix should be in here.

hamza14khan commented 6 months ago

PR raised: https://github.com/ogcio/ogcio-ds/pull/155

Thanks @ekynoxe for the suggested fix.