Modifies GAR list page header metadata items

Screenreader support is better

EE: true

ee/app/assets/javascripts/packages_and_registries/google_artifact_registry/components/list/header.vue

 <script>
 import { GlAlert, GlButton, GlTooltipDirective } from '@gitlab/ui';
-import { s__ } from '~/locale';
+import { s__, sprintf } from '~/locale';
 import MetadataItem from '~/vue_shared/components/registry/metadata_item.vue';
 import TitleArea from '~/vue_shared/components/registry/title_area.vue';
 
@@ -40,6 +40,16 @@ export default {
     showActions() {
       return !this.isLoading && !this.showError;
     },
+    projectIdMetadata() {
+      return sprintf(s__('GoogleArtifactRegistry|Project ID: %{projectId}'), {
+        projectId: this.data.projectId,
+      });
+    },
+    repositoryMetadata() {
+      return sprintf(s__('GoogleArtifactRegistry|Repository: %{repository}'), {
+        repository: this.data.repository,
+      });
+    },
   },
   i18n: {
     settingsText: s__('GoogleArtifactRegistry|Configure in settings'),
@@ -74,19 +84,12 @@ export default {
       <metadata-item
         data-testid="repository-name"
         icon="folder"
-        :text="data.repository"
-        :text-tooltip="s__('GoogleArtifactRegistry|Repository name')"
-        size="xl"
+        :text="repositoryMetadata"
+        size="l"
       />
     </template>
     <template v-if="showMetadata" #metadata-project>
-      <metadata-item
-        data-testid="project-id"
-        icon="project"
-        :text="data.projectId"
-        :text-tooltip="s__('GoogleArtifactRegistry|Project ID')"
-        size="xl"
-      />
+      <metadata-item data-testid="project-id" icon="project" :text="projectIdMetadata" size="l" />
     </template>
     <gl-alert v-if="showError" variant="danger" :dismissible="false">
       {{ s__('GoogleArtifactRegistry|An error occurred while fetching the artifacts.') }}

ee/spec/frontend/packages_and_registries/google_artifact_registry/components/list/header_spec.js

@@ -103,10 +103,9 @@ describe('Google Artifact Registry list page header', () => {
           createComponent();
 
           expect(findRepositoryNameSubHeader().props()).toMatchObject({
-            text: defaultProps.data.repository,
-            textTooltip: 'Repository name',
             icon: 'folder',
-            size: 'xl',
+            text: `Repository: ${defaultProps.data.repository}`,
+            size: 'l',
           });
         });
       });
@@ -116,10 +115,9 @@ describe('Google Artifact Registry list page header', () => {
           createComponent();
 
           expect(findProjectIDSubHeader().props()).toMatchObject({
-            text: defaultProps.data.projectId,
-            textTooltip: 'Project ID',
             icon: 'project',
-            size: 'xl',
+            text: `Project ID: ${defaultProps.data.projectId}`,
+            size: 'l',
           });
         });
       });

locale/gitlab.pot

@@ -23312,7 +23312,7 @@ msgstr ""
 msgid "GoogleArtifactRegistry|Project"
 msgstr ""
-msgid "GoogleArtifactRegistry|Project ID"
+msgid "GoogleArtifactRegistry|Project ID: %{projectId}"
 msgstr ""
 msgid "GoogleArtifactRegistry|Push new ones from your CI/CD pipeline."
@@ -23321,7 +23321,7 @@ msgstr ""
 msgid "GoogleArtifactRegistry|Repository"
 msgstr ""
-msgid "GoogleArtifactRegistry|Repository name"
+msgid "GoogleArtifactRegistry|Repository: %{repository}"
 msgstr ""
 msgid "GoogleArtifactRegistry|Tags"