feat(pix-progress-gauge): add isDecorative attribute

Co-authored-by: Clément Latzarus <[email protected]>

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}}

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;

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}}
 />
 ```
 

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' } },
+    },
   },
 };
 

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');
+    });
+  });
 });