fix(a11y): announce more command palette actions

Author: serhalp

app/components/Diff/ViewerPanel.vue

@@ -88,6 +88,8 @@ function getCodeUrl(version: string): string {
   return `/package-code/${props.packageName}/v/${version}/${props.file.path}`
 }
 
+const { announce } = useCommandPalette()
+
 useCommandPaletteContextCommands(
   computed((): CommandPaletteContextCommandInput[] => [
     {
@@ -101,6 +103,14 @@ useCommandPaletteContextCommands(
         : $t('command_palette.state.off'),
       action: () => {
         mergeModifiedLines.value = !mergeModifiedLines.value
+        announce(
+          $t(
+            mergeModifiedLines.value
+              ? 'command_palette.announcements.setting_on'
+              : 'command_palette.announcements.setting_off',
+            { setting: $t('command_palette.diff.merge_modified_lines') },
+          ),
+        )
       },
     },
     {
@@ -112,6 +122,14 @@ useCommandPaletteContextCommands(
       badge: wordWrap.value ? $t('command_palette.state.on') : $t('command_palette.state.off'),
       action: () => {
         wordWrap.value = !wordWrap.value
+        announce(
+          $t(
+            wordWrap.value
+              ? 'command_palette.announcements.setting_on'
+              : 'command_palette.announcements.setting_off',
+            { setting: $t('command_palette.diff.word_wrap') },
+          ),
+        )
       },
     },
   ]),

app/components/Package/Header.vue

@@ -81,6 +81,8 @@ function hasProvenance(version: PackumentVersion | null): boolean {
   return !!(version.dist as { attestations?: unknown }).attestations
 }
 
+const { announce } = useCommandPalette()
+
 useCommandPaletteContextCommands(
   computed((): CommandPaletteContextCommandInput[] => {
     if (!packageName.value) return []
@@ -94,6 +96,7 @@ useCommandPaletteContextCommands(
         iconClass: 'i-lucide:copy',
         action: () => {
           copyPkgName()
+          announce($t('command_palette.announcements.copied_to_clipboard'))
         },
       },
     ]

app/components/Terminal/Install.vue

@@ -125,6 +125,8 @@ const copyDevInstallCommand = () =>
     }),
   )
 
+const { announce } = useCommandPalette()
+
 useCommandPaletteContextCommands(
   computed((): CommandPaletteContextCommandInput[] => {
     const commands: CommandPaletteContextCommandInput[] = [
@@ -136,6 +138,7 @@ useCommandPaletteContextCommands(
         iconClass: 'i-lucide:copy',
         action: () => {
           copyInstallCommand()
+          announce($t('command_palette.announcements.copied_to_clipboard'))
         },
       },
     ]
@@ -149,6 +152,7 @@ useCommandPaletteContextCommands(
         iconClass: 'i-lucide:copy-plus',
         action: () => {
           copyDevInstallCommand()
+          announce($t('command_palette.announcements.copied_to_clipboard'))
         },
       })
     }
@@ -162,6 +166,7 @@ useCommandPaletteContextCommands(
         iconClass: 'i-lucide:terminal-square',
         action: () => {
           copyRunCommand(props.executableInfo?.primaryCommand)
+          announce($t('command_palette.announcements.copied_to_clipboard'))
         },
       })
     }
@@ -175,6 +180,7 @@ useCommandPaletteContextCommands(
         iconClass: 'i-lucide:wand-sparkles',
         action: () => {
           copyCreateCommand()
+          announce($t('command_palette.announcements.copied_to_clipboard'))
         },
       })
     }

app/composables/useCommandPaletteGlobalCommands.ts

@@ -514,9 +514,12 @@ export function useCommandPaletteGlobalCommands({
             t('command_palette.connections.npm_connected', { username: npmUsername }),
           ],
           iconClass: 'i-lucide:plug-zap',
-          action: closeThen(() => {
-            disconnectNpm()
-          }),
+          action: runThenAnnounce(
+            () => {
+              disconnectNpm()
+            },
+            () => t('command_palette.announcements.npm_disconnected'),
+          ),
         },
         {
           id: 'my-packages',
@@ -572,9 +575,12 @@ export function useCommandPaletteGlobalCommands({
             }),
           ],
           iconClass: 'i-lucide:log-out',
