[FIX] fixes to the dropdown buttons (#831)

* add missing space in launch button text

* fix hover for drop-down menus

Previously, there was a gap between the hover area and the drop-down. When the mouse would move from the former to the latter, the drop-down would disappear.

* include alt text for the launch button logos

src/sphinx_book_theme/assets/styles/sections/_header-article.scss

@@ -91,7 +91,8 @@ label.sidebar-toggle.secondary-toggle {
     font-size: 1.3rem;
     color: var(--pst-color-text-muted);
     border: none;
-    padding: 0 0.5rem;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
 
     // Make sure anything inside is aligned vertically
     display: flex;

src/sphinx_book_theme/header_buttons/launch.py

@@ -1,4 +1,5 @@
 """Launch buttons for Binder / Thebe / Colab / etc."""
+
 from pathlib import Path
 from typing import Any, Dict, Optional
 from urllib.parse import urlencode, quote
@@ -133,7 +134,7 @@ def add_launch_buttons(
             {
                 "type": "link",
                 "text": "Binder",
-                "tooltip": translation("Launch on") + "Binder",
+                "tooltip": translation("Launch on") + " Binder",
                 "icon": "_static/images/logo_binder.svg",
                 "url": url,
             }
@@ -151,7 +152,7 @@ def add_launch_buttons(
             {
                 "type": "link",
                 "text": "JupyterHub",
-                "tooltip": translation("Launch on") + "JupyterHub",
+                "tooltip": translation("Launch on") + " JupyterHub",
                 "icon": "_static/images/logo_jupyterhub.svg",
                 "url": url,
             }
@@ -166,7 +167,7 @@ def add_launch_buttons(
                 {
                     "type": "link",
                     "text": "Colab",
-                    "tooltip": translation("Launch on") + "Colab",
+                    "tooltip": translation("Launch on") + " Colab",
                     "icon": "_static/images/logo_colab.png",
                     "url": url,
                 }
@@ -182,7 +183,7 @@ def add_launch_buttons(
                 {
                     "type": "link",
                     "text": "Deepnote",
-                    "tooltip": translation("Launch on") + "Deepnote",
+                    "tooltip": translation("Launch on") + " Deepnote",
                     "icon": "_static/images/logo_deepnote.svg",
                     "url": url,
                 }

src/sphinx_book_theme/theme/sphinx_book_theme/macros/buttons.html

@@ -6,7 +6,7 @@
   {% if icon.startswith("fa") -%}
     <i class="{{ icon }}"></i>
   {% else %}
-    <img src="{{ pathto(icon, 1) }}">
+    <img alt="{{ translate(text) }} {{ translate("logo") }}" src="{{ pathto(icon, 1) }}">
   {% endif -%}
 </span>
 {% endif %}

tests/test_build/build__header-article.html

@@ -18,39 +18,39 @@
       </button>
       <ul class="dropdown-menu">
        <li>
-        <a class="btn btn-sm dropdown-item" data-bs-placement="left" data-bs-toggle="tooltip" href="https://mybinder.org/v2/gh/executablebooks/sphinx-book-theme/master?urlpath=lab/tree/TESTPATH/section1/ntbk.ipynb" target="_blank" title="Launch onBinder">
+        <a class="btn btn-sm dropdown-item" data-bs-placement="left" data-bs-toggle="tooltip" href="https://mybinder.org/v2/gh/executablebooks/sphinx-book-theme/master?urlpath=lab/tree/TESTPATH/section1/ntbk.ipynb" target="_blank" title="Launch on Binder">
          <span class="btn__icon-container">
-          <img src="../_static/images/logo_binder.svg"/>
+          <img alt="Binder logo" src="../_static/images/logo_binder.svg"/>
          </span>
          <span class="btn__text-container">
           Binder
          </span>
         </a>
        </li>
        <li>
-        <a class="btn btn-sm dropdown-item" data-bs-placement="left" data-bs-toggle="tooltip" href="https://datahub.berkeley.edu/hub/user-redirect/git-pull?repo=https%3A//github.com/executablebooks/sphinx-book-theme&amp;urlpath=lab/tree/sphinx-book-theme/TESTPATH/section1/ntbk.ipynb&amp;branch=master" target="_blank" title="Launch onJupyterHub">
+        <a class="btn btn-sm dropdown-item" data-bs-placement="left" data-bs-toggle="tooltip" href="https://datahub.berkeley.edu/hub/user-redirect/git-pull?repo=https%3A//github.com/executablebooks/sphinx-book-theme&amp;urlpath=lab/tree/sphinx-book-theme/TESTPATH/section1/ntbk.ipynb&amp;branch=master" target="_blank" title="Launch on JupyterHub">
          <span class="btn__icon-container">
-          <img src="../_static/images/logo_jupyterhub.svg"/>
+          <img alt="JupyterHub logo" src="../_static/images/logo_jupyterhub.svg"/>
          </span>
          <span class="btn__text-container">
           JupyterHub
          </span>
         </a>
        </li>
        <li>
-        <a class="btn btn-sm dropdown-item" data-bs-placement="left" data-bs-toggle="tooltip" href="https://colab.research.google.com/github/executablebooks/sphinx-book-theme/blob/master/TESTPATH/section1/ntbk.ipynb" target="_blank" title="Launch onColab">
+        <a class="btn btn-sm dropdown-item" data-bs-placement="left" data-bs-toggle="tooltip" href="https://colab.research.google.com/github/executablebooks/sphinx-book-theme/blob/master/TESTPATH/section1/ntbk.ipynb" target="_blank" title="Launch on Colab">
          <span class="btn__icon-container">
-          <img src="../_static/images/logo_colab.png"/>
+          <img alt="Colab logo" src="../_static/images/logo_colab.png"/>
          </span>
          <span class="btn__text-container">
           Colab
          </span>
         </a>
        </li>
        <li>
-        <a class="btn btn-sm dropdown-item" data-bs-placement="left" data-bs-toggle="tooltip" href="https://deepnote.com/launch?url=https%3A%2F%2Fgithub.com%2Fexecutablebooks%2Fsphinx-book-theme%2Fblob%2Fmaster%2FTESTPATH/section1/ntbk.ipynb" target="_blank" title="Launch onDeepnote">
+        <a class="btn btn-sm dropdown-item" data-bs-placement="left" data-bs-toggle="tooltip" href="https://deepnote.com/launch?url=https%3A%2F%2Fgithub.com%2Fexecutablebooks%2Fsphinx-book-theme%2Fblob%2Fmaster%2FTESTPATH/section1/ntbk.ipynb" target="_blank" title="Launch on Deepnote">
          <span class="btn__icon-container">
-          <img src="../_static/images/logo_deepnote.svg"/>
+          <img alt="Deepnote logo" src="../_static/images/logo_deepnote.svg"/>
          </span>
          <span class="btn__text-container">
           Deepnote

tests/test_build/header__repo-buttons--custom-branch.html

@@ -8,9 +8,9 @@
     </button>
     <ul class="dropdown-menu">
      <li>
-      <a class="btn btn-sm dropdown-item" data-bs-placement="left" data-bs-toggle="tooltip" href="https://mybinder.org/v2/gh/executablebooks/sphinx-book-theme/foo?urlpath=tree/section1/ntbk.ipynb" target="_blank" title="Launch onBinder">
+      <a class="btn btn-sm dropdown-item" data-bs-placement="left" data-bs-toggle="tooltip" href="https://mybinder.org/v2/gh/executablebooks/sphinx-book-theme/foo?urlpath=tree/section1/ntbk.ipynb" target="_blank" title="Launch on Binder">
        <span class="btn__icon-container">
-        <img src="../_static/images/logo_binder.svg"/>
+        <img alt="Binder logo" src="../_static/images/logo_binder.svg"/>
        </span>
        <span class="btn__text-container">
         Binder

tests/test_build/test_header_launchbtns.html

@@ -5,39 +5,39 @@
  </button>
  <ul class="dropdown-menu">
   <li>
-   <a class="btn btn-sm dropdown-item" data-bs-placement="left" data-bs-toggle="tooltip" href="https://mybinder.org/v2/gh/executablebooks/sphinx-book-theme/master?urlpath=lab/tree/TESTPATH/section1/ntbk.ipynb" target="_blank" title="Launch onBinder">
+   <a class="btn btn-sm dropdown-item" data-bs-placement="left" data-bs-toggle="tooltip" href="https://mybinder.org/v2/gh/executablebooks/sphinx-book-theme/master?urlpath=lab/tree/TESTPATH/section1/ntbk.ipynb" target="_blank" title="Launch on Binder">
     <span class="btn__icon-container">
-     <img src="../_static/images/logo_binder.svg"/>
+     <img alt="Binder logo" src="../_static/images/logo_binder.svg"/>
     </span>
     <span class="btn__text-container">
      Binder
     </span>
    </a>
   </li>
   <li>
-   <a class="btn btn-sm dropdown-item" data-bs-placement="left" data-bs-toggle="tooltip" href="https://datahub.berkeley.edu/hub/user-redirect/git-pull?repo=https%3A//github.com/executablebooks/sphinx-book-theme&amp;urlpath=lab/tree/sphinx-book-theme/TESTPATH/section1/ntbk.ipynb&amp;branch=master" target="_blank" title="Launch onJupyterHub">
+   <a class="btn btn-sm dropdown-item" data-bs-placement="left" data-bs-toggle="tooltip" href="https://datahub.berkeley.edu/hub/user-redirect/git-pull?repo=https%3A//github.com/executablebooks/sphinx-book-theme&amp;urlpath=lab/tree/sphinx-book-theme/TESTPATH/section1/ntbk.ipynb&amp;branch=master" target="_blank" title="Launch on JupyterHub">
     <span class="btn__icon-container">
-     <img src="../_static/images/logo_jupyterhub.svg"/>
+     <img alt="JupyterHub logo" src="../_static/images/logo_jupyterhub.svg"/>
     </span>
     <span class="btn__text-container">
      JupyterHub
     </span>
    </a>
   </li>
   <li>
-   <a class="btn btn-sm dropdown-item" data-bs-placement="left" data-bs-toggle="tooltip" href="https://colab.research.google.com/github/executablebooks/sphinx-book-theme/blob/master/TESTPATH/section1/ntbk.ipynb" target="_blank" title="Launch onColab">
+   <a class="btn btn-sm dropdown-item" data-bs-placement="left" data-bs-toggle="tooltip" href="https://colab.research.google.com/github/executablebooks/sphinx-book-theme/blob/master/TESTPATH/section1/ntbk.ipynb" target="_blank" title="Launch on Colab">
     <span class="btn__icon-container">
-     <img src="../_static/images/logo_colab.png"/>
+     <img alt="Colab logo" src="../_static/images/logo_colab.png"/>
     </span>
     <span class="btn__text-container">
      Colab
     </span>
    </a>
   </li>
   <li>
-   <a class="btn btn-sm dropdown-item" data-bs-placement="left" data-bs-toggle="tooltip" href="https://deepnote.com/launch?url=https%3A%2F%2Fgithub.com%2Fexecutablebooks%2Fsphinx-book-theme%2Fblob%2Fmaster%2FTESTPATH/section1/ntbk.ipynb" target="_blank" title="Launch onDeepnote">
+   <a class="btn btn-sm dropdown-item" data-bs-placement="left" data-bs-toggle="tooltip" href="https://deepnote.com/launch?url=https%3A%2F%2Fgithub.com%2Fexecutablebooks%2Fsphinx-book-theme%2Fblob%2Fmaster%2FTESTPATH/section1/ntbk.ipynb" target="_blank" title="Launch on Deepnote">
     <span class="btn__icon-container">
-     <img src="../_static/images/logo_deepnote.svg"/>
+     <img alt="Deepnote logo" src="../_static/images/logo_deepnote.svg"/>
     </span>
     <span class="btn__text-container">
      Deepnote