fix: fixed versions dropdown

Kotlin · Sep 18, 2024 · 2e6dace · 2e6dace
1 parent f04fd6b
commit 2e6dace
Show file tree

Hide file tree

Showing 8 changed files with 110 additions and 85 deletions.
diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/dropdown/styles.scss b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/dropdown/styles.scss
@@ -19,7 +19,7 @@
 
     display: none;
 
-    overflow-y: scroll;
+    overflow-y: auto;
 
     min-width: 272px;
     max-width: 360px;
@@ -58,7 +58,7 @@
 
     display: block;
 
-    padding: var(--size-s2) 44px;
+    padding: var(--size-s2) var(--size-s3);
 
     list-style-type: none;
 
@@ -82,6 +82,10 @@
       outline: var(--focus-outline);
     }
 
+    &:visited {
+      color: var(--color-text-nav-dt);
+    }
+
     &_active {
       background-color: var(--color-key-blue);
 
@@ -90,6 +94,16 @@
       }
     }
 
+    &_link {
+      text-decoration: none;
+
+      color: var(--color-text-nav-dt);
+
+      &:focus-visible {
+        outline: var(--focus-outline);
+      }
+    }
+
     & .checkbox {
       pointer-events: none;
     }

diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/filter-section/index.ts b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/filter-section/index.ts
@@ -39,19 +39,19 @@ function initFilterSection(): void {
   const dropdownButton = document.getElementById('filter-section-dropdown');
 
   if (!navigation || !libraryVersion || !filterSection || !firstButtonAfterFilterSection || !dropdownButton) {
-    console.error('Navbar elements are not found');
+    console.warn('Dokka: filter section is not found');
     return;
   }
 
   const options = filterSection?.querySelectorAll('.dropdown--option');
   const tags = filterSection?.querySelectorAll('.platform-selector');
 
   if (!tags || !options) {
-    console.error('Filter section items are not found');
+    console.warn('Dokka: filter section items are not found');
     return;
   }
   if (tags.length !== options.length) {
-    console.error('Filter section items are not equal');
+    console.warn('Dokka: filter section items are not equal');
     return;
   }
 

diff --git a/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/platform-tag/styles.scss b/dokka-subprojects/plugin-base-frontend/src/main/ui-kit/platform-tag/styles.scss
@@ -8,7 +8,6 @@
 
   padding: 10px 12px;
 
-  cursor: pointer;
   letter-spacing: -0.03em;
 
   text-transform: capitalize;
@@ -20,6 +19,18 @@
   font: var(--font-text-s);
 }
 
+button.platform-tag {
+  cursor: pointer;
+
+  &:focus-visible {
+    outline: var(--focus-outline);
+  }
+}
+
+.platform-selector-option {
+  padding-left: 44px;
+}
+
 .platform-tag.js-like,
 .platform-selector-option.js-like,
 .platform-tag.jvm-like,

diff --git a/dokka-subprojects/plugin-base/src/main/resources/dokka/ui-kit/ui-kit.css b/dokka-subprojects/plugin-base/src/main/resources/dokka/ui-kit/ui-kit.css
@@ -413,7 +413,7 @@
   top: 44px;
   right: 0;
   display: none;
-  overflow-y: scroll;
+  overflow-y: auto;
   min-width: 272px;
   max-width: 360px;
   max-height: 400px;
@@ -446,7 +446,7 @@
 .dropdown--option {
   position: relative;
   display: block;
-  padding: var(--size-s2) 44px;
+  padding: var(--size-s2) var(--size-s3);
   list-style-type: none;
   cursor: pointer;
   letter-spacing: -0.03em;
@@ -465,6 +465,10 @@
   outline: var(--focus-outline);
 }
 
+.dropdown--option:visited {
+  color: var(--color-text-nav-dt);
+}
+
 .dropdown--option_active {
   background-color: var(--color-key-blue);
 }
@@ -473,6 +477,15 @@
   background-color: #639fff;
 }
 
