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

@@ -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('')
   },
 }

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;
+  }
+}

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=')
   })
 })