Updated MR extension container accessibility regions

Updates the main extension container to support the accessibility
guidelines set out in the framework.

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

@@ -96,7 +96,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,23 +13,42 @@ 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(
-          { ...extension },
+          'ul',
           {
-            props: {
-              ...extension.props.reduce(
-                (acc, key) => ({
-                  ...acc,
-                  [key]: this.mr[key],
-                }),
-                {},
-              ),
-            },
+            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 },
+                  {
+                    props: {
+                      ...extension.props.reduce(
+                        (acc, key) => ({
+                          ...acc,
+                          [key]: this.mr[key],
+                        }),
+                        {},
+                      ),
+                    },
+                  },
+                ),
+              ]),
+            ),
+          ],
         ),
-      ),
-    ]);
+      ],
+    );
   },
 };

locale/gitlab.pot

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