jprdonnelly/docs
1
0
Fork 0
mirror of synced 2025-12-19 09:57:42 -05:00
Code Issues Projects Releases Wiki Activity

Update Copilot prompt tooltips for accessibility (#58382)

Browse Source 
Co-authored-by: Joe Clark <31087804+jc-clark@users.noreply.github.com>
This commit is contained in:
Sarah Schneider
2025-11-07 10:03:30 -05:00
committed by GitHub
parent c589c75107
commit b3c58fe232
3 changed files with 45 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/content-render/liquid/prompt.ts
View File

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

23
src/content-render/stylesheets/accessibility.scss
View File

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

16
src/content-render/tests/prompt.ts
View File

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