From 8da529247b43bd926b849bc1798ccb8e5d244da8 Mon Sep 17 00:00:00 2001
From: dianeCdrPix <diane.cordier@pix.fr>
Date: Tue, 12 Nov 2024 16:24:17 +0100
Subject: [PATCH] feat(pix-progress-gauge): add isDecorative attribute
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Clément Latzarus <clement.latzarus@pix.fr>
---
 addon/components/pix-progress-gauge.hbs       |  6 +++++-
 addon/components/pix-progress-gauge.js        |  4 +++-
 app/stories/pix-progress-gauge.mdx            |  3 ++-
 app/stories/pix-progress-gauge.stories.js     |  7 +++++++
 .../components/pix-progress-gauge-test.js     | 20 +++++++++++++++++++
 5 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/addon/components/pix-progress-gauge.hbs b/addon/components/pix-progress-gauge.hbs
index bb97ad0ad..4406d2d89 100644
--- a/addon/components/pix-progress-gauge.hbs
+++ b/addon/components/pix-progress-gauge.hbs
@@ -1,4 +1,8 @@
-<div class="progress-gauge {{this.themeMode}} {{this.colorClass}}" ...attributes>
+<div
+  class="progress-gauge {{this.themeMode}} {{this.colorClass}}"
+  role={{if @isDecorative "presentation"}}
+  ...attributes
+>
   {{#unless @hidePercentage}}
     <div class="progress-gauge__text" role="presentation">{{this.percentageValue}}</div>
   {{/unless}}
diff --git a/addon/components/pix-progress-gauge.js b/addon/components/pix-progress-gauge.js
index ee5a206ac..8b6c56ef3 100644
--- a/addon/components/pix-progress-gauge.js
+++ b/addon/components/pix-progress-gauge.js
@@ -20,7 +20,9 @@ export default class PixProgressGauge extends Component {
   }
 
   get label() {
-    if (!this.args.label || !this.args.label.trim()) {
+    const thereIsNoLabel = !this.args.label || !this.args.label.trim();
+
+    if (thereIsNoLabel && !this.args.isDecorative) {
       throw new Error('ERROR in PixProgressGauge component, @label param is not provided.');
     }
     return this.args.label;
diff --git a/app/stories/pix-progress-gauge.mdx b/app/stories/pix-progress-gauge.mdx
index b8ca7f343..4ee8413d7 100644
--- a/app/stories/pix-progress-gauge.mdx
+++ b/app/stories/pix-progress-gauge.mdx
@@ -9,7 +9,7 @@ import * as ComponentStories from './pix-progress-gauge.stories';
 
 Permet d'afficher un barre de progression sur un barème de 100%. Des paramètres existent pour changer le mode (dark ou light) ou la couleur du composant.
 
-> **⚠️** **Il est nécessaire d'avoir un `label` pour rendre le composant accessible !**
+> **⚠️** **Il est nécessaire d'avoir un `label` pour rendre le composant accessible, sauf si le composant est utilisé uniquement pour de la décoration. Dans ce cas, mettre le paramètre `@isDecorative` à `true`.**
 
 <Story of={ComponentStories.Default} height={60} />
 
@@ -33,6 +33,7 @@ Démonstration d'une barre de progression blanche en dark mode avec un sous titr
   @themeMode="dark"
   @subTitle="Un sous titre"
   @hidePercentage=false
+  @isDecorative={{true}}
 />
 ```
 
diff --git a/app/stories/pix-progress-gauge.stories.js b/app/stories/pix-progress-gauge.stories.js
index 195d9879a..484eef40e 100644
--- a/app/stories/pix-progress-gauge.stories.js
+++ b/app/stories/pix-progress-gauge.stories.js
@@ -46,6 +46,13 @@ export default {
       type: { name: 'boolean', required: false },
       table: { defaultValue: { summary: 'false' } },
     },
+    isDecorative: {
+      name: 'isDecorative',
+      description:
+        'Indiquer que la barre de progression est utilisée pour de la présentation et doit être ignorée par les lecteurs d’écran',
+      type: { name: 'boolean', required: false },
+      table: { defaultValue: { summary: 'false' } },
+    },
   },
 };
 
diff --git a/tests/integration/components/pix-progress-gauge-test.js b/tests/integration/components/pix-progress-gauge-test.js
index 84801c5e6..1bea44358 100644
--- a/tests/integration/components/pix-progress-gauge-test.js
+++ b/tests/integration/components/pix-progress-gauge-test.js
@@ -69,6 +69,16 @@ module('Integration | Component | progress-gauge', function (hooks) {
         component.label;
       }, expectedError);
     });
+
+    test('it should not throw an error if there is no label and if @isDecorative is true', async function (assert) {
+      // given & when
+      const componentParams = { label: null, isDecorative: true };
+      const component = createGlimmerComponent('pix-progress-gauge', componentParams);
+
+      // then
+      component.label;
+      assert.ok(true);
+    });
   });
 
   module('Attributes @color', function () {
@@ -206,4 +216,14 @@ module('Integration | Component | progress-gauge', function (hooks) {
       assert.dom('.progress-gauge__text').doesNotExist();
     });
   });
+
+  module('Attributes @isDecorative', function () {
+    test('it sets gauge role to "presentation"', async function (assert) {
+      // when
+      await render(hbs`<PixProgressGauge @value='50' @isDecorative='true' />`);
+
+      // then
+      assert.dom('.progress-gauge').hasProperty('role', 'presentation');
+    });
+  });
 });