1 files changed, 16 insertions, 14 deletions
diff --git a/app/assets/javascripts/reports/accessibility_report/components/accessibility_issue_body.vue b/app/assets/javascripts/reports/accessibility_report/components/accessibility_issue_body.vue
index 6aae9195be1..653dcced98b 100644
--- a/app/assets/javascripts/reports/accessibility_report/components/accessibility_issue_body.vue
+++ b/app/assets/javascripts/reports/accessibility_report/components/accessibility_issue_body.vue
@@ -26,18 +26,11 @@ export default {
        * 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;
+      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`;
+      // eslint-disable-next-line @gitlab/require-i18n-strings
+      return `https://www.w3.org/TR/WCAG20-TECHS/${this.parsedTECHSCode || 'Overview'}.html`;
     },
   },
 };
@@ -52,10 +45,19 @@ export default {
       >
         {{ s__('AccessibilityReport|New') }}
       </div>
-      {{ issue.name }}
-      <gl-link ref="accessibility-issue-learn-more" :href="learnMoreUrl" target="_blank">{{
-        s__('AccessibilityReport|Learn More')
-      }}</gl-link>
+      <div>
+        {{
+          sprintf(
+            s__(
+              'AccessibilityReport|The accessibility scanning found an error of the following type: %{code}',
+            ),
+            { code: issue.code },
+          )
+        }}
+        <gl-link ref="accessibility-issue-learn-more" :href="learnMoreUrl" target="_blank">{{
+          s__('AccessibilityReport|Learn More')
+        }}</gl-link>
+      </div>
       {{ sprintf(s__('AccessibilityReport|Message: %{message}'), { message: issue.message }) }}
     </div>
   </div>