fix(checkbox): trying to fix lack of label error

Author: ShaneK

core/src/components/checkbox/checkbox.tsx

@@ -262,13 +262,21 @@ export class Checkbox implements ComponentInterface {
 
     renderHiddenInput(true, el, name, checked ? value : '', disabled);
 
+    // Determine appropriate accessible name
+    const hasLabelContent = el.textContent !== '';
+    const hasLabelId = inputId + '-lbl';
+
     return (
+      /*
+        The host must be a checkbox role to support Safari's Voice Over accessibility
+      */
       <Host
         role="checkbox"
         aria-checked={indeterminate ? 'mixed' : `${checked}`}
         aria-describedby={this.getHintTextID()}
         aria-invalid={this.getHintTextID() === this.errorTextId}
-        aria-labelledby={inputId + '-lbl'}
+        aria-labelledby={hasLabelContent ? hasLabelId : null}
+        aria-label={!hasLabelContent ? inheritedAttributes['aria-label'] || 'checkbox' : null}
         aria-disabled={disabled ? 'true' : null}
         tabindex="0"
         onKeyDown={this.onKeyDown}
@@ -289,11 +297,12 @@ export class Checkbox implements ComponentInterface {
           {/*
             The native control must be rendered
             before the visible label text due to https://bugs.webkit.org/show_bug.cgi?id=251951
+            and it must be hidden with display:none instead of aria-hidden="true"
+            to avoid nested interactive elements accessibility issues
           */}
           <input
             type="checkbox"
-            aria-hidden="true"
-            tabindex="-1"
+            style={{ display: 'none' }}
             checked={checked ? true : undefined}
             disabled={disabled}
             id={inputId}
@@ -307,10 +316,10 @@ export class Checkbox implements ComponentInterface {
           <div
             class={{
               'label-text-wrapper': true,
-              'label-text-wrapper-hidden': el.textContent === '',
+              'label-text-wrapper-hidden': !hasLabelContent,
             }}
             part="label"
-            id={inputId + '-lbl'}
+            id={hasLabelId}
           >
             <slot></slot>
             {this.renderHintText()}