Добавил доступности для field-toggler

.stylelintrc

@@ -252,7 +252,7 @@
     }],
     "at-rule-empty-line-before": ["always", {
       "message": "Перед @-правилами строку пустую оставь (кроме @import и @include)",
-      ignoreAtRules: ["import", "include"],
+      ignoreAtRules: ["import", "include", "function", "return", "if", "else"],
       ignore: ["after-comment"]
     }],
     "at-rule-name-case": ["lower", {
@@ -269,6 +269,8 @@
         "/^include/",
         "/^if/",
         "/^else/",
+        "/^function/",
+        "/^return/",
       ]
     }],
     "at-rule-no-vendor-prefix": [true, {

projectConfig.json

@@ -53,6 +53,7 @@
   "addCssBefore": [
     "./src/scss/variables.scss",
     "./src/scss/mixins.scss",
+    "./src/scss/functions.scss",
     "../../node_modules/owl.carousel/dist/assets/owl.carousel.css",
     "../../node_modules/nouislider/distribute/nouislider.css"
   ],

src/blocks/field-toggler/field-toggler.scss

@@ -41,20 +41,24 @@ $line-height:                 1.375em !default;
       position: absolute;
       top: 0.6em;
       left: 0;
-      width: 2.6em;
-      height: 1.2em;
+      width: px-to-em(35);
+      height: px-to-em(18);
       transform: translateY(-50%);
       background-color: #fff;
       border: 1px solid $border-color;
+
+      @at-root input:focus ~ & {
+        @include field-focus;
+      }
     }
 
     &:after {
       content: '';
       position: absolute;
       top: 0.6em;
-      left: 0;
-      width: 1.2em;
-      height: 1.2em;
+      left: 2px;
+      width: px-to-em(14);
+      height: px-to-em(14);
       transform: translateY(-50%);
       background-color: $gray-lightest;
       border: 1px solid $border-color;
@@ -62,7 +66,7 @@ $line-height:                 1.375em !default;
     }
 
     @at-root input:checked ~ &:after {
-      transform: translate(1.4em, -50%);
+      transform: translate(px-to-em(17), -50%);
     }
   }
 
@@ -72,12 +76,7 @@ $line-height:                 1.375em !default;
     left: 0;
     width: 0;
     height: 0;
-    visibility: hidden;
-
-    &:focus,
-    &:active {
-      @include field-focus;
-    }
+    opacity: 0;
   }
 
   &__help-text-wrap {

src/scss/functions.scss

+
+/**
+ * Преобразование пикселей в em на основе переменной с базовым размером шрифта
+ * (указывается в px) проекта.
+ * @param  {number} $px Число без единиц измерения, кол-во пикселей
+ * @param  {string} $font-size Число пикселей, размер конт. шрифта на проекте
+ * @return {string} Результат преобразования $px в em на основе $font-size
+ */
+
+@function px-to-em($px, $font-size: $font-size) {
+  @return (($px * 100 / ($font-size / 1px)) / 100) * 1em;
+}