fix(radio): process :focus and :focus-visible

adobe · Apr 3, 2023 · 77bc0e9 · 77bc0e9
1 parent 7b28309
commit 77bc0e9
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 5 deletions.
diff --git a/packages/radio/src/spectrum-config.js b/packages/radio/src/spectrum-config.js
@@ -28,6 +28,15 @@ const config = {
             outPackage: 'radio',
             fileName: 'radio',
             components: [
+                {
+                    find: [builder.pseudoClass('focus')],
+                    replace: [
+                        {
+                            replace: builder.pseudoClass('focus-visible'),
+                            hoist: true,
+                        },
+                    ],
+                },
                 {
                     // .spectrum-Radio-input:focus-visible+.spectrum-Radio-button:after
                     find: [

diff --git a/packages/radio/src/spectrum-radio.css b/packages/radio/src/spectrum-radio.css
@@ -226,7 +226,7 @@ governing permissions and limitations under the License.
         )
     );
 }
-:host(:focus) #button:before {
+:host(.focus-visible) #button:before {
     border-color: var(
         --highcontrast-radio-button-border-color-focus,
         var(
@@ -235,7 +235,16 @@ governing permissions and limitations under the License.
         )
     );
 }
-:host(:focus) #button:after {
+:host(:focus-visible) #button:before {
+    border-color: var(
+        --highcontrast-radio-button-border-color-focus,
+        var(
+            --mod-radio-button-border-color-focus,
+            var(--spectrum-radio-button-border-color-focus)
+        )
+    );
+}
+:host(.focus-visible) #button:after {
     border-color: var(
         --highcontrast-radio-focus-indicator-color,
         var(
@@ -257,7 +266,29 @@ governing permissions and limitations under the License.
             var(--spectrum-radio-focus-indicator-gap) * 2
     );
 }
-:host([checked]:focus) #input + #button:before {
+:host(:focus-visible) #button:after {
+    border-color: var(
+        --highcontrast-radio-focus-indicator-color,
+        var(
+            --mod-radio-focus-indicator-color,
+            var(--spectrum-radio-focus-indicator-color)
+        )
+    );
+    border-style: solid;
+    border-width: var(
+        --mod-radio-focus-indicator-thickness,
+        var(--spectrum-radio-focus-indicator-thickness)
+    );
+    height: calc(
+        var(--spectrum-radio-button-control-size) +
+            var(--spectrum-radio-focus-indicator-gap) * 2
+    );
+    width: calc(
+        var(--spectrum-radio-button-control-size) +
+            var(--spectrum-radio-focus-indicator-gap) * 2
+    );
+}
+:host(.focus-visible[checked]) #input + #button:before {
     border-color: var(
         --highcontrast-radio-button-checked-border-color-focus,
         var(
@@ -266,7 +297,25 @@ governing permissions and limitations under the License.
         )
     );
 }
-:host(:focus) #label {
+:host(:focus-visible[checked]) #input + #button:before {
+    border-color: var(
+        --highcontrast-radio-button-checked-border-color-focus,
+        var(
+            --mod-radio-button-checked-border-color-focus,
+            var(--spectrum-radio-button-checked-border-color-focus)
+        )
+    );
+}
+:host(.focus-visible) #label {
+    color: var(
+        --highcontrast-radio-neutral-content-color-focus,
+        var(
+            --mod-radio-neutral-content-color-focus,
+            var(--spectrum-radio-neutral-content-color-focus)
+        )
+    );
+}
+:host(:focus-visible) #label {
     color: var(
         --highcontrast-radio-neutral-content-color-focus,
         var(
@@ -328,7 +377,16 @@ governing permissions and limitations under the License.
         )
     );
 }
-:host([emphasized][checked]:focus) #input + #button:before {
+:host([emphasized].focus-visible[checked]) #input + #button:before {
+    border-color: var(
+        --highcontrast-radio-emphasized-accent-color-focus,
+        var(
+            --mod-radio-emphasized-accent-color-focus,
+            var(--spectrum-radio-emphasized-accent-color-focus)
+        )
+    );
+}
+:host([emphasized]:focus-visible[checked]) #input + #button:before {
     border-color: var(
         --highcontrast-radio-emphasized-accent-color-focus,
         var(