Accessibility focus checkboxes and radio boxes

res/css/_common.scss

@@ -692,3 +692,15 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
         border-radius: $radius;
     }
 }
+
+@define-mixin unreal-focus {
+    outline-width: 2px;
+    outline-style: solid;
+    outline-color: Highlight;
+
+    /* WebKit gets its native focus styles. */
+    @media (-webkit-min-device-pixel-ratio: 0) {
+        outline-color: -webkit-focus-ring-color;
+        outline-style: auto;
+    }
+}

res/css/views/elements/_StyledCheckbox.scss

@@ -80,5 +80,11 @@ limitations under the License.
             background-color: $accent-color;
             border-color: $accent-color;
         }
+
+        &.focus-visible {
+            & + label .mx_Checkbox_background {
+                @mixin unreal-focus;
+            }
+        }
     }
 }

res/css/views/elements/_StyledRadioButton.scss

@@ -63,6 +63,7 @@ limitations under the License.
             box-sizing: border-box;
             height: $font-16px;
             width: $font-16px;
+            margin-left: 1px; // For the highlight on focus
 
             border: $font-1-5px solid $radio-circle-color;
             border-radius: $font-16px;
@@ -77,6 +78,12 @@ limitations under the License.
             }
         }
 
+        &.focus-visible {
+            & + div {
+                @mixin unreal-focus;
+            }
+        }
+
         &:checked {
             & + div {
                 border-color: $active-radio-circle-color;