From cf436b6811b75eba0c826f0da4a184b70af8d06e Mon Sep 17 00:00:00 2001
From: Jason Fox <jason-fox@users.noreply.github.com>
Date: Sat, 9 Mar 2024 23:01:46 +0100
Subject: [PATCH] Fix Focus outline for 5.3.3 (#187)

* Tweak Collapsible CSS
* Update CSS
---
 Customization/xsl/nav.xsl | 24 ++++++++++++------------
 css/collapsible-toc.css   | 13 ++-----------
 2 files changed, 14 insertions(+), 23 deletions(-)

diff --git a/Customization/xsl/nav.xsl b/Customization/xsl/nav.xsl
index 550db0eb..6f4cbe17 100644
--- a/Customization/xsl/nav.xsl
+++ b/Customization/xsl/nav.xsl
@@ -742,13 +742,13 @@
           <xsl:choose>
             <xsl:when test="normalize-space(@href)">
               <div>
-                <xsl:attribute name="class" select="'d-flex flex-row'"/>
+                <xsl:attribute name="class" select="'d-flex flex-row ps-0'"/>
                 <xsl:if test="exists($children)">
                   <xsl:attribute name="id" select="concat('menu-collapse-trigger-',$id)"/>
                   <!-- ↓ Add Toggle without text ↓ -->
                   <button data-bs-toggle="collapse">
                     <xsl:attribute name="class">
-                      <xsl:text>btn d-inline-flex align-items-center pe-0 border-0</xsl:text>
+                      <xsl:text>btn d-inline-flex align-items-center p-0 border-0</xsl:text>
                       <xsl:if test="$show-menu='show'">
                         <xsl:text> active</xsl:text>
                       </xsl:if>
@@ -760,7 +760,7 @@
                     </xsl:if>
                     <xsl:attribute name="aria-labelledby" select="concat('menu-collapse-trigger-',$id)"/>
                     <xsl:attribute name="aria-controls" select="concat('menu-collapse-',$id)"/>
-                    <svg xmlns='http://www.w3.org/2000/svg' width='20' height='16' viewBox='0 0 16 16'>
+                    <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'>
                       <path
                         fill='none'
                         stroke='currentColor'
@@ -770,6 +770,7 @@
                         d='M5 14l6-6-6-6'
                       />
                     </svg>
+
                   </button>
                 </xsl:if>
                 <!-- ↓ Add Bootstrap classes to topic link ↓ -->
@@ -779,11 +780,10 @@
                     <xsl:with-param name="class">
                       <xsl:text>d-inline-flex align-items-center flex-shrink-1 </xsl:text>
                       <xsl:choose>
-                        <xsl:when test="exists($children)">
-                          <xsl:text>ps-1</xsl:text>
-                        </xsl:when>
+                        <xsl:when test="exists($children)"/>
+                        <xsl:when test="count(ancestor::*/@href) eq 0"/>
                         <xsl:otherwise>
-                          <xsl:text>ps-3</xsl:text>
+                          <xsl:text>ps-2</xsl:text>
                         </xsl:otherwise>
                       </xsl:choose>
                       <xsl:value-of select="$active-class"/>
@@ -796,10 +796,10 @@
             </xsl:when>
             <xsl:otherwise>
               <!-- ↓ Add Toggle with title text ↓ -->
-              <div class="d-flex flex-row">
+              <div class="d-flex flex-row ps-0">
                 <button data-bs-toggle="collapse">
                   <xsl:attribute name="class">
-                    <xsl:text>btn d-inline-flex align-items-center pe-0 border-0</xsl:text>
+                    <xsl:text>btn d-inline-flex align-items-center p-0 border-0</xsl:text>
                     <xsl:if test="$show-menu='show'">
                       <xsl:text> active</xsl:text>
                     </xsl:if>
@@ -809,7 +809,7 @@
                     <xsl:attribute name="aria-expanded" select="'true'"/>
                     <xsl:attribute name="aria-current" select="'true'"/>
                   </xsl:if>
-                  <svg xmlns='http://www.w3.org/2000/svg' width='20' height='16' viewBox='0 0 16 16'>
+                  <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'>
                     <path
                       fill='none'
                       stroke='currentColor'
@@ -822,7 +822,7 @@
                 </button>
                 <span data-bs-toggle="collapse">
                   <xsl:attribute name="class">
-                    <xsl:text>d-inline-flex align-items-center flex-shrink-1 ps-1</xsl:text>
+                    <xsl:text>d-inline-flex align-items-center flex-shrink-1 ps-2</xsl:text>
                     <xsl:if test="$show-menu='show'">
                       <xsl:text> active</xsl:text>
                     </xsl:if>
@@ -842,7 +842,7 @@
           <xsl:if test="exists($children)">
             <div>
               <xsl:attribute name="id" select="concat('menu-collapse-',$id)"/>
-              <xsl:attribute name="class" select="concat('collapse ', $show-menu)"/>
+              <xsl:attribute name="class" select="concat('ps-2 collapse ', $show-menu)"/>
               <ul class="list-unstyled fw-normal ps-4">
                 <xsl:apply-templates select="$children" mode="#current">
                   <xsl:with-param name="pathFromMaplist" select="$pathFromMaplist"/>
diff --git a/css/collapsible-toc.css b/css/collapsible-toc.css
index 7ba2c5f6..a23488d8 100644
--- a/css/collapsible-toc.css
+++ b/css/collapsible-toc.css
@@ -40,9 +40,7 @@
   .bd-links {
     position: sticky;
     display: block !important;
-
-    padding-left: 0.25rem;
-    margin-left: -0.25rem;
+    padding: 0 0.25rem;
   }
 }
 
@@ -63,20 +61,13 @@
 }
 
 .bd-links .btn {
-  padding-top: 0.25rem;
-  padding-bottom: 0;
-  padding-left: 0.25rem !important;
+  padding: 0.25rem !important;
   font-weight: 600;
   color: var(--bs-body-color);
   background-color: transparent;
   box-shadow: none;
 }
 
-[dir='rtl'] .bd-links .btn {
-  padding-right: 0.25rem !important;
-  padding-left: 0 !important;
-}
-
 .bd-links svg:hover {
   color: var(--bs-link-hover-color);
 }