Add accessibility issue body

This is a first step in creating the a11y
merge request widget. Every MR widget
report uses the "issue body" setup to
create custom reports. This is creating
the issue body to be used by the a11y
MR widget issues.

app/assets/javascripts/reports/accessibility_report/components/accessibility_issue_body.vue

+<script>
+export default {
+  name: 'AccessibilityIssueBody',
+  props: {
+    issue: {
+      type: Object,
+      required: true,
+    },
+    isNew: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  computed: {
+    parsedTECHSCode() {
+      /*
+       * In issue code looks like "WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail"
+       * or "WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent"
+       *
+       * The TECHS code is the "G18" or "H91" from the code which is used for the documentation.
+       * This regex pattern simply gets the part of the string where there is a single letter
+       * followed by two digits.
+       */
+      return this.issue.code.match(/[A-Z]{1}[1-9]{2}/g)[0];
+    },
+    learnMoreUrl() {
+      return `https://www.w3.org/TR/WCAG20-TECHS/${this.parsedTECHSCode}.html`;
+    },
+  },
+};
+</script>
+<template>
+  <div class="report-block-list-issue-description prepend-top-5 append-bottom-5">
+    <div class="report-block-list-issue-description-text">
+      <div
+        v-if="isNew"
+        ref="accessibility-issue-is-new-badge"
+        class="badge badge-danger append-right-5"
+      >
+        {{ __('New') }}
+      </div>
+      {{ issue.name }}
+      <a :href="learnMoreUrl">{{ __('Learn More') }}</a>
+      {{ __('Message: ') }}
+      {{ issue.message }}
+    </div>
+  </div>
+</template>

app/assets/javascripts/reports/components/issue_body.js

 import TestIssueBody from './test_issue_body.vue';
+import AccessibilityIssueBody from '../accessibility_report/components/accessibility_issue_body.vue';
 
 export const components = {
+  AccessibilityIssueBody,
   TestIssueBody,
 };
 
 export const componentNames = {
+  AccessibilityIssueBody: AccessibilityIssueBody.name,
   TestIssueBody: TestIssueBody.name,
 };

locale/gitlab.pot

@@ -12725,6 +12725,9 @@ msgstr ""
 msgid "Merging immediately isn't recommended as it may negatively impact the existing merge train. Read the %{docsLinkStart}documentation%{docsLinkEnd} for more information."
 msgstr ""
 
+msgid "Message: "
+msgstr ""
+
 msgid "Messages"
 msgstr ""
 

spec/frontend/reports/accessibility_report/components/accessibility_issue_body_spec.js

+import { shallowMount } from '@vue/test-utils';
+import AccessibilityIssueBody from '~/reports/accessibility_report/components/accessibility_issue_body.vue';
+
+const issue = {
+  name:
+    'The accessibility scanning found 2 errors of the following type: WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent',
+  code: 'WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent',
+  status: 'failed',
+  className: 'spec.test_spec',
+  parsedTECHSCode: 'H91',
+  learnMoreUrl: 'https://www.w3.org/TR/WCAG20-TECHS/H91.html',
+};
+
+describe('CustomMetricsForm', () => {
+  let wrapper;
+
+  const mountComponent = ({ name, code, message, status, className }, isNew = false) => {
+    wrapper = shallowMount(AccessibilityIssueBody, {
+      propsData: {
+        issue: {
+          name,
+          code,
+          message,
+          status,
+          className,
+        },
+        isNew,
+      },
+    });
+  };
+
+  const findIsNewBadge = () => wrapper.find({ ref: 'accessibility-issue-is-new-badge' });
+
+  beforeEach(() => {
+    mountComponent(issue);
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('Parses the TECHS Code from the issue code correctly', () => {
+    expect(wrapper.vm.parsedTECHSCode).toEqual(issue.parsedTECHSCode);
+  });
+
+  it('Creates the correct URL for learning more about the issue code', () => {
+    expect(wrapper.vm.learnMoreUrl).toEqual(issue.learnMoreUrl);
+  });
+
+  describe('When issue is new', () => {
+    beforeEach(() => {
+      mountComponent(issue, true);
+    });
+
+    it('Renders the new badge', () => {
+      expect(findIsNewBadge().exists()).toEqual(true);
+    });
+  });
+
+  describe('When issue is not new', () => {
+    beforeEach(() => {
+      mountComponent(issue, false);
+    });
+
+    it('Does not render the new badge', () => {
+      expect(findIsNewBadge().exists()).toEqual(false);
+    });
+  });
+});