Improve lang switch accesibility

assets/_main.scss

@@ -249,15 +249,19 @@ ul.pagination {
   padding: $padding-16;
   margin: -$padding-16;
 
-  &:hover .book-languages-list {
-    display: block;
+  &:hover,
+  &:focus,
+  &:focus-within {
+    .book-languages-list {
+      display: block;
+    }  
   }
 
   .book-languages-list {
     display: none;
 
     position: absolute;
-    bottom: 0;
+    bottom: 100%;
     left: 0;
     padding: $padding-8 0;
 
@@ -265,7 +269,6 @@ ul.pagination {
     box-shadow: 0 0 $padding-4 rgba(0, 0, 0, 0.1);
 
     li {
-      padding: $padding-8 $padding-16;
       white-space: nowrap;
     }
 
@@ -279,6 +282,7 @@ ul.pagination {
 
     a {
       color: inherit;
+      padding: $padding-8 $padding-16;
     }
   }
 

exampleSite/resources/_gen/assets/scss/book.scss_50fc8c04e12a2f59027287995557ceff.json

@@ -1 +1 @@
-{"Target":"book.min.e44f7b3e03f829c264df576fb55b300cec33280fe834e604024e41b24dd6897a.css","MediaType":"text/css","Data":{"Integrity":"sha256-5E97PgP4KcJk31dvtVswDOwzKA/oNOYEAk5Bsk3WiXo="}}
+{"Target":"book.min.e5c9b9ce08a1b4d00a97034509105a57f3c0ddc4d20bbcff4043fa956e1481a4.css","MediaType":"text/css","Data":{"Integrity":"sha256-5cm5zgihtNAKlwNFCRBaV/PA3cTSC7z/QEP6lW4UgaQ="}}

layouts/partials/docs/languages.html

@@ -7,8 +7,7 @@
   {{ $langs = merge $langs (dict .Language.Lang .) }}
 {{ end }}
 
-<div class="book-languages">
-
+<div class="book-languages" tabindex="0" aria-haspopup="true">
   <ul>
     <li class="flex">
       <img src="{{ "svg/translate.svg" | relURL }}" class="book-icon" alt="Languages" />
@@ -18,7 +17,7 @@
 
   <ul class="book-languages-list">
     {{ range sort $langs }}
-    <li class="{{ if (eq $.Site.Language .Language ) }}active{{ end }}">
+    <li class="{{ if (eq $.Site.Language .Language) }}active{{ end }}">
       <a href="{{ .Permalink }}" class="flex">
         <img src="{{ "svg/translate.svg" | relURL }}" class="book-icon" alt="Languages" />
         {{ .Language.LanguageName }}