From 248bb32977a3576cb8ba474c892b71eb827ab085 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Fri, 27 Aug 2021 08:54:00 -0400
Subject: [PATCH] fix radio focus visible styles

---
 src/components/radio/radio.styles.ts |  7 ++---
 src/components/radio/radio.ts        | 40 ++++++++++++----------------
 2 files changed, 21 insertions(+), 26 deletions(-)

diff --git a/src/components/radio/radio.styles.ts b/src/components/radio/radio.styles.ts
index ef777daee..8611475ce 100644
--- a/src/components/radio/radio.styles.ts
+++ b/src/components/radio/radio.styles.ts
@@ -1,5 +1,6 @@
 import { css } from 'lit';
 import componentStyles from '../../styles/component.styles';
+import { focusVisibleSelector } from '../../internal/focus-visible';
 
 export default css`
   ${componentStyles}
@@ -46,7 +47,7 @@ export default css`
       var(--sl-transition-fast) color, var(--sl-transition-fast) box-shadow;
   }
 
-  .radio__control input[type='radio'] {
+  .radio__input {
     position: absolute;
     opacity: 0;
     padding: 0;
@@ -61,7 +62,7 @@ export default css`
   }
 
   /* Focus */
-  .radio.radio--focused:not(.radio--checked):not(.radio--disabled) .radio__control {
+  .radio:not(.radio--checked):not(.radio--disabled) .radio__input${focusVisibleSelector} ~ .radio__control {
     border-color: rgb(var(--sl-input-border-color-focus));
     background-color: rgb(var(--sl-input-background-color-focus));
     box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
@@ -81,7 +82,7 @@ export default css`
   }
 
   /* Checked + focus */
-  .radio.radio--checked:not(.radio--disabled).radio--focused .radio__control {
+  .radio.radio--checked:not(.radio--disabled) .radio__input${focusVisibleSelector} ~ .radio__control {
     border-color: rgb(var(--sl-color-primary-500));
     background-color: rgb(var(--sl-color-primary-500));
     box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
diff --git a/src/components/radio/radio.ts b/src/components/radio/radio.ts
index f6b3223fa..6d4c7d0cb 100644
--- a/src/components/radio/radio.ts
+++ b/src/components/radio/radio.ts
@@ -84,7 +84,7 @@ export default class SlRadio extends LitElement {
 
     // Radios must be part of a radio group
     if (!radioGroup) {
-      return [];
+      return [this];
     }
 
     return [...radioGroup.querySelectorAll('sl-radio')].filter((radio: this) => radio.name === this.name) as this[];
@@ -141,12 +141,6 @@ export default class SlRadio extends LitElement {
     }
   }
 
-  handleMouseDown(event: MouseEvent) {
-    // Prevent clicks on the label from briefly blurring the input
-    event.preventDefault();
-    this.input.focus();
-  }
-
   render() {
     return html`
       <label
@@ -159,8 +153,23 @@ export default class SlRadio extends LitElement {
         })}
         for=${this.inputId}
         @keydown=${this.handleKeyDown}
-        @mousedown=${this.handleMouseDown}
       >
+        <input
+          id=${this.inputId}
+          class="radio__input"
+          type="radio"
+          name=${ifDefined(this.name)}
+          value=${ifDefined(this.value)}
+          .checked=${live(this.checked)}
+          .disabled=${this.disabled}
+          aria-checked=${this.checked ? 'true' : 'false'}
+          aria-disabled=${this.disabled ? 'true' : 'false'}
+          aria-labelledby=${this.labelId}
+          @click=${this.handleClick}
+          @blur=${this.handleBlur}
+          @focus=${this.handleFocus}
+        />
+
         <span part="control" class="radio__control">
           <span part="checked-icon" class="radio__icon">
             <svg viewBox="0 0 16 16">
@@ -171,21 +180,6 @@ export default class SlRadio extends LitElement {
               </g>
             </svg>
           </span>
-
-          <input
-            id=${this.inputId}
-            type="radio"
-            name=${ifDefined(this.name)}
-            value=${ifDefined(this.value)}
-            .checked=${live(this.checked)}
-            .disabled=${this.disabled}
-            aria-checked=${this.checked ? 'true' : 'false'}
-            aria-disabled=${this.disabled ? 'true' : 'false'}
-            aria-labelledby=${this.labelId}
-            @click=${this.handleClick}
-            @blur=${this.handleBlur}
-            @focus=${this.handleFocus}
-          />
         </span>
 
         <span part="label" id=${this.labelId} class="radio__label">