[design] improve radio and checkbox accessibility

Author: zombieFox

src/css/form.css

@@ -326,6 +326,9 @@ input[type="radio"]{
 
 input[type="checkbox"]+label,
 input[type="radio"]+label{
+padding:0.5em;
+margin:-0.25em-0.5em;
+border-radius:var(--theme-radius);
 color:rgb(var(--form-label));
 font-size:1em;
 font-family:var(--font-regular);
@@ -334,19 +337,21 @@ input[type="radio"]+label{
 flex-direction: row;
 justify-content: flex-start;
 align-items: flex-start;
-transition: transform var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast);
+transition: transform var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
 }
 
-input[type="checkbox"]:focus+label,
 input[type="checkbox"]:hover+label,
-input[type="radio"]:focus+label,
-input[type="radio"]:hover+label{
+input[type="checkbox"]:focus+label,
+input[type="radio"]:hover+label,
+input[type="radio"]:focus+label{
 color:rgb(var(--form-label-hover));
+box-shadow:var(--form-hover-ring);
 }
 
 input[type="checkbox"]:active+label,
 input[type="radio"]:active+label{
 color:rgb(var(--form-label-focus-active));
+box-shadow:var(--form-focus-ring-accent);
 }
 
 input[type="checkbox"]:checked+label,
@@ -355,8 +360,13 @@ input[type="radio"]:checked+label{
 }
 
 input[type="checkbox"]:disabled+label,
-input[type="radio"]:disabled+label{
+input[type="checkbox"]:disabled:hover+label,
+input[type="checkbox"]:disabled:focus+label,
+input[type="radio"]:disabled+label,
+input[type="radio"]:disabled:hover+label,
+input[type="radio"]:disabled:focus+label{
 color:rgb(var(--form-label-disabled));
+box-shadow: none;
 cursor: default;
 }
 
@@ -974,6 +984,8 @@ input[type="range"]:disabled::-moz-range-progress{
 .form-gridinput[type="checkbox"]+label,
 .form-gridinput[type="radio"]+label{
 background-color: transparent;
+padding:0;
+margin:0;
 display: block;
 width:calc(var(--form-thumb-size) *1.75);
 height:calc(var(--form-thumb-size) *1.75);
@@ -982,6 +994,13 @@ input[type="range"]:disabled::-moz-range-progress{
 z-index:1;
 }
 
+.form-gridinput[type="checkbox"]:hover+label,
+.form-gridinput[type="checkbox"]:focus+label,
+.form-gridinput[type="radio"]:hover+label,
+.form-gridinput[type="radio"]:focus+label{
+box-shadow: none;
+}
+
 .form-gridinput[type="checkbox"]+label:before,
 .form-gridinput[type="radio"]+label:before{
 content:"";

src/css/variables.css

@@ -103,8 +103,8 @@
 --form-group-text-border-disabled:var(--theme-gray-01);
 --form-border-disabled:var(--theme-gray-02);
 --form-icon:var(--theme-gray-08);
---form-icon-hover-focus:var(--theme-gray-20);
---form-icon-active:var(--theme-accent);
+--form-icon-hover-focus:var(--theme-gray-16);
+--form-icon-active:var(--theme-style-text);
 --form-icon-checked:var(--theme-style-text);
 --form-icon-disabled:var(--theme-gray-04);
 --form-placeholder:var(--theme-gray-06);