Fix role/aria

CHANGELOG.md

@@ -5,6 +5,7 @@
 - Fixed a bug where clicking a tag in `sl-select` wouldn't toggle the menu
 - Fixed a bug where options where `sl-select` options weren't always visible or scrollable
 - Fixed a bug where setting `null` on `sl-input`, `sl-textarea`, or `sl-select` would throw an error
+- Fixed a bug where `role` was on the wrong element and aria attribute weren't explicit in `sl-checkbox`, `sl-switch`, and `sl-radio`
 - Optimized `hasSlot` utility by using a simpler selector
 
 ## 2.0.0-beta.16

src/components/checkbox/checkbox.tsx

@@ -115,7 +115,6 @@ export class Checkbox {
           'checkbox--indeterminate': this.indeterminate
         }}
         htmlFor={this.inputId}
-        role="checkbox"
         onMouseDown={this.handleMouseDown}
       >
         <span part="control" class="checkbox__control">
@@ -156,6 +155,8 @@ export class Checkbox {
             value={this.value}
             checked={this.checked}
             disabled={this.disabled}
+            role="checkbox"
+            aria-checked={this.checked}
             aria-labelledby={this.labelId}
             onClick={this.handleClick}
             onBlur={this.handleBlur}

src/components/radio/radio.tsx

@@ -139,7 +139,6 @@ export class Radio {
           'radio--focused': this.hasFocus
         }}
         htmlFor={this.inputId}
-        role="radio"
         onKeyDown={this.handleKeyDown}
         onMouseDown={this.handleMouseDown}
       >
@@ -162,6 +161,8 @@ export class Radio {
             value={this.value}
             checked={this.checked}
             disabled={this.disabled}
+            role="radio"
+            aria-checked={this.checked}
             aria-labelledby={this.labelId}
             onClick={this.handleClick}
             onBlur={this.handleBlur}

src/components/switch/switch.tsx

@@ -110,7 +110,6 @@ export class Switch {
       <label
         part="base"
         htmlFor={this.switchId}
-        role="switch"
         class={{
           switch: true,
           'switch--checked': this.checked,
@@ -130,6 +129,8 @@ export class Switch {
             value={this.value}
             checked={this.checked}
             disabled={this.disabled}
+            role="switch"
+            aria-checked={this.checked}
             aria-labelledby={this.labelId}
             onClick={this.handleClick}
             onBlur={this.handleBlur}