Add latest changes from gitlab-org/gitlab@master

2 files changed, 35 insertions, 15 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue b/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue
index 7ea24171aa8..b2c9d28a88b 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/extensions/base.vue
+++ b/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"
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 46046d16fcf..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,3 +1,4 @@
+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],
+                        }),
+                        {},
+                      ),
+                    },
+                  },
+                ),
+              ]),
+            ),
+          ],
         ),
-      ),
-    ]);
+      ],
+    );
   },
 };