Skip to content

fix(a11y): improve accessibility for package command copy actions #998

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
IdrisGit wants to merge 25 commits into
base: main
Choose a base branch
from
Open

fix(a11y): improve accessibility for package command copy actions #998

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
b1cb88d
fix(a11y): make buttons always visible | fix(ui): make borders visible
IdrisGit Feb 5, 2026
5cf068c
test: update tests for copy command
IdrisGit Feb 5, 2026
2b3481a
test: add missing run command tests
IdrisGit Feb 5, 2026
8c8cefa
fix(a11y): make copy button always visible
IdrisGit Feb 5, 2026
97c7c56
fix(test): exact match the npx command
IdrisGit Feb 5, 2026
dd5e281
style: use checkmark and copy icons to be consistent
IdrisGit Feb 8, 2026
0f2f04b
Merge branch 'main' into fix-copy-button-visibility
IdrisGit Feb 8, 2026
3a1d3d6
Merge branch 'main' into fix-copy-button-visibility
IdrisGit Feb 10, 2026
1209f19
fix: add arial lable to run locally command
IdrisGit Feb 10, 2026
47827cd
Merge branch 'main' into fix-copy-button-visibility
IdrisGit Mar 11, 2026
ea5b4db
feat:a11y: hide and show on hower only for devices that support it an…
IdrisGit Mar 11, 2026
4730c57
feat: improve command text
IdrisGit Mar 11, 2026
9831bf9
test: update tests
IdrisGit Mar 11, 2026
beee5a9
style: use lucide icons | fix: css for sr
IdrisGit Mar 12, 2026
d0ee70c
feat:style: use ButtonBase for consistent styling
IdrisGit Mar 12, 2026
5fb969f
feat: add new square size
IdrisGit Mar 12, 2026
14467a5
Merge branch 'main' into fix-copy-button-visibility
IdrisGit Apr 21, 2026
6acbee4
feat:style: add new icon size
IdrisGit Apr 21, 2026
ae83214
feat: update copy icon button
IdrisGit Apr 21, 2026
b2f1c2b
fix:style: dollar sign alignment
IdrisGit Apr 21, 2026
b267f23
feat: add copied schema in i18n
IdrisGit Apr 21, 2026
6cb2a0b
feat: use new NuxtAnnouncer
IdrisGit Apr 21, 2026
42e15a5
test: update test to check new icons and nuxt announcer
IdrisGit Apr 21, 2026
bbc6515
fix: broken i18n key
IdrisGit Apr 21, 2026
442d5e4
fix:tests: version selector doesn't render "v" prefix
IdrisGit Apr 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/components/Package/SkillsModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,7 @@ function getWarningTooltip(skill: SkillListItem): string | undefined {
</code>
<button
type="button"
class="absolute top-0 inset-ie-0 px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 opacity-0 group-hover/cmd:opacity-100 hover:(text-fg border-border-hover) active:scale-95 focus-visible:opacity-100 focus-visible:outline-accent/70"
class="absolute top-0 inset-ie-0 px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border border-solid rounded transition-colors hover:(text-fg border-border-hover) active:scale-95 focus-visible:outline-accent/70"
:aria-label="$t('package.get_started.copy_command')"
Comment thread
IdrisGit marked this conversation as resolved.
Outdated
@click.stop="copyCommand"
>
Expand Down
2 changes: 1 addition & 1 deletion app/components/Terminal/Execute.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ const copyExecuteCommand = () => copyExecute(getFullExecuteCommand())
>
<button
type="button"
class="px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 opacity-0 group-hover/executecmd:opacity-100 hover:(text-fg border-border-hover) active:scale-95 focus-visible:opacity-100 focus-visible:outline-accent/70"
class="px-2 py-0.5 font-mono ms-auto text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 hover:(text-fg border-border-hover) active:scale-95 focus-visible:outline-accent/70"
:aria-label="$t('package.get_started.copy_command')"
@click.stop="copyExecuteCommand"
>
Expand Down
6 changes: 3 additions & 3 deletions app/components/Terminal/Install.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@ const copyCreateCommand = () => copyCreate(getFullCreateCommand())
>
<button
type="button"
class="px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 opacity-0 group-hover/installcmd:opacity-100 hover:(text-fg border-border-hover) active:scale-95 focus-visible:opacity-100 focus-visible:outline-accent/70 select-none"
class="px-2 py-0.5 font-mono ms-auto text-xs text-fg-muted bg-bg-subtle/80 border border-border border-solid rounded transition-colors duration-200 hover:(text-fg border-border-hover) active:scale-95 focus-visible:outline-accent/70"
:aria-label="$t('package.get_started.copy_command')"
@click.stop="copyInstallCommand"
>
Expand Down Expand Up @@ -185,7 +185,7 @@ const copyCreateCommand = () => copyCreate(getFullCreateCommand())
>
<button
type="button"
class="px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 opacity-0 group-hover/runcmd:opacity-100 hover:(text-fg border-border-hover) active:scale-95 focus-visible:opacity-100 focus-visible:outline-accent/70 select-none"
class="px-2 py-0.5 font-mono ms-auto text-xs text-fg-muted bg-bg-subtle/80 border border-border border-solid rounded transition-colors duration-200 hover:(text-fg border-border-hover) active:scale-95 focus-visible:outline-accent/70"
@click.stop="copyRunCommand(executableInfo?.primaryCommand)"
>
{{ runCopied ? $t('common.copied') : $t('common.copy') }}
Expand Down Expand Up @@ -230,7 +230,7 @@ const copyCreateCommand = () => copyCreate(getFullCreateCommand())
>
<button
type="button"
class="px-2 py-0.5 font-mono text-xs text-fg-muted bg-bg-subtle/80 border border-border rounded transition-colors duration-200 opacity-0 group-hover/createcmd:opacity-100 hover:(text-fg border-border-hover) active:scale-95 focus-visible:opacity-100 focus-visible:outline-accent/70 select-none"
class="px-2 py-0.5 font-mono ms-auto text-xs text-fg-muted bg-bg-subtle/80 border border-border border-solid rounded transition-colors duration-200 hover:(text-fg border-border-hover) active:scale-95 focus-visible:outline-accent/70"
:aria-label="$t('package.create.copy_command')"
@click.stop="copyCreateCommand"
>
Expand Down
79 changes: 56 additions & 23 deletions test/e2e/create-command.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ test.describe('Create Command', () => {
})

test.describe('Copy Functionality', () => {
test('hovering create command shows copy button', async ({ page, goto }) => {
test('copy button is always visible', async ({ page, goto }) => {
await goto('/package/vite', { waitUntil: 'hydration' })

await expect(page.locator('h1')).toContainText('vite', { timeout: 15000 })
Expand All @@ -75,14 +75,8 @@ test.describe('Create Command', () => {
const createCommandContainer = page.locator('.group\\/createcmd').first()
await expect(createCommandContainer).toBeVisible({ timeout: 20000 })

// Copy button should initially be hidden (opacity-0)
// Copy button should always be visible
const copyButton = createCommandContainer.locator('button')
await expect(copyButton).toHaveCSS('opacity', '0')

// Hover over the container
await createCommandContainer.hover()

// Copy button should become visible
await expect(copyButton).toHaveCSS('opacity', '1')
})

Expand All @@ -104,9 +98,6 @@ test.describe('Create Command', () => {
const createCommandContainer = page.locator('.group\\/createcmd').first()
await expect(createCommandContainer).toBeVisible({ timeout: 20000 })

await createCommandContainer.hover()

// Click the copy button
const copyButton = createCommandContainer.locator('button')
await copyButton.click()

Expand All @@ -123,21 +114,15 @@ test.describe('Create Command', () => {
})

test.describe('Install Command Copy', () => {
test('hovering install command shows copy button', async ({ page, goto }) => {
test('copy button is always visible', async ({ page, goto }) => {
await goto('/package/is-odd', { waitUntil: 'hydration' })

// Find the install command container
const installCommandContainer = page.locator('.group\\/installcmd').first()
await expect(installCommandContainer).toBeVisible()

// Copy button should initially be hidden
// Copy button should always be visible
const copyButton = installCommandContainer.locator('button')
await expect(copyButton).toHaveCSS('opacity', '0')

// Hover over the container
await installCommandContainer.hover()

// Copy button should become visible
await expect(copyButton).toHaveCSS('opacity', '1')
})

Expand All @@ -151,11 +136,7 @@ test.describe('Create Command', () => {

await goto('/package/is-odd', { waitUntil: 'hydration' })

// Find and hover over the install command container
const installCommandContainer = page.locator('.group\\/installcmd').first()
await installCommandContainer.hover()

// Click the copy button
const copyButton = installCommandContainer.locator('button')
await copyButton.click()

Expand All @@ -170,4 +151,56 @@ test.describe('Create Command', () => {
await expect(copyButton).not.toContainText(/copied/i)
})
})

test.describe('Run Command Copy', () => {
test('copy button is always visible', async ({ page, goto }) => {
await goto('/package/vite', { waitUntil: 'hydration' })

await expect(page.locator('h1')).toContainText('vite', { timeout: 15000 })

await expect(page.locator('main header').locator('text=/v\\d+\\.\\d+/')).toBeVisible({
timeout: 15000,
})

// Find the run command container
const runCommandContainer = page.locator('.group\\/runcmd').first()
await expect(runCommandContainer).toBeVisible({ timeout: 20000 })

// Copy button should always be visible
const copyButton = runCommandContainer.locator('button')
await expect(copyButton).toHaveCSS('opacity', '1')
})

test('clicking copy button copies run command and shows confirmation', async ({
page,
goto,
context,
}) => {
// Grant clipboard permissions
await context.grantPermissions(['clipboard-read', 'clipboard-write'])

await goto('/package/vite', { waitUntil: 'hydration' })
await expect(page.locator('h1')).toContainText('vite', { timeout: 15000 })

await expect(page.locator('main header').locator('text=/v\\d+\\.\\d+/')).toBeVisible({
timeout: 15000,
})

const runCommandContainer = page.locator('.group\\/runcmd').first()
await expect(runCommandContainer).toBeVisible({ timeout: 20000 })

const copyButton = runCommandContainer.locator('button')
await copyButton.click()

// Button text should change to "copied!"
await expect(copyButton).toContainText(/copied/i)

// Verify clipboard content contains the run command
const clipboardContent = await page.evaluate(() => navigator.clipboard.readText())
expect(clipboardContent).toMatch(/npx vite/i)

Comment thread
coderabbitai[bot] marked this conversation as resolved.
await expect(copyButton).toContainText(/copy/i, { timeout: 5000 })
await expect(copyButton).not.toContainText(/copied/i)
})
})
})
Loading