wcag compliance

src/components/_widget.scss

@@ -0,0 +1,134 @@
+
+
+@keyframes slideInUp {
+  from {
+    transform: translate3d(0, 100%, 0);
+    display: inherit;
+    visibility: visible;
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes slideOutDown {
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    display: none;
+    visibility: hidden;
+    transform: translate3d(0, 100%, 0);
+  }
+}
+
+.docked-widget {
+  position: fixed;
+  bottom: 0px;
+  right: 10px;
+  z-index: 9999;
+}
+
+.dock {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem;
+  width: 400px;
+  max-width: calc(100vw - 10px);
+  background: $theme-color;
+  color: $white;
+  font-family: $theme-font;
+  font-size: 1rem;
+  border: none;
+  color: $white;
+  font-size: 1rem;
+  line-height: 1;
+}
+
+
+.widget {
+  width: 400px;
+  max-width: calc(100vw - 10px);
+  border-bottom: none;
+  animation-duration: 0.2s;
+  animation-fill-mode: forwards;
+
+  &-entering {
+    animation-name: slideInUp;
+  }
+  &-entered {
+    display: inherit;
+    visibility: visible;
+  }
+  &-exiting {
+    animation-name: slideOutDown;
+  }
+  &-exited {
+    display: none;
+    visibility: hidden;
+  }
+
+  &-header {
+    background: $theme-color;
+    color: $white;
+    padding: 0.5rem;
+    display: flex;
+    align-items: center;
+
+    &-title {
+      display: flex;
+      flex-grow: 1;
+    }
+
+    &-icon {
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: transparent;
+      border: none;
+    }
+  }
+  &-body {
+    background: white;
+    padding: 10px;
+    height: 150px;
+  }
+  &-footer {
+    background: green;
+    line-height: 30px;
+    padding-left: 10px;
+  }
+}
+
+.arrow {
+  transform: rotateX(0deg);
+  transition: all 0.5s linear;
+  color: $white;
+  font-size: 1rem;
+  line-height: 1;
+
+  &.opened {
+    transform: rotateX(180deg);
+  }
+
+  &.closed {
+    transform: rotateX(0deg) translateY(25%);
+
+  }
+}
+
+@media screen and (max-width: 400px){
+  .docked-widget {
+    right: 0;
+    left: 0;
+  }
+
+  .dock, .widget {
+    max-width: 100vw;
+  }
+}