feat(checkbox): Updates to experimental checkbox

[alisonjoseph]

Closes #1118

http://carbon-dev-environment-optimistic-kangaroo.stage1.mybluemix.net/demo/checkbox

Hey @jeanservaas this should be pretty close to the sketch file(without having values like .8723864), but let me know if you see anything that needs tweaks. Specifically wasn't sure on the "checked focus" state. The blue border looks pretty thin.

[asudoh]

LGTM 👍 once @jeanservaas signs this off. Thanks @alisonjoseph!

[tw15egan]

Focus states are pretty hard to determine when using the keyboard to navigate. This does not seem likely to pass a11y.

https://www.w3.org/WAI/GL/low-vision-a11y-tf/wiki/Contrast_(Minimum)#Focus_Indicators

It either needs to be greater than 3px, or have a 4.5 contrast ratio.

Also, seems like intermediate state does not have a focus state.

[alisonjoseph]

Good catch @tw15egan, let me know how you want to adjust the focus state @jeanservaas

[alisonjoseph]

@jeanservaas This is probably why the original duo-component checkbox had the following focus state.

[jeanservaas]

Hey Alison,

• The type next to the enabled check box should be Gray 100 (hex#171717) right now it's hex #152935.

• Can you move the type down 1px (it looks like it's riding high on the vertical center now)

• You're right, the selected focus state is not legible. There should be a 3px boarder around the checked/focus state -- if there is and it's not enough, try adding another pixel.

• The check in the check box looks like it got vertically stretched by about a pixel. Just seems like it's rendering a little fuzzy. Don't have a solution here, so we don't have to get hung up on it if there's no fix.

Last disabled check box's stroke under (Checkbox (input >label) is the Gray 100, it should be the disabled color (Gray 30 / #BEBEBE)

[jeanservaas]

@alisonjoseph Oh! I just saw that for the selected focus state, I like that, better than the stroke around it! I'm trying to think of a UX reason why we wouldn't be able to have that... maybe because a blue 60 fill is associated with a links/buttons. I'll ask around. We'd also have to change the radio button if we changed this.

[alisonjoseph]

updated with the correct 3px border. but can always switch to the blue background. trying to push the staging link now 🤞

[jeanservaas]

@alisonjoseph

Almost there... few small things

• wondering if that text color the gray 100 (171717) -- i.e. the "checkbox" and the "indeterminate checkbox," still looks a little lighter and a little bluish in the grab

• also, the corner radius... now that the box is slightly bigger than the original artwork in sketch, the corner is a bit pointier than the original. Again, the checkbox isn't live in sketch so I can't check the corner radius... but it looks like it's about a 2 in sketch. Maybe we could try to match this

• just make sure dash horizontal dash on indeterminate checkbox is vertically centered. In the original link it rides about a pixel high.

thanks for your patience!!!

[alisonjoseph]

Double checked the text color, just need confirmation on 1px or 2px for the border-radius. It almost seems like its 1.5 in sketch.

here is a side by side of 1px vs 2px
@jeanservaas

[jeanservaas]

looks good!

[carbon-bot]

🎉 This PR is included in version 9.26.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