From f4c26115751336ce0793c2a7e4518752f0e8d672 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Thu, 27 Aug 2020 16:51:31 -0400
Subject: [PATCH] Fix role/aria

---
 CHANGELOG.md                         | 1 +
 src/components/checkbox/checkbox.tsx | 3 ++-
 src/components/radio/radio.tsx       | 3 ++-
 src/components/switch/switch.tsx     | 3 ++-
 4 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index db21734a..d089856b 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/src/components/checkbox/checkbox.tsx b/src/components/checkbox/checkbox.tsx
index 76101ca8..f385db58 100644
--- a/src/components/checkbox/checkbox.tsx
+++ b/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}
diff --git a/src/components/radio/radio.tsx b/src/components/radio/radio.tsx
index dbf8dd31..fe9a9e47 100644
--- a/src/components/radio/radio.tsx
+++ b/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}
diff --git a/src/components/switch/switch.tsx b/src/components/switch/switch.tsx
index c85d1c39..d2298fd9 100644
--- a/src/components/switch/switch.tsx
+++ b/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}