refactor: change key shortcut prop

Author: essenmitsosse

app/components/AppHeader.vue

@@ -157,7 +157,7 @@ onKeyStroke(
           class="border-none"
           variant="button-secondary"
           :to="{ name: 'compare' }"
-          keyshortcut="c"
+          aria-keyshortcuts="c"
         >
           {{ $t('nav.compare') }}
         </LinkBase>
@@ -167,7 +167,7 @@ onKeyStroke(
           class="border-none"
           variant="button-secondary"
           :to="{ name: 'settings' }"
-          keyshortcut=","
+          aria-keyshortcuts=","
         >
           {{ $t('nav.settings') }}
         </LinkBase>

app/components/Button/Base.vue

@@ -1,18 +1,13 @@
 <script setup lang="ts">
 const props = withDefaults(
   defineProps<{
-    'disabled'?: boolean
-    'type'?: 'button' | 'submit'
-    'variant'?: 'primary' | 'secondary'
-    'size'?: 'small' | 'medium'
-    'keyshortcut'?: string
+    disabled?: boolean
+    type?: 'button' | 'submit'
+    variant?: 'primary' | 'secondary'
+    size?: 'small' | 'medium'
+    ariaKeyshortcuts?: string
 
-    /**
-     * Do not use this directly. Use keyshortcut instead; it generates the correct HTML and displays the shortcut in the UI.
-     */
-    'aria-keyshortcuts'?: never
-
-    'classicon'?: string
+    classicon?: string
   }>(),
   {
     type: 'button',
@@ -51,7 +46,7 @@ defineExpose({
        */
       disabled ? true : undefined
     "
-    :aria-keyshortcuts="keyshortcut"
+    :aria-keyshortcuts="ariaKeyshortcuts"
   >
     <span
       v-if="classicon"
@@ -60,11 +55,11 @@ defineExpose({
     />
     <slot />
     <kbd
-      v-if="keyshortcut"
+      v-if="ariaKeyshortcuts"
       class="ms-2 inline-flex items-center justify-center w-4 h-4 text-xs text-fg bg-bg-muted border border-border rounded no-underline"
       aria-hidden="true"
     >
-      {{ keyshortcut }}
+      {{ ariaKeyshortcuts }}
     </kbd>
   </button>
 </template>

app/components/Link/Base.vue

@@ -5,37 +5,32 @@ const props = withDefaults(
   defineProps<
     {
       /** Disabled links will be displayed as plain text */
-      'disabled'?: boolean
+      disabled?: boolean
       /**
        * `type` should never be used, because this will always be a link.
        * */
-      'type'?: never
-      'variant'?: 'button-primary' | 'button-secondary' | 'link'
-      'size'?: 'small' | 'medium'
+      type?: never
+      variant?: 'button-primary' | 'button-secondary' | 'link'
+      size?: 'small' | 'medium'
 
-      'keyshortcut'?: string
-
-      /**
-       * Do not use this directly. Use keyshortcut instead; it generates the correct HTML and displays the shortcut in the UI.
-       */
-      'aria-keyshortcuts'?: never
+      ariaKeyshortcuts?: string
 
       /**
        * Don't use this directly. This will automatically be set to `_blank` for external links passed via `to`.
        */
-      'target'?: never
+      target?: never
 
       /**
        * Don't use this directly. This will automatically be set for external links passed via `to`.
        */
-      'rel'?: never
+      rel?: never
 
-      'classicon'?: string
+      classicon?: string
 
-      'to'?: NuxtLinkProps['to']
+      to?: NuxtLinkProps['to']
 
       /** always use `to` instead of `href` */
-      'href'?: never
+      href?: never
     } & NuxtLinkProps
   >(),
   { variant: 'link', size: 'medium' },
@@ -86,7 +81,7 @@ const isButtonMedium = computed(() => props.size === 'medium' && props.variant !
       'text-bg bg-fg hover:(bg-fg/50) focus-visible:(bg-fg/50)': variant === 'button-primary',
     }"
     :to="to"
-    :aria-keyshortcuts="keyshortcut"
+    :aria-keyshortcuts="ariaKeyshortcuts"
     :target="isLinkExternal ? '_blank' : undefined"
   >
     <span
@@ -107,11 +102,11 @@ const isButtonMedium = computed(() => props.size === 'medium' && props.variant !
       aria-hidden="true"
     />
     <kbd
-      v-if="keyshortcut"
+      v-if="ariaKeyshortcuts"
       class="ms-2 inline-flex items-center justify-center w-4 h-4 text-xs text-fg bg-bg-muted border border-border rounded no-underline"
       aria-hidden="true"
     >
-      {{ keyshortcut }}
+      {{ ariaKeyshortcuts }}
     </kbd>
   </NuxtLink>
 </template>

app/pages/package/[[org]]/[name].vue

@@ -616,23 +616,23 @@ onKeyStroke(
               variant="button-secondary"
               v-if="docsLink"
               :to="docsLink"
-              keyshortcut="d"
+              aria-keyshortcuts="d"
               classicon="i-carbon:document"
             >
               {{ $t('package.links.docs') }}
             </LinkBase>
             <LinkBase
               variant="button-secondary"
               :to="{ name: 'code', params: { path: [pkg.name, 'v', resolvedVersion] } }"
-              keyshortcut="."
+              aria-keyshortcuts="."
               classicon="i-carbon:code"
             >
               {{ $t('package.links.code') }}
             </LinkBase>
             <LinkBase
               variant="button-secondary"
               :to="{ name: 'compare', query: { packages: pkg.name } }"
-              keyshortcut="c"
+              aria-keyshortcuts="c"
               classicon="i-carbon:compare"
             >
               {{ $t('package.links.compare') }}