fix(patterns/dialogs): prevent dialog elements to be focusable on mod…

…al & layer (#895) Fix #887 Fix #888
adeo · Sep 14, 2021 · 18241c3 · 18241c3
1 parent 8afb9a9
commit 18241c3
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 18 deletions.
diff --git a/packages/styles/components/_c.layer.scss b/packages/styles/components/_c.layer.scss
@@ -20,37 +20,40 @@
     max-width: calc(100% - #{$mu200});
     padding-bottom: $mu100;
     transform: translateX(100%);
-    transition: transform 0.4s ease;
+    transition: visibility 0s linear 0.4s, transform 0.4s;
+    visibility: hidden;
     width: 100%;
 
-    @include set-from-screen("m") {
+    @include set-from-screen('m') {
       max-width: 25rem; // 400px
     }
 
-    @include set-from-screen("m-medium") {
+    @include set-from-screen('m-medium') {
       max-width: 28.6875rem; // 459px
     }
 
-    @include set-from-screen("l") {
+    @include set-from-screen('l') {
       max-width: 28rem; // 448px;
       padding-bottom: $mu150;
     }
 
     &.is-open {
       pointer-events: all;
       transform: translateX(0);
+      transition: visibility 0s linear 0s, transform 0.4s;
+      visibility: visible;
     }
 
     &--extend {
-      @include set-from-screen("m") {
+      @include set-from-screen('m') {
         max-width: 31.75rem; // 508px;
       }
 
-      @include set-from-screen("m-medium") {
+      @include set-from-screen('m-medium') {
         max-width: 36.3125rem; // 581px
       }
 
-      @include set-from-screen("l") {
+      @include set-from-screen('l') {
         max-width: 43rem; // 688px;
       }
     }
@@ -92,8 +95,8 @@
   }
 
   &__title {
-    @include set-font-scale("04", "m");
-    @include set-font-weight("regular");
+    @include set-font-scale('04', 'm');
+    @include set-font-weight('regular');
 
     color: $color-font-light;
     margin-bottom: 0;
@@ -107,7 +110,7 @@
     align-self: flex-start;
     background:
       transparent
-      url(inline-icons("control-cross-32", $color-grey-500)) no-repeat;
+      url(inline-icons('control-cross-32', $color-grey-500)) no-repeat;
     background-size: contain;
     cursor: pointer;
     height: $mu200;
@@ -133,7 +136,7 @@
       position: relative;
 
       &::after {
-        content: "";
+        content: '';
         background-image:
           linear-gradient(
             to top,

diff --git a/packages/styles/components/_c.modal.scss b/packages/styles/components/_c.modal.scss
@@ -23,7 +23,8 @@
     opacity: 0;
     position: relative;
     transform: translateY(-25%);
-    transition: transform 0.4s ease, opacity 0.4s ease;
+    transition: visibility 0s linear 0.4s, transform 0.4s ease, opacity 0.4s ease;
+    visibility: hidden;
     width: 100%;
 
     @include set-from-screen(m) {
@@ -49,6 +50,8 @@
       opacity: 1;
       pointer-events: all;
       transform: translateY(0);
+      transition: visibility 0s linear 0s, transform 0.4s ease, opacity 0.4s ease;
+      visibility: visible;
     }
   }
 
@@ -77,8 +80,8 @@
   }
 
   &__title {
-    @include set-font-scale("04", "m");
-    @include set-font-weight("regular");
+    @include set-font-scale('04', 'm');
+    @include set-font-weight('regular');
 
     color: $color-font-light;
     margin-bottom: 0;
@@ -94,7 +97,7 @@
     width: $mu200;
     background:
       transparent
-      url(inline-icons("control-cross-32", $color-grey-500)) no-repeat;
+      url(inline-icons('control-cross-32', $color-grey-500)) no-repeat;
     background-size: contain;
 
     &-text {
@@ -107,7 +110,7 @@
   }
 
   &__body {
-    @include set-font-scale("05", "m");
+    @include set-font-scale('05', 'm');
 
     flex: 1 1;
     color: $color-font-darker;
@@ -132,8 +135,8 @@
   }
 
   &__heading {
-    @include set-font-scale("06", "m");
-    @include set-font-weight("semi-bold");
+    @include set-font-scale('06', 'm');
+    @include set-font-weight('semi-bold');
 
     color: $color-font-darkest;
     margin-bottom: 0;