Increase visibility of checkbox borders

[david-fong-bc]

User story

As a first-time user of FDC with average or poor eyesight, I'd like to be able to see the outlines of (unchecked) checkboxes for items in the search results page clearly enough to notice their presence. They don't need to be attention-drawing- just more more noticeable so a first-time user won't miss them, and users with poor-eyesight can probably see them if they can see regular text on the page.

The current radio buttons are fine. The visibility of checked checkboxes is also fine. This issue ticket is really just about checkboxes in their unchecked state.

This feature supports the following requirements

Additional context

The styling for this comes from bcbb's _boostrap.scss file, which sets

.bcbb-theme input[type=checkbox] {
    border-color: rgb(217, 217, 217);
}

Proposed solution

• One option is to make the outline darker. A value of #c7c7c7 is enough for me, but going even darker than that might not be a bad thing.
• Another option is to make the outline thicker. A value of 2px is enough for me.
• A combination of the above could work too.

Estimated level of effort

• \< 1 day

Definition of done (DoD)

• The styling of checkboxes is such that they appear as visible or more visible than they are with unchanged border width and border colour set to #c7c7c7, or unchanged border colour and border width set to 2px.

Testing

This feature requires manual testing

1. Run a search and check that the checkboxes are noticeably visible.

Other musings

I wonder if the maintainers of bcbb would agree that this styling rule (.bcbb-theme input[type=checkbox]) has detrimentally low visibility.

[danhgov]

This seems like such a simple task -- and it would have been for Openplus, as this is the system they set up. But for me:

• The change needs to be made in an SCSS file, not a CSS file. It has been years since my brief exposure to SASS compilers, so I just re-learned how to use them, and installed one locally. (And fought some dependency version requirements to get it working.)
• I was weirded out by the fact that the browser developer tools window was able to detect the SCSS file that the checkbox was coming from -- I always thought browsers only deal with CSS files. Turns out that there is such a thing as a ".css.map" file, which the browser uses to link a CSS rule to the SCSS line that generated it -- and that SASS compilers will make this file for you.
• I found that the SCSS file that @david-fong-bc flagged for me to update turns out is in our project, but is not tracked in this project's git repository. It is pulled in from the bcbb-theme repository via our composer.json file. So I think I'm supposed to update it in the bcbb-theme project -- and then this change will propagate to any other sites that we have based on that theme. (Which at present, I believe there are none of.)

[david-fong-bc]

@danhgov I found something closer to the source in https://github.com/bcgov/bcbb-theme/blob/1.0.x/scss/overrides/_bootstrap.scss#L4, which refers to a variable, colorInputBorder defined in https://github.com/bcgov/bcbb-theme/blob/a8ee8013eb2ffc8b34d9ead2ecb4d5be1bc084b0/scss/_variables.scss#L38. Since it's a colour variable, it might be better to just change border-width and keep using the standard input border colour.

[danhgov]

This is resolved now, and visible at https://dev.cat.data.fin.gov.bc.ca/search

I darkened them a little further-- to 75% grey, aka rgb(192,192,192) aka #c0c0c0.

Made the change locally in MFIN DC, compiled the SCSS, rsynced it to a separate project for bcbb_theme, committed it there, then had to update composer.lock in MFIN DC to pull in the new version of bcbb_theme, and made a commit in this project for that change.

[danhgov]

@lkmorlan, do you mind sharing your workflow for changes to bcbb_theme? As I mentioned above, I just made a small CSS change, and it was very convoluted:

1. On my localhost, update the _variables.scss file in MFIN DataCatalogue, and run sass to compile.
2. Test that the CSS changes achieve the desired effect.
3. Checkout bcbb_theme to a new project.
4. Copy my compiled changes from MFIN DataCatalogue into this new project: rsync -av ~/MFIN-datacatalogue/html/themes/custom/bcbb_theme/ ~/bcbb_theme
5. git commit in the new bcbb_theme project
6. push to github
7. composer update bcbb/bcbb_theme in MFIN DataCatalogue
8. commit the resultant change to composer.lock

I'm sure there are much easier ways to do this next time, like maybe using 'git subtree'.

How did you have your system set up for committing changes to this dependent project?

[NicoledeGreef]

@danhgov thanks - looks good.