Make sidebar()'s collapse icon configurable

R/sidebar.R

@@ -48,6 +48,11 @@
 #'   wrapped in a `<header>` element with class `sidebar-title`. You can also
 #'   provide a custom [htmltools::tag()] for the title element, in which case
 #'   you'll likely want to give this element `class = "sidebar-title"`.
+#' @param collapse_icon A [htmltools::tag()] child to use for the collapse icon.
+#'   Consider using a \pkg{bsicons} icon like `bsicons::bs_icon("sliders")`.
+#'   To ensure an accessible experience with other icons, set the `aria-hidden`
+#'   attribute on the icon element to `"true"` (the icon is purely decorative
+#'   -- its parent element provides the toggle functionality).
 #' @param bg,fg A background or foreground color. If only one of either is
 #'   provided, an accessible contrasting color is provided for the opposite
 #'   color, e.g. setting `bg` chooses an appropriate `fg` color.
@@ -78,6 +83,7 @@ sidebar <- function(
   open = c("desktop", "open", "closed", "always"),
   id = NULL,
   title = NULL,
+  collapse_icon = NULL,
   bg = NULL,
   fg = NULL,
   class = NULL,
@@ -131,9 +137,10 @@ sidebar <- function(
         class = "collapse-toggle",
         type = "button",
         title = "Toggle sidebar",
+        "aria-label" = "Toggle sidebar",
         "aria-expanded" = if (open %in% c("open", "desktop")) "true" else "false",
         "aria-controls" = id,
-        collapse_icon()
+        collapse_icon %||% sidebar_collapse_icon()
       )
     }
 
@@ -297,12 +304,12 @@ toggle_sidebar <- function(id, open = NULL, session = get_current_session()) {
 #' @export
 sidebar_toggle <- toggle_sidebar
 
-collapse_icon <- function() {
+sidebar_collapse_icon <- function() {
   if (!is_installed("bsicons")) {
-    icon <- "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" class=\"bi bi-chevron-left collapse-icon\" style=\"fill:currentColor;\" aria-hidden=\"true\" role=\"img\" ><path fill-rule=\"evenodd\" d=\"M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z\"></path></svg>"
+    icon <- "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" class=\"bi bi-chevron-left\" style=\"fill:currentColor;\" aria-hidden=\"true\" role=\"img\" ><path fill-rule=\"evenodd\" d=\"M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z\"></path></svg>"
     return(HTML(icon))
   }
-  bsicons::bs_icon("chevron-left", class = "collapse-icon", size = NULL)
+  bsicons::bs_icon("chevron-left")
 }
 
 sidebar_init_js <- function() {

inst/components/scss/sidebar.scss

@@ -133,8 +133,6 @@ $bslib-sidebar-column-sidebar: Min(calc(100% - var(--bslib-sidebar-icon-size)),
   > .collapse-toggle {
     grid-row: 1 / 2;
     grid-column: 1 / 2;
-    display: inline-flex;
-    align-items: center;
     position: absolute;
     right: calc(var(--bslib-sidebar-icon-size));
     top: calc(var(--bslib-sidebar-icon-size, 1rem) / 2);
@@ -147,29 +145,26 @@ $bslib-sidebar-column-sidebar: Min(calc(100% - var(--bslib-sidebar-icon-size)),
     justify-content: center;
     padding: 0;
     color: var(--bslib-sidebar-fg);
-    background-color: unset; // don't take `button` background color
+    transform: rotateY(var(--bslib-collapse-toggle-transform));
     transition:
-      color var(--bslib-sidebar-transition-easing-x) var(--bslib-sidebar-transition-duration),
-      top var(--bslib-sidebar-transition-easing-x) var(--bslib-sidebar-transition-duration),
+      // N.B. In order to properly add/remove the .transitioning class (in JS), 
+      // we assume on this `right` property will fire a transitionend event
       right var(--bslib-sidebar-transition-easing-x) var(--bslib-sidebar-transition-duration),
-      left var(--bslib-sidebar-transition-easing-x) var(--bslib-sidebar-transition-duration);
+      top var(--bslib-sidebar-transition-easing-x) var(--bslib-sidebar-transition-duration),
+      left var(--bslib-sidebar-transition-easing-x) var(--bslib-sidebar-transition-duration),
+      color var(--bslib-sidebar-transition-easing-x) var(--bslib-sidebar-transition-duration),
+      transform var(--bslib-sidebar-toggle-transition-easing) var(--bslib-sidebar-transition-duration);
 
+    opacity: 0.8;
+    background-color: unset; // don't take `button` background color
     &:hover {
+      opacity: 1;
       background-color: var(--bslib-sidebar-toggle-bg);
     }
 
-    > .collapse-icon {
-      opacity: 0.8;
+    > * {  
       width: var(--bslib-sidebar-icon-size);
       height: var(--bslib-sidebar-icon-size);
-      transform: rotateY(var(--bslib-collapse-toggle-transform));
-      // N.B. since mobile view won't trigger a transition of grid-template-columns,
-      // we transition this toggle to ensure _some_ transition event always happens.
-      transition: transform var(--bslib-sidebar-toggle-transition-easing) var(--bslib-sidebar-transition-duration);
-    }
-
-    &:hover > .collapse-icon {
-      opacity: 1;
     }
   }
 
@@ -206,9 +201,7 @@ $bslib-sidebar-column-sidebar: Min(calc(100% - var(--bslib-sidebar-icon-size)),
       left: var(--bslib-sidebar-icon-size);
       right: unset;
       border: var(--bslib-collapse-toggle-border);
-      > .collapse-icon {
-        transform: rotateY(var(--bslib-collapse-toggle-right-transform));
-      }
+      transform: rotateY(var(--bslib-collapse-toggle-right-transform));
     }
   }
 

srcts/src/components/sidebar.ts

@@ -228,13 +228,17 @@ class Sidebar {
       this.toggle("toggle");
     });
 
-    // Remove the transitioning class when the transition ends. We watch the
-    // collapse toggle icon because it's guaranteed to transition, whereas the
-    // sidebar doesn't animate on mobile (or in browsers where animating
-    // grid-template-columns is not supported).
-    toggle
-      .querySelector(".collapse-icon")
-      ?.addEventListener("transitionend", () => this._finalizeState());
+    // When the toggle's done transitioning, finalize the sidebar state
+    // (e.g., remove the transitioning class, etc).
+    toggle.addEventListener("transitionend", (e) => {
+      if (e.target !== toggle) return;
+      // We don't want to finalize state for _every_ transition, so only
+      // finalize when the toggle's horizontal positioning changes (which should
+      // usually be right, unless `sidebar(position="right")`)
+      if (e.propertyName === "right" || e.propertyName === "left") {
+        this._finalizeState();
+      }
+    });
   }
 
   /**