Buttons meet WCAG criteria (#1589)

* Match buttons to design system

* back to top button

* switch to stable version button

* remove sd-sphinx-override class which seems to do nothing

* underline

* center

* Update src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss

Co-authored-by: Tania Allard <[email protected]>

* don't forget outline buttons

---------

Co-authored-by: Tania Allard <[email protected]>

Author: gabalafou

docs/user_guide/styling.rst

@@ -117,18 +117,18 @@ Here is an overview of the colors available in the theme (change theme mode to s
     </style>
 
     <p>
-      <span class="sd-sphinx-override sd-badge pst-badge pst-primary sd-bg-text-primary">primary</span>
-      <span class="sd-sphinx-override sd-badge pst-badge pst-secondary sd-bg-text-secondary">secondary</span>
-      <span class="sd-sphinx-override sd-badge pst-badge pst-accent sd-bg-text-secondary">accent</span>
-      <span class="sd-sphinx-override sd-badge pst-badge pst-success sd-bg-text-success">success</span>
-      <span class="sd-sphinx-override sd-badge pst-badge pst-info sd-bg-text-info">info</span>
-      <span class="sd-sphinx-override sd-badge pst-badge pst-warning sd-bg-text-warning">warning</span>
-      <span class="sd-sphinx-override sd-badge pst-badge pst-danger sd-bg-text-danger">danger</span>
-      <span class="sd-sphinx-override sd-badge pst-badge pst-background">background</span>
-      <span class="sd-sphinx-override sd-badge pst-badge pst-on-background">on-background</span>
-      <span class="sd-sphinx-override sd-badge pst-badge pst-surface">surface</span>
-      <span class="sd-sphinx-override sd-badge pst-badge pst-on-surface sd-bg-text-primary">on-surface</span>
-      <span class="sd-sphinx-override sd-badge pst-badge pst-target">target</span>
+      <span class="sd-badge pst-badge pst-primary sd-bg-text-primary">primary</span>
+      <span class="sd-badge pst-badge pst-secondary sd-bg-text-secondary">secondary</span>
+      <span class="sd-badge pst-badge pst-accent sd-bg-text-secondary">accent</span>
+      <span class="sd-badge pst-badge pst-success sd-bg-text-success">success</span>
+      <span class="sd-badge pst-badge pst-info sd-bg-text-info">info</span>
+      <span class="sd-badge pst-badge pst-warning sd-bg-text-warning">warning</span>
+      <span class="sd-badge pst-badge pst-danger sd-bg-text-danger">danger</span>
+      <span class="sd-badge pst-badge pst-background">background</span>
+      <span class="sd-badge pst-badge pst-on-background">on-background</span>
+      <span class="sd-badge pst-badge pst-surface">surface</span>
+      <span class="sd-badge pst-badge pst-on-surface sd-bg-text-primary">on-surface</span>
+      <span class="sd-badge pst-badge pst-target">target</span>
     </p>
 
 

src/pydata_sphinx_theme/assets/styles/base/_base.scss

@@ -178,6 +178,26 @@ pre {
   color: var(--pst-color-secondary-text);
   background-color: var(--pst-color-secondary);
   border: none;
+
+  .fa-arrow-up {
+    // Using margin instead of a space character prevents the space between the
+    // icon and the text from being underlined when the button is hovered.
+    margin-inline-end: 0.5em;
+  }
+
+  @include link-style-hover;
+  &:hover {
+    text-decoration-thickness: 1px;
+    background-color: var(--pst-violet-600);
+    color: var(--pst-color-secondary-text);
+  }
+
+  &:focus-visible {
+    box-shadow: none;
+    outline: $focus-ring-outline;
+    outline-color: var(--pst-color-secondary);
+    outline-offset: $focus-ring-width;
+  }
 }
 
 // Focus ring

src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss

@@ -304,3 +304,35 @@ details.sd-dropdown {
     }
   }
 }
+
+/*******************************************************************************
+* Buttons (which in Sphinx Design are actually links that look like buttons)
+* ref: https://sphinx-design.readthedocs.io/en/pydata-theme/badges_buttons.html#buttons
+*/
+html {
+  .sd-btn {
+    min-width: 2.25rem;
+    padding: 0.3125rem 0.75rem 0.4375rem; // 5px 12px 7px
+
+    @include link-style-hover; // override Sphinx Design
+    &:hover {
+      text-decoration-thickness: 1px;
+    }
+  }
+
+  @each $name in $sd-semantic-color-names {
+    .sd-btn-#{$name},
+    .sd-btn-outline-#{$name} {
+      &:focus-visible {
+        // Override Sphinx Design's use of -highlight colors. The -highlight
+        // colors are 15% darker, so this would create the effect of darkening
+        // the button when focused but we just want the button to have a focus
+        // ring of the same (non-highlight) color.
+        background-color: var(--sd-color-#{$name}) !important;
+        border-color: var(--sd-color-#{$name}) !important;
+        outline: var(--sd-color-#{$name}) solid $focus-ring-width;
+        outline-offset: $focus-ring-width;
+      }
+    }
+  }
+}

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/layout.html

@@ -61,7 +61,7 @@
   {# the scroll to top button #}
   <button type="button" class="btn rounded-pill" id="pst-back-to-top">
     <i class="fa-solid fa-arrow-up"></i>
-    {{ _("Back to top") }}
+    {{- _("Back to top") -}}
   </button>
 
   {# checkbox to toggle primary sidebar #}