1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
<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>
|
