Changed the approval status to use GlLink rather than a direct a tag

ee/app/assets/javascripts/compliance_dashboard/components/approval_status.vue

 <script>
-import { GlTooltipDirective } from '@gitlab/ui';
+import { GlLink, GlTooltipDirective } from '@gitlab/ui';
 
 import { s__ } from '~/locale';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
@@ -12,6 +12,7 @@ export default {
   },
   components: {
     CiIcon,
+    GlLink,
   },
   props: {
     status: {
@@ -45,9 +46,9 @@ export default {
 </script>
 
 <template>
-  <a
+  <gl-link
     href="https://docs.gitlab.com/ee/user/compliance/compliance_dashboard/#approval-status-and-separation-of-duties"
   >
     <ci-icon v-gl-tooltip.left="tooltip" class="gl-display-flex" :status="{ icon, group }" />
-  </a>
+  </gl-link>
 </template>

ee/spec/frontend/compliance_dashboard/components/approval_status_spec.js

 import { shallowMount } from '@vue/test-utils';
+import { GlLink } from '@gitlab/ui';
 
 import ApprovalStatus from 'ee/compliance_dashboard/components/approval_status.vue';
 
@@ -6,7 +7,7 @@ describe('ApprovalStatus component', () => {
   let wrapper;
 
   const findIcon = () => wrapper.find('.ci-icon');
-  const findLink = () => wrapper.find('a');
+  const findLink = () => wrapper.find(GlLink);
 
   const createComponent = status => {
     return shallowMount(ApprovalStatus, {