refactor: make action bar a landmark region

Author: MatteoGabriele

app/components/Package/ActionBar.vue

@@ -22,10 +22,14 @@ onKeyStroke(
 
 <template>
   <Transition name="action-bar-slide" appear>
-    <div
+    <section
       v-if="selectedPackages.length"
+      aria-labelledby="action-bar-title"
       class="fixed bottom-10 inset-is-0 w-full flex items-center justify-center z-36 pointer-events-none"
     >
+      <h3 id="action-bar-title" class="sr-only">
+        {{ $t('action_bar.title') }}
+      </h3>
       <div
         ref="actionBarRef"
         tabindex="-1"
@@ -59,7 +63,7 @@ onKeyStroke(
           {{ $t('package.links.compare') }}
         </LinkBase>
       </div>
-    </div>
+    </section>
   </Transition>
 </template>
 

i18n/locales/en.json

@@ -1352,6 +1352,7 @@
     }
   },
   "action_bar": {
+    "title": "action bar",
     "selection": "0 selected | 1 selected | {count} selected",
     "shortcut": "Press \"{key}\" to focus actions"
   }

i18n/schema.json

@@ -4060,6 +4060,9 @@
     "action_bar": {
       "type": "object",
       "properties": {
+        "title": {
+          "type": "string"
+        },
         "selection": {
           "type": "string"
         },