fix(#1147): fix checkbox visual design issues

[bdfranck]

This PR addresses #1147 with the following changes to the checkbox component:

When the checkbox is unselected...

• Hover: Box uses an inner border
• Disabled: Label colour is grey-500
• Error: Box border colour is interactive-error

When the checkbox is selected...

• Hover: Box uses an inner border
• Disabled:
  • Label colour is grey-500
  • Box colour is interactive-disabled
• Disabled & Hover: Box border doesn't change colour
• Error & Hover: Box border doesn't change colour

Note

I couldn't find a fix for the below item in the issue:

Focus ring needs to stay applied on focused option when user clicks the option

I don't think the issue is a CSS issue. Here's what I think is happening:

1. I focus on input using a keyboard so it has focus-visible.
2. I click label to toggle the checkbox.
3. label cannot receive focus so the focus changes from input to body.
4. The checkbox state changes.
5. The component code returns the focus to input but it's no longer focus-visible.

Out of curiosity, I checked the latest Material Angular checkbox. It has the same issue when you toggle the checkbox by clicking the label...

But it doesn't have the issue when you toggle by clicking the checkbox itself. 🤔

It's because they make the invisible input the size of the checkbox. Maybe we could do that with ours?

[bdfranck]

Testing my fixes of the coded checkbox component so it aligns with Figma:

Item	Passed	Screenshot
Unselected & hover box has inner border	✅
Unselected & disabled label colour is grey-500	✅
Unselected & error box border colour is interactive-error	✅
Selected & hover box has inner border & does not change size	✅
Selected & disabled label colour is grey-500	✅
Selected & disabled box border colour is interactive-disabled	✅
Selected, disabled, & hover border doesn't change colour	✅
Selected, error & hover border doesn't change colour	✅

I tested with the following code in my local playground:

<goa-form-item label="Testing checkbox states">
  <goa-checkbox
    name="item"
    text="Unselected"
  />
  <goa-checkbox
    checked={true}
    name="item"
    text="Selected"
  />
  <goa-checkbox
    name="item"
    disabled="true"
    text="Unselected and disabled"
  />
  <goa-checkbox
    checked={true}
    name="item"
    text="Selected and disabled"
    disabled="true"
  />
  <goa-checkbox
    error="true"
    name="item"
    text="Unselected and error"
    />
  <goa-checkbox
    error="true"
    checked={true}
    name="item"
    text="Selected and error"
  />
  <goa-checkbox
    error="true"
    name="item"
    disabled="true"
    text="Unselected, error, and disabled"
  />
  <goa-checkbox
    error="true"
    checked={true}
    name="item"
    text="Selected, error, and disabled"
    disabled="true"
  />
</goa-form-item>

[tzuge]

:tada: This PR is included in version 1.17.0-alpha.97 :tada:

The release is available on:

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

Your semantic-release bot :package::rocket:

[tzuge]

:tada: This PR is included in version 4.17.0-alpha.38 :tada:

The release is available on:

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

Your semantic-release bot :package::rocket:

[tzuge]

:tada: This PR is included in version 1.25.0 :tada:

The release is available on:

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

Your semantic-release bot :package::rocket:

[tzuge]

:tada: This PR is included in version 4.24.0 :tada:

The release is available on:

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

Your semantic-release bot :package::rocket:

[tzuge]

:tada: This PR is included in version 3.0.0-alpha.5 :tada:

The release is available on:

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

Your semantic-release bot :package::rocket: