Fix/A11Y Fannypack/Checkbox

Problem:

Currently, if I want to use screen Reader to navigate the checkbox, Its Label "Receive newsletter" is not being read as expected on a usual native Checkbox implementation.

Current Fannypack/Checkbox Unchecked state:

Current Fannypack/Checkbox Checked state:

Example via https://codesandbox.io/s/a11y-example-1-checkboxes-9h49e

Some Context on Semantic Checkboxes:

There are two ways of making a Checkbox accessible just by using native HTML element and structure:

Example 1 where `<label>` is wrapping the input and text:

 <label>
          <input type="checkbox" id="newsletter" />
          Receive Newsletter 
 </label>

Example 2 where `htmlFor` associates the input with the label:

 <input type="checkbox" id="newsletter" />
 <label htmlFor="newsletter">Receive Newsletter</label>

The issue seems like the Fannypack/Checkbox is mixing both techniques, and also adding unnecessary aria-label. We can sort out the Accessibility following one of the two examples described above, and keep aria-label for other custom widgets, such as accordions and custom-made buttons.

My suggested solution:

In order to follow example 1 approach (label wrapping input and text) I have made a few changes in the Checkbox component. so the result can be test on the screenshot below, where the screen Reader now is able to describe the Label text AND State on the focused checkbox.

Initial State:

Checked:

Unchecked:

jxom / fannypack