+.dropdown--option_link {
+  text-decoration: none;
+  color: var(--color-text-nav-dt);
+}
+
+.dropdown--option_link:focus-visible {
+  outline: var(--focus-outline);
+}
+
 .dropdown--option .checkbox {
   pointer-events: none;
 }
@@ -1374,14 +1387,25 @@
 .platform-tag {
   --platform-tag-color: #bababb;
   padding: 10px 12px;
-  cursor: pointer;
   letter-spacing: -0.03em;
   text-transform: capitalize;
   border: 0 none;
   border-radius: var(--size-s1);
   font: var(--font-text-s);
 }
 
+button.platform-tag {
+  cursor: pointer;
+}
+
+button.platform-tag:focus-visible {
+  outline: var(--focus-outline);
+}
+
+.platform-selector-option {
+  padding-left: 44px;
+}
+
 .platform-tag.js-like, .platform-selector-option.js-like, .platform-tag.jvm-like, .platform-selector-option.jvm-like, .platform-tag.wasm-like, .platform-selector-option.wasm-like {
   text-transform: uppercase;
 }

diff --git a/dokka-subprojects/plugin-base/src/main/resources/dokka/ui-kit/ui-kit.min.css b/dokka-subprojects/plugin-base/src/main/resources/dokka/ui-kit/ui-kit.min.css
diff --git a/dokka-subprojects/plugin-base/src/main/resources/dokka/ui-kit/ui-kit.min.js b/dokka-subprojects/plugin-base/src/main/resources/dokka/ui-kit/ui-kit.min.js
diff --git a/...in-versioning/src/main/kotlin/org/jetbrains/dokka/versioning/VersionsNavigationCreator.kt b/...in-versioning/src/main/kotlin/org/jetbrains/dokka/versioning/VersionsNavigationCreator.kt
@@ -5,8 +5,11 @@
 package org.jetbrains.dokka.versioning
 
 import kotlinx.html.a
+import kotlinx.html.button
 import kotlinx.html.div
+import kotlinx.html.li
 import kotlinx.html.stream.appendHTML
+import kotlinx.html.ul
 import org.jetbrains.dokka.plugability.DokkaContext
 import org.jetbrains.dokka.plugability.configuration
 import org.jetbrains.dokka.plugability.plugin
