1 files changed, 40 insertions, 13 deletions
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/extensions/container.js b/app/assets/javascripts/vue_merge_request_widget/components/extensions/container.js
index 529160de6a7..b9dfd3bd41e 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/extensions/container.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/extensions/container.js
@@ -1,4 +1,5 @@
-import { extensions } from './index';
+import { __ } from '~/locale';
+import { registeredExtensions } from './index';
 
 export default {
   props: {
@@ -8,20 +9,46 @@ export default {
     },
   },
   render(h) {
+    const { extensions } = registeredExtensions;
+
+    if (extensions.length === 0) return null;
+
     return h(
       'div',
-      {},
-      extensions.map((extension) =>
-        h(extension, {
-          props: extensions[0].props.reduce(
-            (acc, key) => ({
-              ...acc,
-              [key]: this.mr[key],
-            }),
-            {},
-          ),
-        }),
-      ),
+      {
+        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 },
+                  {
+                    props: {
+                      ...extension.props.reduce(
+                        (acc, key) => ({
+                          ...acc,
+                          [key]: this.mr[key],
+                        }),
+                        {},
+                      ),
+                    },
+                  },
+                ),
+              ]),
+            ),
+          ],
+        ),
+      ],
     );
   },
 };