-          action: closeThen(async () => {
-            await logout()
-          }),
+          action: runThenAnnounce(
+            async () => {
+              await logout()
+            },
+            () => t('command_palette.announcements.atmosphere_disconnected'),
+          ),
         },
         {
           id: 'my-profile',

app/pages/compare.vue

@@ -136,6 +136,8 @@ function exportComparisonDataAsMarkdown() {
   copy(markdown)
 }
 
+const { announce } = useCommandPalette()
+
 useCommandPaletteContextCommands(
   computed((): CommandPaletteContextCommandInput[] => {
     const commands: CommandPaletteContextCommandInput[] = [
@@ -147,6 +149,7 @@ useCommandPaletteContextCommands(
         iconClass: 'i-lucide:list-checks',
         action: () => {
           selectAll()
+          announce($t('command_palette.announcements.facets_all_selected'))
         },
       },
       {
@@ -157,6 +160,7 @@ useCommandPaletteContextCommands(
         iconClass: 'i-lucide:list-x',
         action: () => {
           deselectAll()
+          announce($t('command_palette.announcements.facets_all_deselected'))
         },
       },
     ]
@@ -170,6 +174,7 @@ useCommandPaletteContextCommands(
         iconClass: 'i-lucide:copy',
         action: () => {
           exportComparisonDataAsMarkdown()
+          announce($t('command_palette.announcements.copied_to_clipboard'))
         },
       })
     }
@@ -185,6 +190,11 @@ useCommandPaletteContextCommands(
           active: comparisonView.value === 'table',
           action: () => {
             comparisonView.value = 'table'
+            announce(
+              $t('command_palette.announcements.view_switched', {
+                view: $t('compare.packages.table_view'),
+              }),
+            )
           },
         },
         {
@@ -196,6 +206,11 @@ useCommandPaletteContextCommands(
           active: comparisonView.value === 'charts',
           action: () => {
             comparisonView.value = 'charts'
+            announce(
+              $t('command_palette.announcements.view_switched', {
+                view: $t('compare.packages.charts_view'),
+              }),
+            )
           },
         },
       )

i18n/locales/en.json

@@ -176,7 +176,15 @@
       "theme_changed": "Theme set to {theme}.",
       "accent_color_changed": "Accent color set to {color}.",
       "background_theme_changed": "Background shade set to {theme}.",
-      "download_started": "Downloading {package} tarball."
+      "download_started": "Downloading {package} tarball.",
+      "copied_to_clipboard": "Copied to clipboard.",
+      "npm_disconnected": "npm CLI disconnected.",
+      "atmosphere_disconnected": "Atmosphere disconnected.",
+      "facets_all_selected": "All facets selected.",
+      "facets_all_deselected": "All facets deselected.",
+      "view_switched": "Switched to {view} view.",
+      "setting_on": "{setting} on.",
+      "setting_off": "{setting} off."
     }
   },
   "nav": {

i18n/locales/fr-FR.json

@@ -175,7 +175,16 @@
       "relative_dates_off": "Dates relatives désactivées.",
       "theme_changed": "Thème {theme}.",
       "accent_color_changed": "Couleur d’accentuation {color}.",
-      "background_theme_changed": "Couleur d’arrière-plan {theme}."
+      "background_theme_changed": "Couleur d’arrière-plan {theme}.",
+      "download_started": "Téléchargement du tarball de {package}.",
+      "copied_to_clipboard": "Copié dans le presse-papiers.",
+      "npm_disconnected": "npm CLI déconnecté.",
+      "atmosphere_disconnected": "Atmosphere déconnecté.",
+      "facets_all_selected": "Toutes les facettes sélectionnées.",
+      "facets_all_deselected": "Toutes les facettes désélectionnées.",
+      "view_switched": "Vue {view} activée.",
+      "setting_on": "{setting} activé.",
+      "setting_off": "{setting} désactivé."
     }
   },
   "nav": {