@@ -49,33 +52,54 @@ public class HtmlVersionsNavigationCreator(
             .let { versions -> versionsOrdering.order(versions.keys.toList()).map { it to versions[it] } }
             .takeIf { it.isNotEmpty() }
             ?.let { orderedVersions ->
-                StringBuilder().appendHTML().div(classes = "versions-dropdown") {
+                StringBuilder().appendHTML().div(classes = "dropdown versions-dropdown") {
+                    attributes["data-role"] = "dropdown"
                     val activeVersion = getActiveVersion(position)
-                    val relativePosition: String  = activeVersion?.value?.let { output.toRelativeString(it) } ?: "index.html"
-                    div(classes = "versions-dropdown-button") {
+                    val relativePosition: String =
+                        activeVersion?.value?.let { output.toRelativeString(it) } ?: "index.html"
+                    button(classes = "button button_dropdown") {
+                        attributes["role"] = "combobox"
+                        attributes["data-role"] = "dropdown-toggle"
+                        attributes["aria-controls"] = "versions-listbox"
+                        attributes["aria-haspopup"] = "listbox"
+                        attributes["aria-expanded"] = "false"
+                        attributes["aria-label"] = "Select version"
                         activeVersion?.key?.let { text(it) }
                     }
-                    div(classes = "versions-dropdown-data") {
+                    ul(classes = "dropdown--list") {
+                        attributes["role"] = "listbox"
+                        attributes["data-role"] = "dropdown-listbox"
+                        attributes["aria-label"] = "Versions"
+                        attributes["id"] = "versions-listbox"
                         orderedVersions.forEach { (version, path) ->
-                            if (version == activeVersion?.key) {
-                                a(href = output.name) { text(version) }
-                            } else {
-                                val isExistsFile =
-                                    if (version == versioningStorage.currentVersion.name)
-                                        path?.resolve(relativePosition)?.exists() == true
-                                    else
-                                        versioningStorage.previousVersions[version]?.src?.resolve(relativePosition)
-                                            ?.exists() == true
+                            li {
+                                if (version == activeVersion?.key) {
+                                    a(classes = "dropdown--option dropdown--option-link", href = output.name) {
+                                        attributes["role"] = "option"
+                                        text(version)
+                                    }
+                                } else {
+                                    val isExistsFile =
+                                        if (version == versioningStorage.currentVersion.name)
+                                            path?.resolve(relativePosition)?.exists() == true
+                                        else
+                                            versioningStorage.previousVersions[version]?.src?.resolve(relativePosition)
+                                                ?.exists() == true
 
-                                val absolutePath =
-                                    if (isExistsFile)
-                                        path?.resolve(relativePosition)
-                                    else
-                                        versioningStorage.currentVersion.dir.resolve("not-found-version.html")
+                                    val absolutePath =
+                                        if (isExistsFile)
+                                            path?.resolve(relativePosition)
+                                        else
+                                            versioningStorage.currentVersion.dir.resolve("not-found-version.html")
 
-                                a(href = absolutePath?.toRelativeString(position) +
-                                        if (!isExistsFile) "?v=" + version.urlEncoded() else "") {
+                                    a(
+                                        classes = "dropdown--option dropdown--option-link",
+                                        href = absolutePath?.toRelativeString(position) +
+                                                if (!isExistsFile) "?v=" + version.urlEncoded() else ""
+                                    ) {
+                                        attributes["role"] = "option"
                                         text(version)
+                                    }
                                 }
                             }
                         }

diff --git a/dokka-subprojects/plugin-versioning/src/main/resources/dokka/styles/multimodule.css b/dokka-subprojects/plugin-versioning/src/main/resources/dokka/styles/multimodule.css
@@ -3,17 +3,7 @@
  */
 
 .versions-dropdown {
-  display: flex;
-  align-items: center;
-  position: relative;
-  height: 40px;
-  border-radius: 4px;
-  padding-left: var(--size-s2);
-  cursor: pointer;
-}
-
-.versions-dropdown:active {
-  background-color: var(--color-key-blue);
+  margin-left: var(--size-s2);
 }
 
 @media (width < 900px) {
@@ -22,50 +12,11 @@
   }
 }
 
-.versions-dropdown-button {
-  display: flex;
-  border: none;
-  cursor: pointer;
-  padding: 5px;
-}
-
-.versions-dropdown-button::after {
-    content: '';
-    -webkit-mask: url("../images/arrow_down.svg") no-repeat 50% 50%;
-    mask: url("../images/arrow_down.svg") no-repeat 50% 50%;
-    mask-size: auto;
-    -webkit-mask-size: cover;
-    mask-size: cover;
-    background-color: #fff;
-    display: inline-block;
-    transform: rotate(90deg);
-    width: 24px;
-    height: 16px;
-}
-
-.versions-dropdown-data {
-  display: none;
-  position: absolute;
-  background-color: #27282c;
-  border: 1px solid hsla(0, 0%, 100%, .6);
-  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
-  z-index: 1;
-  overflow-y: auto;
-  max-height: 200px;
+.versions-dropdown .dropdown--list {
+  top: 40px;
   min-width: 50px;
 }
 
-.versions-dropdown-data > a {
-  display: block;
-  padding: 5px;
-  color: #fff;
-  text-decoration: none;
-}
-
-.versions-dropdown-data > a:hover {
-  background-color: hsla(0,0%,100%,.1)
-}
-
-.versions-dropdown:hover .versions-dropdown-data {
+.no-js .versions-dropdown:hover .dropdown--list {
   display: block;
 }