Use <button> for banner toggle and clean focus styling

Anchor-based toggle picked up Bootstrap alert link styles and a
lingering focus outline after click, which showed as a stray glyph next
to the caret. A plain <button type="button"> avoids link decoration
entirely; focus outline and transition are also dropped so the caret
flips instantly.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: Maffooch

dojo/static/dojo/css/dojo.css

@@ -1127,14 +1127,19 @@ div.custom-search-form {
 }
 
 .os-banner-toggle {
+    background: transparent;
+    border: 0;
+    padding: 0;
     margin-left: 6px;
-    cursor: pointer;
     color: inherit;
-    text-decoration: none;
+    cursor: pointer;
+    line-height: 1;
 }
 
-.os-banner-toggle .fa-caret-down {
-    transition: transform 0.15s ease-in-out;
+.os-banner-toggle:focus,
+.os-banner-toggle:active {
+    outline: none;
+    box-shadow: none;
 }
 
 .os-banner-toggle:not(.collapsed) .fa-caret-down {

dojo/templates/base.html

@@ -674,11 +674,13 @@
                     <div role="alert" class="announcement-banner alert alert-{{ banner.style }} show">
                         {{ banner.message|safe }}{% if banner.url %} <a href="{{ banner.url }}">{{ banner.link_text }}</a>{% endif %}
                         {% if banner.expanded_html %}
-                            <a role="button" data-toggle="collapse" href="#os-banner-expanded-{{ forloop.counter }}"
-                               aria-expanded="false" aria-controls="os-banner-expanded-{{ forloop.counter }}"
-                               class="os-banner-toggle collapsed">
+                            <button type="button" class="os-banner-toggle collapsed"
+                                    data-toggle="collapse"
+                                    data-target="#os-banner-expanded-{{ forloop.counter }}"
+                                    aria-expanded="false"
+                                    aria-controls="os-banner-expanded-{{ forloop.counter }}">
                                 <i class="fa-solid fa-caret-down"></i>
-                            </a>
+                            </button>
                             <div id="os-banner-expanded-{{ forloop.counter }}" class="collapse os-banner-expanded">
                                 {{ banner.expanded_html|safe }}
                             </div>