Accessibility fixes

[wolnelektury.git] / src / wolnelektury / static / 2022 / styles / components / _lang.scss

diff --git a/src/wolnelektury/static/2022/styles/components/_lang.scss b/src/wolnelektury/static/2022/styles/components/_lang.scss
index ef5d7bc..8cc632d 100644 (file)
--- a/src/wolnelektury/static/2022/styles/components/_lang.scss
+++ b/src/wolnelektury/static/2022/styles/components/_lang.scss
@@ -4,9 +4,6 @@
 
   width: 150px;
   right: 50px + 16px;
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 350ms $ease-out;
   z-index: $master-layer + 1;
   display: none;
 
@@ -14,21 +11,20 @@
       display: block;
   }
 
-  &.is-open {
+  &:has(.c-lang__list:popover-open) {
     .c-lang__button {
       .icon-arrow-down {
         transform: rotate(-180deg);
       }
     }
-    .c-lang__list {
-      transform: none;
-      opacity: 1;
-      pointer-events: all;
-    }
   }
 }
 
 .c-lang__button {
+    border: 0;
+    background: none;
+    padding: 0;
+    font: inherit;
   display: flex;
   align-items: center;
   color: $color-white;
@@ -46,18 +42,31 @@
   }
 }
 
+
 .c-lang__list {
-  margin-top: 10px;
+    --focus-ring: #083F4D;
+    position-area: bottom span-right;
+    position: absolute;
+    inset: auto;
+    width: 150px;
+    margin: 10px 0 0 0;
+    border: 0;
   border-radius: 10px;
   background-color: #F7BA00;
   overflow: hidden;
   transform: translateY(-10px);
   opacity: 0;
-  transition: all 350ms $ease-out;
-  pointer-events: none;
-  display: flex;
   flex-direction: column;
+  transition: all 350ms $ease-out,
+              display 350ms allow-discrete,
+              overlay 350ms allow-discrete;
 
+  &:popover-open {
+      display: flex;
+      opacity: 1;
+      transform: none;
+  }
+  
   button {
     display: block;
     padding: 9px 20px;
@@ -80,3 +89,10 @@
     }
   }
 }
+
+@starting-style {
+  .c-lang__list:popover-open {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+}