Fixed parsed TECHS code

The algorithm for parsing TECHS code
from the issue code was flawed. It has been
updated, and tests have been updated as well.

Also refactored some of the i18n strings and
added extra tests.

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,
@@ -18,13 +23,25 @@ export default {
        * 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.
+       * 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
        */
-      return this.issue.code.match(/[A-Z]{1}[1-9]{2}/g)[0];
+      if (this.issue.code === undefined) {
+        return null;
+      }
+
+      const splitCode = this.issue.code.split('.');
+      if (splitCode.length < 5) {
+        return null;
+      }
+
+      return this.issue.code.split('.')[4];
     },
     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`;
     },
   },
@@ -32,20 +49,19 @@ export default {
 </script>
 <template>
   <div class="report-block-list-issue-description prepend-top-5 append-bottom-5">
-    <div class="report-block-list-issue-description-text">
+    <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"
       >
-        {{ __('New') }}
+        {{ s__('AccessibilityReport|New') }}
       </div>
       {{ issue.name }}
-      <a ref="accessibility-issue-learn-more" :href="learnMoreUrl">{{
+      <gl-link ref="accessibility-issue-learn-more" :href="learnMoreUrl" target="_blank">{{
         s__('AccessibilityReport|Learn More')
-      }}</a>
-      {{ s__('AccessibilityReport|Message: ') }}
-      {{ issue.message }}
+      }}</gl-link>
+      {{ sprintf(s__('AccessibilityReport|Message: %{message}'), { message: issue.message }) }}
     </div>
   </div>
 </template>

locale/gitlab.pot

@@ -1027,7 +1027,10 @@ msgstr ""
 msgid "AccessibilityReport|Learn More"
 msgstr ""
 
-msgid "AccessibilityReport|Message: "
+msgid "AccessibilityReport|Message: %{message}"
+msgstr ""
+
+msgid "AccessibilityReport|New"
 msgstr ""
 
 msgid "Account"

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

@@ -5,6 +5,7 @@ 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',
@@ -36,11 +37,57 @@ describe('CustomMetricsForm', () => {
 
   afterEach(() => {
     wrapper.destroy();
+    wrapper = null;
   });
 
-  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);
+  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', () => {