fix(checkbox): use a native input to fix a11y issues with axe and screen readers

[brandyscarney]

Dev build: 5.5.0-dev.202011111928.7c95d89 🚨 This dev build includes #22477 for testing of both at the same time

⚠️ Depends on #22352 ⚠️

Fixes #21644
Fixes #20517
Fixes #17796

If this ends up working well for Checkbox, this can also be used for the following issues:

• bug: ion-toggle and ion-select generates empty buttons #21552
• bug: labels are not read for ion-toggle #21646
• bug: Screen Reader reads ion-select just as a button #21548

How this updates a11y and screen readers

Axe

No longer throws errors for aria attributes or buttons without content

NVDA

Tested in Edge and Chrome, reads as:

check box  checked    Default
check box  not checked    Primary
check box  checked    Tertiary
check box  checked    Success
check box  checked    Warning
check box  checked    Dark
check box  checked    Danger
check box  checked    Light
check box  checked    Medium

Checkbox must be in a form to use space to select it with NVDA running, otherwise you need to press Ins + space to enter forms mode, then you can use space to select.

VoiceOver

On Mac:

• Chrome: properly reads uncheck or check, space bar works, incorrectly announces as checkbox inside of a checkbox (this is a compromise we have to make in order for it to work properly in Safari)
• Safari: properly reads uncheck or check, space bar works, correctly announces as being on a checkbox

On iOS:

Properly selects checkbox item, double tap will uncheck or check checkbox, skips over disabled checkboxes entirely

Talkback

[kensodemann]

Testing this on my iPhone with VoiceOver on the checkbox does not toggle on double-tap.

[liamdebeasi]

Tested on macOS 10.15.6 and found the following issues:

1. Pressing "Enter" does not toggle the checkbox like it currently does on master. This is probably because using button gave us that interaction for free.

Tested with VoiceOver on iOS 14 and found no issues.

Tested with VoiceOver on macOS 10.15.6 and found the following issues:

1. When selecting a checkbox on macOS, VoiceOver highlights a corner of the checkbox. On master it highlights the entire item:

branch	master

2. VoiceOver reads "You are currently on a checkbox inside of a checkbox" where it previously read "You are currently on a button inside of a checkbox" when selecting a checkbox. I don't know which one is correct but saying "checkbox inside of a checkbox" sounds confusing.

branch	master

Tested with TalkBack on Android 7.0 and found the following issue:

1. After double tapping to check the checkbox, Chrome no longer highlights the entire item:

branch	master

Initially, Chrome only highlights the checkbox and not the entire item, but this is consistent across the branch and master.

Tested with NVDA on Windows 10 and found the following issues:

1. Tabbing to a checkbox and pressing "Enter" dismisses the modal. This is likely the same underlying issue as the first issue listed in this comment.

2. NVDA always reads the checkbox state as "not checked" even if it is checked.

NVDA does not seem to read the checkbox state when toggling the checkbox with Space, but that seems to be consistent across the branch and master.