Merge branch 'a11y-fix-pipeline-status' into 'master'

Pipeline Status: Add aria-label

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/144969



Merged-by: Miguel Rincon <mrincon@gitlab.com>
Approved-by: Julia Miocene <jmiocene@gitlab.com>
Approved-by: Miguel Rincon <mrincon@gitlab.com>
Reviewed-by: Miguel Rincon <mrincon@gitlab.com>
Reviewed-by: Sascha Eggenberger <seggenberger@gitlab.com>
Co-authored-by: Sascha Eggenberger <seggenberger@gitlab.com>

app/assets/javascripts/vue_shared/components/ci_icon/ci_icon.vue

 <script>
 import { GlBadge, GlTooltipDirective, GlIcon } from '@gitlab/ui';
+import { sprintf, __ } from '~/locale';
 
 /**
  * Renders CI icon based on API response shared between all places where it is used.
@@ -58,11 +59,7 @@ export default {
       return null;
     },
     ariaLabel() {
-      // show aria-label only when text is not rendered
-      if (!this.showStatusText) {
-        return this.status?.text;
-      }
-      return null;
+      return sprintf(__('Status: %{status}'), { status: this.status?.text });
     },
     href() {
       // href can come from GraphQL (camelCase) or REST API (snake_case)

locale/gitlab.pot

@@ -48067,6 +48067,9 @@ msgstr ""
 msgid "Status:"
 msgstr ""
+msgid "Status: %{status}"
+msgstr ""
+
 msgid "Status: %{title}"
 msgstr ""

spec/frontend/vue_shared/components/ci_icon/ci_icon_spec.js

@@ -30,14 +30,14 @@ describe('CI Icon component', () => {
   });
 
   describe.each`
-    showStatusText | showTooltip | expectedText | expectedTooltip | expectedAriaLabel
-    ${true}        | ${true}     | ${'Success'} | ${undefined}    | ${undefined}
-    ${true}        | ${false}    | ${'Success'} | ${undefined}    | ${undefined}
-    ${false}       | ${true}     | ${''}        | ${'Success'}    | ${'Success'}
-    ${false}       | ${false}    | ${''}        | ${undefined}    | ${'Success'}
+    showStatusText | showTooltip | expectedText | expectedTooltip
+    ${true}        | ${true}     | ${'Success'} | ${undefined}
+    ${true}        | ${false}    | ${'Success'} | ${undefined}
+    ${false}       | ${true}     | ${''}        | ${'Success'}
+    ${false}       | ${false}    | ${''}        | ${undefined}
   `(
     'when showStatusText is %{showStatusText} and showTooltip is %{showTooltip}',
-    ({ showStatusText, showTooltip, expectedText, expectedTooltip, expectedAriaLabel }) => {
+    ({ showStatusText, showTooltip, expectedText, expectedTooltip }) => {
       beforeEach(() => {
         createComponent({
           props: {
@@ -47,15 +47,15 @@ describe('CI Icon component', () => {
         });
       });
 
-      it(`aria-label is ${expectedAriaLabel}`, () => {
-        expect(wrapper.attributes('aria-label')).toBe(expectedAriaLabel);
+      it(`aria-label is set`, () => {
+        expect(wrapper.attributes('aria-label')).toBe('Status: Success');
       });
 
-      it(`text shown is ${expectedAriaLabel}`, () => {
+      it(`text shown is ${expectedText}`, () => {
         expect(wrapper.text()).toBe(expectedText);
       });
 
-      it(`tooltip shown is ${expectedAriaLabel}`, () => {
+      it(`tooltip shown is ${expectedTooltip}`, () => {
         expect(wrapper.attributes('title')).toBe(expectedTooltip);
       });
     },