feat: add copy button on install link to improve Accessibility

src/styles/app.scss

@@ -119,6 +119,74 @@ code.copyable {
   user-select: all;
 }
 
+.pre-copy-wrap {
+  display: flex;
+  align-items: stretch;
+
+  pre {
+    flex: 1;
+    min-width: 0;
+    margin: 0;
+  }
+
+  // Square off the right edge of the code block so it meets the button flush
+  pre > code {
+    margin: 0;
+    border-right: none;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .copy-code-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    flex-shrink: 0;
+    padding: 0 14px;
+    // Match the a11y-dark highlight.js theme used on the code block
+    background: #2b2b2b;
+    border: 1px solid #e1e1e1;
+    border-left: 1px solid rgba(248, 248, 242, 0.15);
+    border-radius: 0 $border-radius $border-radius 0;
+    color: #d4d0ab;
+    font-family: $body-font;
+    font-size: 0.75em;
+    font-weight: 600;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    cursor: pointer;
+    white-space: nowrap;
+    transition: background 0.15s ease, color 0.15s ease;
+
+    // Checkmark icon only shown in .copied state
+    .check-icon {
+      display: none;
+    }
+
+    &:hover {
+      background: #3c3c3c;
+      color: #f8f8f2;
+    }
+
+    &:focus-visible {
+      outline: 2px solid white;
+      outline-offset: 2px;
+    }
+
+    &.copied {
+      color: #7ee787;
+
+      .copy-icon {
+        display: none;
+      }
+
+      .check-icon {
+        display: inline-block;
+      }
+    }
+  }
+}
+
 header h1,
 section h2 {
   z-index: 999999;

static/scripts/tools-install.js

@@ -177,8 +177,38 @@ function check_initial_override() {
     }
 }
 
+
+function set_up_copy_buttons() {
+    var buttons = document.querySelectorAll('.copy-code-btn');
+    buttons.forEach(function(btn) {
+        btn.addEventListener('click', function() {
+            var wrap = btn.closest('.pre-copy-wrap');
+            var code = wrap && wrap.querySelector('code');
+            if (!code) { return; }
+            var text = code.textContent;
+
+            var original_label = btn.getAttribute('aria-label');
+
+            function mark_copied() {
+                var text_el = btn.querySelector('.copy-code-btn__text');
+                if (text_el) { text_el.textContent = 'Copied!'; }
+                btn.setAttribute('aria-label', 'Copied!');
+                btn.classList.add('copied');
+                setTimeout(function() {
+                    if (text_el) { text_el.textContent = 'Copy'; }
+                    btn.setAttribute('aria-label', original_label);
+                    btn.classList.remove('copied');
+                }, 2000);
+            }
+
+            navigator.clipboard.writeText(text).then(mark_copied).catch(function() {});
+        });
+    });
+}
+
 (function () {
     check_initial_override();
     adjust_for_platform();
     set_up_cycle_button();
+    set_up_copy_buttons();
 }());

templates/components/tools/rustup.html.hbs

@@ -1,7 +1,14 @@
 <div class="row">
   <div id="platform-instructions-unix" class="instructions db">
     <p>{{fluent "tools-rustup-unixy"}}</p>
-    <pre><code class="db w-100 copyable">curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh</code></pre>
+    <div class="pre-copy-wrap">
+      <pre><code class="db w-100 copyable">curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh</code></pre>
+      <button class="copy-code-btn" type="button" aria-label="Copy install command to clipboard">
+        <img class="copy-icon" src="{{baseurl_assets}}/static/images/copy.svg" alt="" aria-hidden="true" width="14" height="14">
+        <img class="check-icon" src="{{baseurl_assets}}/static/images/check.svg" alt="" aria-hidden="true" width="14" height="14">
+        <span class="copy-code-btn__text">Copy</span>
+      </button>
+    </div>
   </div>
   <div id="platform-instructions-win" class="instructions dn">
     <p>{{fluent "tools-rustup-windows-2"}}</p>
@@ -20,14 +27,28 @@
   </div>
   <h3 class="mt4">{{fluent "tools-rustup-wsl-heading"}}</h3>
   <p>{{fluent "tools-rustup-wsl"}}</p>
-  <pre><code class="db w-100 copyable">curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh</code></pre>
+  <div class="pre-copy-wrap">
+    <pre><code class="db w-100 copyable">curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh</code></pre>
+    <button class="copy-code-btn" type="button" aria-label="Copy WSL install command to clipboard">
+      <img class="copy-icon" src="{{baseurl_assets}}/static/images/copy.svg" alt="" aria-hidden="true" width="14" height="14">
+      <img class="check-icon" src="{{baseurl_assets}}/static/images/check.svg" alt="" aria-hidden="true" width="14" height="14">
+      <span class="copy-code-btn__text">Copy</span>
+    </button>
+  </div>
   </div>
   <div id="platform-instructions-default" class="instructions dn">
     <div>
       <p>
         {{fluent "tools-rustup-manual-default"}}
       </p>
-      <pre><code class="db w-100 copyable">curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh</code></pre>
+      <div class="pre-copy-wrap">
+        <pre><code class="db w-100 copyable">curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh</code></pre>
+        <button class="copy-code-btn" type="button" aria-label="Copy install command to clipboard">
+          <img class="copy-icon" src="{{baseurl_assets}}/static/images/copy.svg" alt="" aria-hidden="true" width="14" height="14">
+          <img class="check-icon" src="{{baseurl_assets}}/static/images/check.svg" alt="" aria-hidden="true" width="14" height="14">
+          <span class="copy-code-btn__text">Copy</span>
+        </button>
+      </div>
     </div>
     <hr class="white-hr" />
     <div>