Merge branch 'a11y-mr-widget-issue-body' into 'master'

Add accessibility issue body

See merge request gitlab-org/gitlab!28823

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

+<script>
+import { GlLink } from '@gitlab/ui';
+
+export default {
+  name: 'AccessibilityIssueBody',
+  components: {
+    GlLink,
+  },
+  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", "G168", "H91", etc. from the code which is used for the documentation.
+       * Here we simply split the string on `.` and get the code in the 5th position
+       */
+      if (this.issue.code === undefined) {
+        return null;
+      }
+
+      return this.issue.code.split('.')[4] || null;
+    },
+    learnMoreUrl() {
+      if (this.parsedTECHSCode === null) {
+        return 'https://www.w3.org/TR/WCAG20-TECHS/Overview.html';
+      }
+
+      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 ref="accessibility-issue-description" class="report-block-list-issue-description-text">
+      <div
+        v-if="isNew"
+        ref="accessibility-issue-is-new-badge"
+        class="badge badge-danger append-right-5"
+      >
+        {{ s__('AccessibilityReport|New') }}
+      </div>
+      {{ issue.name }}
+      <gl-link ref="accessibility-issue-learn-more" :href="learnMoreUrl" target="_blank">{{
+        s__('AccessibilityReport|Learn More')
+      }}</gl-link>
+      {{ sprintf(s__('AccessibilityReport|Message: %{message}'), { 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

@@ -1024,6 +1024,15 @@ msgstr ""
 msgid "AccessTokens|reset it"
 msgstr ""
 
+msgid "AccessibilityReport|Learn More"
+msgstr ""
+
+msgid "AccessibilityReport|Message: %{message}"
+msgstr ""
+
+msgid "AccessibilityReport|New"
+msgstr ""
+
 msgid "Account"
 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',
+  message: 'This element has insufficient contrast at this conformance level.',
+  status: 'failed',
+  className: 'spec.test_spec',
+  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();
+    wrapper = null;
+  });
+
+  it('Displays the issue message', () => {
+    const description = wrapper.find({ ref: 'accessibility-issue-description' }).text();
+
+    expect(description).toContain(`Message: ${issue.message}`);
+  });
+
+  describe('When an issue code is present', () => {
+    it('Creates the correct URL for learning more about the issue code', () => {
+      const learnMoreUrl = wrapper
+        .find({ ref: 'accessibility-issue-learn-more' })
+        .attributes('href');
+
+      expect(learnMoreUrl).toEqual(issue.learnMoreUrl);
+    });
+  });
+
+  describe('When an issue code is not present', () => {
+    beforeEach(() => {
+      mountComponent({
+        ...issue,
+        code: undefined,
+      });
+    });
+
+    it('Creates a URL leading to the overview documentation page', () => {
+      const learnMoreUrl = wrapper
+        .find({ ref: 'accessibility-issue-learn-more' })
+        .attributes('href');
+
+      expect(learnMoreUrl).toEqual('https://www.w3.org/TR/WCAG20-TECHS/Overview.html');
+    });
+  });
+
+  describe('When an issue code does not contain the TECHS code', () => {
+    beforeEach(() => {
+      mountComponent({
+        ...issue,
+        code: 'WCAG2AA.Principle4.Guideline4_1.4_1_2',
+      });
+    });
+
+    it('Creates a URL leading to the overview documentation page', () => {
+      const learnMoreUrl = wrapper
+        .find({ ref: 'accessibility-issue-learn-more' })
+        .attributes('href');
+
+      expect(learnMoreUrl).toEqual('https://www.w3.org/TR/WCAG20-TECHS/Overview.html');
+    });
+  });
+
+  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);
+    });
+  });
+});