feat(a11y): add accessible label to AppPopover

Author: AscaL

app/components/AppPopover.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 const props = defineProps<{
+  /** Accessible name for the dialog (required for a11y when popover is open) */
+  label?: string
   /** Position of the popover panel: 'top' | 'bottom' | 'left' | 'right' */
   position?: 'top' | 'bottom' | 'left' | 'right'
 }>()
@@ -63,6 +65,7 @@ onBeforeUnmount(clearCloseTimeout)
         v-if="isOpen"
         :id="popoverId"
         role="dialog"
+        :aria-label="label"
         aria-modal="false"
         class="absolute font-mono text-xs text-fg bg-bg-subtle border border-border rounded-lg shadow-lg z-[100] pointer-events-auto px-4 py-3 min-w-[14rem] max-w-[22rem] whitespace-normal"
         :class="panelPosition"

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

@@ -497,7 +497,7 @@ defineOgImageComponent('Package', {
 
             <template v-if="hasProvenance(displayVersion) && provenanceBadgeMounted">
               <div class="relative inline-flex">
-                <AppPopover position="bottom">
+                <AppPopover :label="$t('package.verified_provenance')" position="bottom">
                   <template #content>
                     <p class="flex items-center gap-2 text-fg m-0">
                       <span

test/nuxt/a11y.spec.ts

@@ -233,6 +233,7 @@ describe('component accessibility audits', () => {
 
     it('should have no accessibility violations when open', async () => {
       const component = await mountSuspended(AppPopover, {
+        props: { label: 'Popover' },
         slots: {
           default: '<button type="button">Trigger</button>',
           content: '<p>Popover content</p>',