fix(core): changed focus to focus-visible

siemens · Oct 26, 2022 · f0bade4 · f0bade4
1 parent 678a719
commit f0bade4
Show file tree

Hide file tree

Showing 14 changed files with 107 additions and 107 deletions.
diff --git a/packages/core/scss/components/_buttons.scss b/packages/core/scss/components/_buttons.scss
@@ -31,13 +31,16 @@
     font-weight: $font-weight-normal;
   }
 
-  &:focus,
+  &:focus-visible,
   &.focus {
     box-shadow: none;
   }
 }
 
-$button-categories: (primary, secondary);
+$button-categories: (
+  primary,
+  secondary
+);
 
 @mixin btn($name, $enable-border: true) {
   .btn-#{$name} {
@@ -47,7 +50,6 @@ $button-categories: (primary, secondary);
 
     &,
     &.focus,
-    &:focus,
     &:focus-visible {
       background-color: var(--theme-btn-#{$name}--background);
       color: var(--theme-btn-#{$name}--color);
@@ -73,11 +75,13 @@ $button-categories: (primary, secondary);
       @if $enable-border {
         border-color: var(--theme-btn-#{$name}--border-color--hover) !important;
       }
+
       background-color: var(--theme-btn-#{$name}--background--hover) !important;
       color: var(--theme-btn-#{$name}--color--hover) !important;
     }
 
     &.selected {
+
       &.hover,
       &:hover {
         background-color: var(--theme-btn-#{$name}--background--selected-hover);
@@ -87,18 +91,20 @@ $button-categories: (primary, secondary);
 
     &:not(:disabled):not(.disabled):active,
     &:not(:disabled):not(.disabled).active,
-    .show > &.dropdown-toggle {
+    .show>&.dropdown-toggle {
       @if $enable-border {
         border-color: var(--theme-btn-#{$name}--border-color--active) !important;
       }
+
       background-color: var(--theme-btn-#{$name}--background--active) !important;
       color: var(--theme-btn-#{$name}--color--active) !important;
     }
 
     &.selected {
+
       &:not(:disabled):not(.disabled):active,
       &:not(:disabled):not(.disabled).active,
-      .show > &.dropdown-toggle {
+      .show>&.dropdown-toggle {
         background-color: var(--theme-btn-#{$name}--background--selected-active);
         color: var(--theme-btn-#{$name}--color--selected-active);
       }
@@ -107,9 +113,11 @@ $button-categories: (primary, secondary);
     &.disabled,
     &:disabled {
       cursor: initial;
+
       @if $enable-border {
         border-color: var(--theme-btn-#{$name}--border-color--disabled);
       }
+
       background-color: var(--theme-btn-#{$name}--background--disabled);
       color: var(--theme-btn-#{$name}--color--disabled);
       opacity: 1;
@@ -127,6 +135,7 @@ $button-categories: (primary, secondary);
 .btn-icon {
   min-width: $x-large-space;
   width: $x-large-space;
+
   .glyph {
     margin-right: 0;
   }

diff --git a/packages/core/scss/components/_checkboxes.scss b/packages/core/scss/components/_checkboxes.scss
@@ -18,27 +18,28 @@
   }
 
   .ag-checkbox-input-wrapper {
+
     [type='checkbox']:not(:checked),
     [type='checkbox']:checked {
       position: absolute;
       visibility: unset;
     }
   }
 
-  [type='checkbox']:not(:checked) + label,
-  [type='checkbox']:checked + label {
+  [type='checkbox']:not(:checked)+label,
+  [type='checkbox']:checked+label {
     position: relative;
     line-height: $size;
     user-select: none;
 
     color: var(--theme-checkbox-label--color);
   }
 
-  [type='checkbox']:not(:disabled) + label {
+  [type='checkbox']:not(:disabled)+label {
     cursor: pointer;
   }
 
-  [type='checkbox'] + label:before {
+  [type='checkbox']+label:before {
     content: '';
     width: $size;
     height: $size;
@@ -50,49 +51,49 @@
     background-size: contain;
   }
 
-  [type='checkbox'] + label:focus {
+  [type='checkbox']+label:focus-visible {
     &:before {
       outline: 1px solid var(--focus--border-color);
       outline-offset: var(--theme-checkbox--focus--outline-offset);
     }
   }
 
-  [type='checkbox']:focus + label {
+  [type='checkbox']:focus-visible+label {
     &:before {
       outline: 1px solid var(--focus--border-color);
       outline-offset: var(--theme-checkbox--focus--outline-offset);
     }
   }
 
   [type='checkbox']:not(:checked) {
-    & + label:before {
+    &+label:before {
       background-color: var(--theme-checkbox-unchecked--background);
       border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color);
     }
 
-    &:hover + label:before {
+    &:hover+label:before {
       background-color: var(--theme-checkbox-unchecked--background--hover);
       border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--hover);
     }
 
-    &:active + label:before {
+    &:active+label:before {
       background-color: var(--theme-checkbox-unchecked--background--active);
       border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--active);
     }
 
-    &:disabled + label::before {
+    &:disabled+label::before {
       background-color: var(--theme-checkbox-unchecked--background--disabled);
       border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--disabled);
     }
   }
 
   [type='checkbox']:checked {
-    & + label:before {
+    &+label:before {
       background-color: var(--theme-checkbox-checked--background);
       border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color);
     }
 
-    & + label:after {
+    &+label:after {
       content: '';
       width: 9px;
       height: 4px;
@@ -107,33 +108,33 @@
       transform: rotate(-45deg) scale(2);
     }
 
-    &:hover + label:before {
+    &:hover+label:before {
       background-color: var(--theme-checkbox-checked--background--hover);
       border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--hover);
     }
 
-    &:active + label:before {
+    &:active+label:before {
       background-color: var(--theme-checkbox-checked--background--active);
       border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--active);
     }
 
-    &:disabled + label:before {
+    &:disabled+label:before {
       background-color: var(--theme-checkbox-checked--background--disabled);
       border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--disabled);
     }
 
-    &:disabled + label::after {
+    &:disabled+label::after {
       border-color: var(--theme-checkbox-checked--color--disabled);
     }
   }
 
-  [type='checkbox']:disabled + label:before {
+  [type='checkbox']:disabled+label:before {
     pointer-events: none;
     opacity: 0.5;
   }
 
   [type='checkbox']:indeterminate {
-    & + label:after {
+    &+label:after {
       content: '';
       display: block;
       width: 14px;
@@ -144,32 +145,32 @@
       left: 5px;
     }
 
-    & + label:before {
+    &+label:before {
       background-color: var(--theme-checkbox-mixed--background);
       border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-mixed--border-color);
     }
 
-    &:hover + label:before {
+    &:hover+label:before {
       background-color: var(--theme-checkbox-mixed--background--hover);
       border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-mixed--border-color--hover);
     }
 
-    &:active + label:before {
+    &:active+label:before {
       background-color: var(--theme-checkbox-mixed--background--active);
       border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-mixed--border-color--active);
     }
 
-    &:disabled + label::before {
+    &:disabled+label::before {
       background-color: var(--theme-checkbox-mixed--background--disabled);
       border: var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-mixed--border-color--disabled);
     }
 
-    &:disabled + label::after {
+    &:disabled+label::after {
       border-color: var(--theme-checkbox-mixed--color--disabled);
     }
   }
 
-  [type='checkbox']:disabled + label {
+  [type='checkbox']:disabled+label {
     color: var(--theme-checkbox-label--color--disabled);
   }
 }

diff --git a/packages/core/scss/components/_dropdown.scss b/packages/core/scss/components/_dropdown.scss
@@ -47,7 +47,7 @@
     height: 11.562rem;
     margin: 0.937rem 0 0.937rem 0.937rem;
 
-    > * {
+    >* {
       margin-bottom: 1rem;
     }
   }
@@ -62,15 +62,14 @@
 .dropdown-menu {
   background-color: var(--theme-menu--background);
   @include text-default-single;
-  border: var(--theme-menu--border-thickness) solid
-    var(--theme-menu--border--color);
+  border: var(--theme-menu--border-thickness) solid var(--theme-menu--border--color);
   border-radius: var(--theme-menu--border-radius);
   max-width: 100vw;
   padding: $tiny-space 0;
   transition: background-color $default-time;
   box-shadow: var(--theme-menu--box-shadow);
 
-  &.xl > .dropdown-item {
+  &.xl>.dropdown-item {
     height: 2.5rem;
     line-height: 2.187rem;
   }
@@ -88,7 +87,7 @@
   display: flex;
   padding: $tiny-space $small-space;
 
-  ix-icon-button + ix-icon-button {
+  ix-icon-button+ix-icon-button {
     margin-inline-start: $small-space;
   }
 }
@@ -103,7 +102,7 @@
   border: 1px solid transparent;
   color: var(--theme-menu-item--color);
 
-  &:focus {
+  &:focus-visible {
     background-color: var(--theme-menu-item--background);
     color: var(--theme-menu-item--color);
   }
@@ -131,13 +130,13 @@
     background-color: var(--theme-menu-item--background--disabled);
   }
 
-  > a,
+  >a,
   a:hover,
   a:active {
     color: var(--theme-color-std-text);
   }
 
-  > .glyph {
+  >.glyph {
     color: var(--theme-menu-item-icon--color);
 
     &.glyph-single-check {
@@ -149,7 +148,7 @@
 }
 
 .dropdown-item {
-  > input[type='checkbox'] + label {
+  >input[type='checkbox']+label {
     margin-bottom: 0px;
 
     &::before {

diff --git a/packages/core/scss/components/_forms.scss b/packages/core/scss/components/_forms.scss
@@ -48,7 +48,7 @@
   }
 }
 
-.form-control:focus {
+.form-control:focus-visible {
   color: var(--theme-input--color);
 }
 
@@ -58,6 +58,7 @@
     margin-left: 2px;
     display: none;
   }
+
   text-align: right;
 }
 
@@ -105,14 +106,14 @@
   align-items: center;
   flex-wrap: nowrap;
 
-  > .glyph {
+  >.glyph {
     display: block;
     position: absolute;
     margin-inline-start: 0.312rem;
     color: var(--theme-color-std-text);
   }
 
-  > input {
+  >input {
     padding-inline-start: 2.2rem;
   }
 }
@@ -139,6 +140,7 @@ textarea {
 }
 
 input {
+
   &.disabled,
   &:disabled {
     color: var(--theme-input--color--disabled);