Merge branch 'ph/mrWidgetExtensionBaseAccessibility' into 'master'

Updated MR extension container accessibility regions

See merge request gitlab-org/gitlab!71305

app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue

@@ -117,7 +117,7 @@ export default {
 </script>
 
 <template>
-  <section class="media-section mr-widget-border-top" data-testid="widget-extension">
+  <section class="media-section" data-testid="widget-extension">
     <div class="media gl-p-5">
       <status-icon
         :name="$options.name"

app/assets/javascripts/vue_merge_request_widget/components/extensions/container.js

+import { __ } from '~/locale';
 import { registeredExtensions } from './index';
 
 export default {
@@ -12,8 +13,23 @@ export default {
 
     if (extensions.length === 0) return null;
 
-    return h('div', {}, [
-      ...extensions.map((extension) =>
+    return h(
+      'div',
+      {
+        attrs: {
+          role: 'region',
+          'aria-label': __('Merge request reports'),
+        },
+      },
+      [
+        h(
+          'ul',
+          {
+            class: 'gl-p-0 gl-m-0 gl-list-style-none',
+          },
+          [
+            ...extensions.map((extension, index) =>
+              h('li', { attrs: { class: index > 0 && 'mr-widget-border-top' } }, [
                 h(
                   { ...extension },
                   {
@@ -28,7 +44,11 @@ export default {
                     },
                   },
                 ),
+              ]),
+            ),
+          ],
         ),
-    ]);
+      ],
+    );
   },
 };

locale/gitlab.pot

@@ -21350,6 +21350,9 @@ msgstr ""
 msgid "Merge request events"
 msgstr ""
 
+msgid "Merge request reports"
+msgstr ""
+
 msgid "Merge request was scheduled to merge after pipeline succeeds"
 msgstr ""