From a50d244cf3a00c93be3c8094106282848bf87225 Mon Sep 17 00:00:00 2001
From: Sascha Eggenberger <seggenberger@gitlab.com>
Date: Sat, 17 Feb 2024 12:40:45 +0000
Subject: [PATCH] Pipeline Status: Add aria-label
Re-adds aria-label for Pipeline Status icon.
Changelog: fixed
---
.../vue_shared/components/ci_icon/ci_icon.vue | 7 ++-----
locale/gitlab.pot | 3 +++
.../components/ci_icon/ci_icon_spec.js | 20 +++++++++----------
3 files changed, 15 insertions(+), 15 deletions(-)
diff --git a/app/assets/javascripts/vue_shared/components/ci_icon/ci_icon.vue b/app/assets/javascripts/vue_shared/components/ci_icon/ci_icon.vue
index 1a22edc2beb0d..14da1d84890ff 100644
--- a/app/assets/javascripts/vue_shared/components/ci_icon/ci_icon.vue
+++ b/app/assets/javascripts/vue_shared/components/ci_icon/ci_icon.vue
@@ -1,5 +1,6 @@
<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)
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index a658c22500e57..d7f4cd5484d11 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -48052,6 +48052,9 @@ msgstr ""
msgid "Status:"
msgstr ""
+msgid "Status: %{status}"
+msgstr ""
+
msgid "Status: %{title}"
msgstr ""
diff --git a/spec/frontend/vue_shared/components/ci_icon/ci_icon_spec.js b/spec/frontend/vue_shared/components/ci_icon/ci_icon_spec.js
index 792470c8e8986..c5215958ccb2d 100644
--- a/spec/frontend/vue_shared/components/ci_icon/ci_icon_spec.js
+++ b/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);
});
},
--
GitLab