Enhance citation functionality with improved copy button UI and accessibility features; update styles for better layout and responsiveness.

Author: hwiwonl

css/components.css

@@ -837,8 +837,8 @@
     color: var(--ink);
     font-family: var(--mono);
     margin: 0;
-    overflow-x: auto;
-    padding: 28px 30px;
+    overflow: hidden;
+    padding: 0;
     position: relative;
 }
 
@@ -853,6 +853,12 @@
     background: #0b0d0b;
 }
 
+.citation-scroll {
+    overflow-x: auto;
+    padding: 28px 74px 28px 30px;
+    -webkit-overflow-scrolling: touch;
+}
+
 .citation-container pre {
     background: transparent;
     border: 0;
@@ -905,20 +911,34 @@
 }
 
 .citation-container .copy-btn {
+    align-items: center;
     background: var(--accent);
     border: 1px solid var(--accent);
     color: #071008;
     cursor: pointer;
-    font-family: var(--mono);
-    font-size: 11px;
-    font-weight: 800;
-    letter-spacing: 0.1em;
-    line-height: 1;
-    padding: 12px 16px;
+    display: inline-flex;
+    height: 38px;
+    justify-content: center;
+    padding: 0;
     position: absolute;
     right: 16px;
-    text-transform: uppercase;
     top: 16px;
+    width: 38px;
+    z-index: 2;
+}
+
+.citation-container .copy-icon {
+    fill: none;
+    height: 18px;
+    stroke: currentColor;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-width: 2;
+    width: 18px;
+}
+
+.citation-container .copy-icon-check {
+    display: none;
 }
 
 .citation-container .copy-btn:hover,
@@ -939,6 +959,26 @@
     border-color: var(--success);
 }
 
+.citation-container .copy-btn.copy-success .copy-icon-copy {
+    display: none;
+}
+
+.citation-container .copy-btn.copy-success .copy-icon-check {
+    display: block;
+}
+
+.sr-only {
+    clip: rect(0 0 0 0);
+    border: 0;
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+}
+
 .display-none {
     display: none !important;
 }
@@ -1049,11 +1089,17 @@
     }
 
     .citation-container {
-        padding: 68px 16px 20px;
+        padding: 0;
+    }
+
+    .citation-scroll {
+        padding: 58px 16px 20px;
     }
 
     .citation-container .copy-btn {
+        height: 34px;
         right: 12px;
         top: 12px;
+        width: 34px;
     }
 }

js/citation.js

@@ -43,12 +43,22 @@ function fallbackCopy(text, btn) {
 }
 
 function showCopySuccess(btn) {
+    const status = btn.querySelector('.copy-status');
+
     btn.classList.add('copy-success');
-    btn.textContent = 'COPIED';
+    btn.setAttribute('aria-label', 'Citation copied');
+    btn.setAttribute('title', 'Citation copied');
+    if (status) {
+        status.textContent = 'Citation copied';
+    }
 
     setTimeout(function () {
         btn.classList.remove('copy-success');
-        btn.textContent = 'COPY';
+        btn.setAttribute('aria-label', 'Copy citation');
+        btn.setAttribute('title', 'Copy citation');
+        if (status) {
+            status.textContent = 'Copy citation';
+        }
     }, 2000);
 }
 

templates/base.html

@@ -14,7 +14,7 @@
 
     <link rel="stylesheet" href="{{ asset_prefix }}css/core.css?v=6">
     <link rel="stylesheet" href="{{ asset_prefix }}css/layout.css?v=13">
-    <link rel="stylesheet" href="{{ asset_prefix }}css/components.css?v=14">
+    <link rel="stylesheet" href="{{ asset_prefix }}css/components.css?v=15">
     <link rel="stylesheet" href="{{ asset_prefix }}css/filters.css?v=3">
     <link rel="stylesheet" href="{{ asset_prefix }}css/sidebar.css?v=5">
 

templates/pages/citations.html

@@ -55,8 +55,19 @@ <h2>{{ citation.heading }}</h2>
              id="{{ citation.id }}-citation-{{ format.id }}"
              data-citation-target="{{ citation.id }}-citation"
              data-format="{{ format.id }}">
-            <button class="copy-btn" type="button">COPY</button>
-            <pre><code class="language-{{ format.id }}">{{ format.text|highlight_citation(format.id)|safe }}</code></pre>
+            <button class="copy-btn" type="button" aria-label="Copy citation" title="Copy citation">
+                <svg class="copy-icon copy-icon-copy" aria-hidden="true" viewBox="0 0 24 24">
+                    <rect x="9" y="9" width="10" height="10" rx="1.5"></rect>
+                    <path d="M5 15V6.5A1.5 1.5 0 0 1 6.5 5H15"></path>
+                </svg>
+                <svg class="copy-icon copy-icon-check" aria-hidden="true" viewBox="0 0 24 24">
+                    <path d="M5 12.5 10 17l9-10"></path>
+                </svg>
+                <span class="sr-only copy-status" aria-live="polite">Copy citation</span>
+            </button>
+            <div class="citation-scroll">
+                <pre><code class="language-{{ format.id }}">{{ format.text|highlight_citation(format.id)|safe }}</code></pre>
+            </div>
         </div>
         {% endfor %}
     </section>
@@ -75,5 +86,5 @@ <h2>Citations unavailable</h2>
 {% endblock %}
 
 {% block scripts_extra %}
-<script src="js/citation.js"></script>
+<script src="js/citation.js?v=2"></script>
 {% endblock %}