From b3c58fe2322df477b50accbde104412efb20cddc Mon Sep 17 00:00:00 2001
From: Sarah Schneider <sarahs@users.noreply.github.com>
Date: Fri, 7 Nov 2025 10:03:30 -0500
Subject: [PATCH] Update Copilot prompt tooltips for accessibility (#58382)

Co-authored-by: Joe Clark <31087804+jc-clark@users.noreply.github.com>
---
 src/content-render/liquid/prompt.ts           |  9 +++++++-
 .../stylesheets/accessibility.scss            | 23 +++++++++++++++++++
 src/content-render/tests/prompt.ts            | 16 +++++++++++--
 3 files changed, 45 insertions(+), 3 deletions(-)

diff --git a/src/content-render/liquid/prompt.ts b/src/content-render/liquid/prompt.ts
index 4a2c666d0657..d241786e6b81 100644
--- a/src/content-render/liquid/prompt.ts
+++ b/src/content-render/liquid/prompt.ts
@@ -38,6 +38,13 @@ export const Prompt: LiquidTag = {
     const href: string = `https://github.com/copilot?prompt=${promptParam}`
     // Use murmur hash for deterministic ID (avoids hydration mismatch)
     const promptId: string = generatePromptId(contentString)
-    return `<pre hidden id="${promptId}">${content}</pre><code>${content}</code><a href="${href}" target="_blank" class="tooltipped tooltipped-nw ml-1" aria-label="Run this prompt in Copilot Chat" aria-describedby="${promptId}" style="text-decoration:none;">${octicons.copilot.toSVG()}</a>`
+    // Show long text on larger screens and short text on smaller screens (set via accessibility.scss)
+    const promptLabelLong: string = 'Run this prompt in Copilot Chat'
+    const promptLabelShort: string = 'Run prompt'
+    return [
+      `<code id="${promptId}">${content}</code>`,
+      `<a href="${href}" target="_blank" class="tooltipped tooltipped-n ml-1 copilot-prompt-long" aria-label="${promptLabelLong}" aria-describedby="${promptId}" style="text-decoration:none;">${octicons.copilot.toSVG()}</a>`,
+      `<a href="${href}" target="_blank" class="tooltipped tooltipped-n ml-1 copilot-prompt-short" aria-label="${promptLabelShort}" aria-describedby="${promptId}" style="text-decoration:none;">${octicons.copilot.toSVG()}</a>`,
+    ].join('')
   },
 }
diff --git a/src/content-render/stylesheets/accessibility.scss b/src/content-render/stylesheets/accessibility.scss
index 2fd8509cc642..8d5b8de97cb2 100644
--- a/src/content-render/stylesheets/accessibility.scss
+++ b/src/content-render/stylesheets/accessibility.scss
@@ -21,3 +21,26 @@
     }
   }
 }
+
+/* Responsive tooltip text for Copilot prompt links */
+/* Show long tooltip text on small screens and up (544px+) */
+.copilot-prompt-long {
+  display: none;
+  visibility: hidden;
+
+  @media (min-width: 544px) {
+    display: inline-block;
+    visibility: visible;
+  }
+}
+
+/* Show short tooltip text only on extra small screens (below 544px) */
+.copilot-prompt-short {
+  display: inline-block;
+  visibility: visible;
+
+  @media (min-width: 544px) {
+    display: none;
+    visibility: hidden;
+  }
+}
diff --git a/src/content-render/tests/prompt.ts b/src/content-render/tests/prompt.ts
index 2eb453990dc0..65de51fea1c3 100644
--- a/src/content-render/tests/prompt.ts
+++ b/src/content-render/tests/prompt.ts
@@ -2,10 +2,22 @@ import { describe, expect, test } from 'vitest'
 import { renderContent } from '@/content-render/index'
 
 describe('prompt tag', () => {
-  test('wraps content in <code> and appends svg', async () => {
+  test('wraps content in <code> with ID and appends responsive svg links', async () => {
     const input: string = 'Here is your prompt: {% prompt %}example prompt text{% endprompt %}.'
     const output: string = await renderContent(input)
-    expect(output).toContain('<code>example prompt text</code><a')
+
+    // Should have code element with ID
+    expect(output).toContain('<code id="')
+    expect(output).toContain('>example prompt text</code>')
+
+    // Should have two responsive anchor elements
+    expect(output).toContain('copilot-prompt-long')
+    expect(output).toContain('copilot-prompt-short')
+
+    // Should contain SVG icons
     expect(output).toContain('<svg')
+
+    // Should have aria-describedby pointing to the code element ID
+    expect(output).toContain('aria-describedby=')
   })
 })