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

app/app.vue

@@ -146,6 +146,8 @@ defineOgImage('Page.takumi', {}, { alt: 'npmx — a fast, modern browser for the
       {{ route.name === 'search' ? `${$t('search.title_packages')} - npmx` : message }}
     </NuxtRouteAnnouncer>
 
+    <NuxtAnnouncer />
+
     <div id="main-content" class="flex-1 flex flex-col" tabindex="-1">
       <NuxtPage />
     </div>

app/components/Button/Base.vue

@@ -16,7 +16,7 @@ const props = withDefaults(
     /** @default "secondary" */
     variant?: 'primary' | 'secondary'
     /** @default "md" */
-    size?: 'sm' | 'md'
+    size?: 'sm' | 'md' | 'icon'
     /** Keyboard shortcut hint */
     ariaKeyshortcuts?: string
     /** Forces the button to occupy the entire width of its container. */
@@ -50,6 +50,7 @@ defineExpose({
       'flex': block,
       'text-sm px-4 py-2': size === 'md',
       'text-xs px-2 py-0.5': size === 'sm',
+      'text-sm p-2': size === 'icon',
       'bg-transparent text-fg hover:enabled:(bg-fg/10) focus-visible:enabled:(bg-fg/10) aria-pressed:(bg-fg/10 border-fg/20 hover:enabled:(bg-fg/20 text-fg/50))':
         variant === 'secondary',
       'text-bg bg-fg hover:enabled:(bg-fg/50) focus-visible:enabled:(bg-fg/50) aria-pressed:(bg-fg text-bg border-fg hover:enabled:(text-bg/50))':

app/components/Package/SkillsModal.vue

@@ -35,7 +35,12 @@ const installCommand = computed(() => {
 })
 
 const { copied, copy } = useClipboard({ copiedDuring: 2000 })
-const copyCommand = () => installCommand.value && copy(installCommand.value)
+const { polite } = useAnnouncer()
+const copyCommand = () => {
+  if (!installCommand.value) return
+  copy(installCommand.value)
+  polite($t('package.command.copied_skills'))
+}
 
 function getWarningTooltip(skill: SkillListItem): string | undefined {
   if (!skill.warnings?.length) return undefined
@@ -123,20 +128,20 @@ function getWarningTooltip(skill: SkillListItem): string | undefined {
         <span class="w-2.5 h-2.5 rounded-full bg-fg-subtle" />
       </div>
       <div class="px-3 pt-2 pb-3 sm:px-4 sm:pt-3 sm:pb-4 overflow-x-auto">
-        <div class="relative group/cmd">
-          <code class="font-mono text-sm whitespace-nowrap">
+        <div class="relative flex items-center gap-2 group/cmd">
+          <code class="font-mono text-sm">
             <span class="text-fg-subtle select-none">$ </span>
             <span class="text-fg">npx </span>
             <span class="text-fg-muted">skills add {{ baseUrl }}/{{ packageName }}</span>
           </code>
-          <button
+          <ButtonBase
             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"
+            size="icon"
+            class="text-fg-muted bg-bg-subtle/80 border-border media-mouse:opacity-0 media-mouse:group-hover/cmd:opacity-100 media-mouse:focus-within:opacity-100 active:scale-95 focus-visible:opacity-100 select-none"
             :aria-label="$t('package.get_started.copy_command')"
+            :classicon="copied ? 'i-lucide:check' : 'i-lucide:copy'"
             @click.stop="copyCommand"
-          >
-            <span aria-live="polite">{{ copied ? $t('common.copied') : $t('common.copy') }}</span>
-          </button>
+          />
         </div>
       </div>
     </div>

app/components/Terminal/Execute.vue

@@ -14,6 +14,7 @@ const props = defineProps<{
 }>()
 
 const selectedPM = useSelectedPackageManager()
+const { polite } = useAnnouncer()
 
 // Generate execute command parts for a specific package manager
 function getExecutePartsForPM(pmId: PackageManagerId) {
@@ -39,7 +40,10 @@ function getFullExecuteCommand() {
 
 // Copy handler
 const { copied: executeCopied, copy: copyExecute } = useClipboard({ copiedDuring: 2000 })
-const copyExecuteCommand = () => copyExecute(getFullExecuteCommand())
+const copyExecuteCommand = () => {
+  copyExecute(getFullExecuteCommand())
+  polite($t('package.command.copied_execute'))
+}
 </script>
 
 <template>
@@ -59,7 +63,7 @@ const copyExecuteCommand = () => copyExecute(getFullExecuteCommand())
           :data-pm-cmd="pm.id"
           class="flex items-center gap-2 group/executecmd"
         >
-          <span class="text-fg-subtle font-mono text-sm select-none">$</span>
+          <span class="text-fg-subtle font-mono text-sm select-none shrink-0">$</span>
           <code class="font-mono text-sm"
             ><span
               v-for="(part, i) in getExecutePartsForPM(pm.id)"
@@ -68,14 +72,14 @@ const copyExecuteCommand = () => copyExecute(getFullExecuteCommand())
               >{{ i > 0 ? ' ' : '' }}{{ part }}</span
             ></code
           >
-          <button
+          <ButtonBase
             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"
+            size="icon"
+            class="text-fg-muted bg-bg-subtle/80 border-border media-mouse:opacity-0 media-mouse:group-hover/executecmd:opacity-100 media-mouse:focus-within:opacity-100 active:scale-95 focus-visible:opacity-100 select-none"
             :aria-label="$t('package.get_started.copy_command')"
+            :classicon="executeCopied ? 'i-lucide:check' : 'i-lucide:copy'"
             @click.stop="copyExecuteCommand"
-          >
-            {{ executeCopied ? $t('common.copied') : $t('common.copy') }}
-          </button>
+          />
         </div>
       </div>
     </div>

app/components/Terminal/Install.vue

@@ -23,6 +23,14 @@ const { selectedPM, showTypesInInstall, copied, copyInstallCommand } = useInstal
   () => props.installVersionOverride ?? null,
 )
 
+const { announce } = useCommandPalette()
+const { polite } = useAnnouncer()
+
+async function copyInstallCommandWithAnnounce() {
+  const success = await copyInstallCommand()
+  if (success) polite($t('package.command.copied_install'))
+}
+
 // Generate install command parts for a specific package manager
 function getInstallPartsForPM(pmId: PackageManagerId) {
   return getInstallCommandParts({
@@ -105,13 +113,19 @@ function getFullCreateCommand() {
 
 // Copy handlers
 const { copied: runCopied, copy: copyRun } = useClipboard({ copiedDuring: 2000 })
-const copyRunCommand = (command?: string) => copyRun(getFullRunCommand(command))
+const copyRunCommand = (command?: string) => {
+  copyRun(getFullRunCommand(command))
+  polite($t('package.command.copied_run'))
+}
 
 const { copied: createCopied, copy: copyCreate } = useClipboard({ copiedDuring: 2000 })
-const copyCreateCommand = () => copyCreate(getFullCreateCommand())
+const copyCreateCommand = () => {
+  copyCreate(getFullCreateCommand())
+  polite($t('package.command.copied_create'))
+}
 
 const { copied: devInstallCopied, copy: copyDevInstall } = useClipboard({ copiedDuring: 2000 })
-const copyDevInstallCommand = () =>
+const copyDevInstallCommand = () => {
   copyDevInstall(
     getInstallCommand({
       packageName: props.packageName,
@@ -121,8 +135,8 @@ const copyDevInstallCommand = () =>
       dev: true,
     }),
   )
-
-const { announce } = useCommandPalette()
+  polite($t('package.command.copied_dev_install'))
+}
 
 useCommandPaletteContextCommands(
   computed((): CommandPaletteContextCommandInput[] => {
@@ -226,7 +240,7 @@ useCommandPaletteContextCommands(
           :data-pm-cmd="pm.id"
           class="flex items-center gap-2 group/installcmd min-w-0"
         >
-          <span class="self-start text-fg-subtle font-mono text-sm select-none shrink-0">$</span>
+          <span class="text-fg-subtle font-mono text-sm select-none shrink-0">$</span>
           <code class="font-mono text-sm min-w-0"
             ><span
               v-for="(part, i) in getInstallPartsForPM(pm.id)"
@@ -235,14 +249,14 @@ useCommandPaletteContextCommands(
               >{{ i > 0 ? ' ' : '' }}{{ part }}</span
             ></code
           >
-          <button
+          <ButtonBase
             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"
+            size="icon"
+            class="text-fg-muted bg-bg-subtle/80 border-border media-mouse:opacity-0 media-mouse:group-hover/installcmd:opacity-100 media-mouse:focus-within:opacity-100 active:scale-95 focus-visible:opacity-100 select-none"
             :aria-label="$t('package.get_started.copy_command')"
-            @click.stop="copyInstallCommand"
-          >
-            <span aria-live="polite">{{ copied ? $t('common.copied') : $t('common.copy') }}</span>
-          </button>
+            :classicon="copied ? 'i-lucide:check' : 'i-lucide:copy'"
+            @click.stop="copyInstallCommandWithAnnounce"
+          />
         </div>
 
         <!-- Suggested dev dependency install command -->
@@ -269,15 +283,12 @@ useCommandPaletteContextCommands(
             >
             <ButtonBase
               type="button"
-              size="sm"
-              class="text-fg-muted bg-bg-subtle/80 border-border opacity-0 group-hover/devinstallcmd:opacity-100 active:scale-95 focus-visible:opacity-100 select-none"
+              size="icon"
+              class="text-fg-muted bg-bg-subtle/80 border-border media-mouse:opacity-0 media-mouse:group-hover/devinstallcmd:opacity-100 media-mouse:focus-within:opacity-100 active:scale-95 focus-visible:opacity-100 select-none"
               :aria-label="$t('package.get_started.copy_dev_command')"
+              :classicon="devInstallCopied ? 'i-lucide:check' : 'i-lucide:copy'"
               @click.stop="copyDevInstallCommand"
-            >
-              <span aria-live="polite">{{
-                devInstallCopied ? $t('common.copied') : $t('common.copy')
-              }}</span>
-            </ButtonBase>
+            />
           </div>
         </template>
 
@@ -289,7 +300,7 @@ useCommandPaletteContextCommands(
             :data-pm-cmd="pm.id"
             class="flex items-center gap-2 min-w-0"
           >
-            <span class="self-start text-fg-subtle font-mono text-sm select-none shrink-0">$</span>
+            <span class="text-fg-subtle font-mono text-sm select-none shrink-0">$</span>
             <code class="font-mono text-sm min-w-0"
               ><span
                 v-for="(part, i) in getTypesInstallPartsForPM(pm.id)"
@@ -324,7 +335,7 @@ useCommandPaletteContextCommands(
             :data-pm-cmd="pm.id"
             class="flex items-center gap-2 group/runcmd"
           >
-            <span class="self-start text-fg-subtle font-mono text-sm select-none">$</span>
+            <span class="text-fg-subtle font-mono text-sm select-none shrink-0">$</span>
             <code class="font-mono text-sm"
               ><span
                 v-for="(part, i) in getRunPartsForPM(pm.id, executableInfo?.primaryCommand)"
@@ -333,13 +344,14 @@ useCommandPaletteContextCommands(
                 >{{ i > 0 ? ' ' : '' }}{{ part }}</span
               ></code
             >
-            <button
+            <ButtonBase
               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"
+              size="icon"
+              class="text-fg-muted bg-bg-subtle/80 border-border media-mouse:opacity-0 media-mouse:group-hover/runcmd:opacity-100 media-mouse:focus-within:opacity-100 active:scale-95 focus-visible:opacity-100 select-none"
+              :aria-label="$t('package.run.copy_command')"
+              :classicon="runCopied ? 'i-lucide:check' : 'i-lucide:copy'"
               @click.stop="copyRunCommand(executableInfo?.primaryCommand)"
-            >
-              {{ runCopied ? $t('common.copied') : $t('common.copy') }}
-            </button>
+            />
           </div>
         </template>
 
@@ -369,7 +381,7 @@ useCommandPaletteContextCommands(
             :data-pm-cmd="pm.id"
             class="flex items-center gap-2 group/createcmd"
           >
-            <span class="self-start text-fg-subtle font-mono text-sm select-none">$</span>
+            <span class="text-fg-subtle font-mono text-sm select-none shrink-0">$</span>
             <code class="font-mono text-sm"
               ><span
                 v-for="(part, i) in getCreatePartsForPM(pm.id)"
@@ -378,16 +390,14 @@ useCommandPaletteContextCommands(
                 >{{ i > 0 ? ' ' : '' }}{{ part }}</span
               ></code
             >
-            <button
+            <ButtonBase
               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"
+              size="icon"
+              class="text-fg-muted bg-bg-subtle/80 border-border media-mouse:opacity-0 media-mouse:group-hover/createcmd:opacity-100 media-mouse:focus-within:opacity-100 active:scale-95 focus-visible:opacity-100 select-none"
               :aria-label="$t('package.create.copy_command')"
+              :classicon="createCopied ? 'i-lucide:check' : 'i-lucide:copy'"
               @click.stop="copyCreateCommand"
-            >
-              <span aria-live="polite">{{
-                createCopied ? $t('common.copied') : $t('common.copy')
-              }}</span>
-            </button>
+            />
           </div>
         </template>
       </div>

app/composables/useInstallCommand.ts

@@ -82,8 +82,9 @@ export function useInstallCommand(
   const { copied, copy } = useClipboard({ copiedDuring: 2000 })
 
   async function copyInstallCommand() {
-    if (!fullInstallCommand.value) return
+    if (!fullInstallCommand.value) return false
     await copy(fullInstallCommand.value)
+    return true
   }
 
   return {

i18n/locales/en.json

@@ -468,7 +468,16 @@
     },
     "run": {
       "title": "Run",
-      "locally": "Run locally"
+      "locally": "Run locally",
+      "copy_command": "Copy command to run locally"
+    },
+    "command": {
+      "copied_install": "Install command copied",
+      "copied_dev_install": "Dev install command copied",
+      "copied_run": "Run command copied",
+      "copied_create": "Create command copied",
+      "copied_execute": "Execute command copied",
+      "copied_skills": "Skills command copied"
     },
     "readme": {
       "title": "Readme",

i18n/schema.json

@@ -1410,6 +1410,33 @@
             },
             "locally": {
               "type": "string"
+            },
+            "copy_command": {
+              "type": "string"
+            }
+          },
+          "additionalProperties": false
+        },
+        "command": {
+          "type": "object",
+          "properties": {
+            "copied_install": {
+              "type": "string"
+            },
+            "copied_dev_install": {
+              "type": "string"
+            },
+            "copied_run": {
+              "type": "string"
+            },
+            "copied_create": {
+              "type": "string"
+            },
+            "copied_execute": {
+              "type": "string"
+            },
+            "copied_skills": {
+              "type": "string"
             }
           },
           "additionalProperties": false