explorer: Add accessible name to Gas Used (Progressbar component)

explorer/CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Add accessible name to the gas used progress bar [#2037]
 - Add accessible name to the nav bar button on mobile [#2036]
 - Implement warning for stale market data [#1892]
 
@@ -30,8 +31,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 [#1892]: https://github.com/dusk-network/rusk/issues/1892
 [#2025]: https://github.com/dusk-network/rusk/issues/2025
 [#2034]: https://github.com/dusk-network/rusk/issues/2034
-[#2039]: https://github.com/dusk-network/rusk/issues/2039
 [#2036]: https://github.com/dusk-network/rusk/issues/2036
+[#2037]: https://github.com/dusk-network/rusk/issues/2037
+[#2039]: https://github.com/dusk-network/rusk/issues/2039
 
 <!-- VERSIONS -->
 

explorer/src/lib/components/__tests__/__snapshots__/BlockDetails.spec.js.snap

@@ -282,6 +282,7 @@ exports[`Block Details > renders the Block Details component 1`] = `
         580,718
 
         <div
+          aria-label="Gas Used"
           class="dusk-progress-bar block-details__gas-used"
           role="progressbar"
         >

explorer/src/lib/components/__tests__/__snapshots__/BlocksCard.spec.js.snap

@@ -795,6 +795,7 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo
           class="details-list__definition details-list__definition--table"
         >
           <div
+            aria-label="Gas Used"
             class="dusk-progress-bar blocks-list__gas-used"
             role="progressbar"
           >
@@ -982,6 +983,7 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo
           class="details-list__definition details-list__definition--table"
         >
           <div
+            aria-label="Gas Used"
             class="dusk-progress-bar blocks-list__gas-used"
             role="progressbar"
           >
@@ -1169,6 +1171,7 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo
           class="details-list__definition details-list__definition--table"
         >
           <div
+            aria-label="Gas Used"
             class="dusk-progress-bar blocks-list__gas-used"
             role="progressbar"
           >
@@ -1356,6 +1359,7 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo
           class="details-list__definition details-list__definition--table"
         >
           <div
+            aria-label="Gas Used"
             class="dusk-progress-bar blocks-list__gas-used"
             role="progressbar"
           >
@@ -1543,6 +1547,7 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo
           class="details-list__definition details-list__definition--table"
         >
           <div
+            aria-label="Gas Used"
             class="dusk-progress-bar blocks-list__gas-used"
             role="progressbar"
           >
@@ -1730,6 +1735,7 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo
           class="details-list__definition details-list__definition--table"
         >
           <div
+            aria-label="Gas Used"
             class="dusk-progress-bar blocks-list__gas-used"
             role="progressbar"
           >
@@ -1917,6 +1923,7 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo
           class="details-list__definition details-list__definition--table"
         >
           <div
+            aria-label="Gas Used"
             class="dusk-progress-bar blocks-list__gas-used"
             role="progressbar"
           >
@@ -2104,6 +2111,7 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo
           class="details-list__definition details-list__definition--table"
         >
           <div
+            aria-label="Gas Used"
             class="dusk-progress-bar blocks-list__gas-used"
             role="progressbar"
           >
@@ -2291,6 +2299,7 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo
           class="details-list__definition details-list__definition--table"
         >
           <div
+            aria-label="Gas Used"
             class="dusk-progress-bar blocks-list__gas-used"
             role="progressbar"
           >
@@ -2478,6 +2487,7 @@ exports[`Blocks Card > should disable the \`Show More\` button if there is no mo
           class="details-list__definition details-list__definition--table"
         >
           <div
+            aria-label="Gas Used"
             class="dusk-progress-bar blocks-list__gas-used"
             role="progressbar"
           >
@@ -2578,6 +2588,7 @@ exports[`Blocks Card > should disable the \`Show More\` button is the card is in
   </header>
 
   <div
+    aria-label="Loading"
     class="dusk-progress-bar data-card__progress-bar"
     role="progressbar"
   >

explorer/src/lib/components/__tests__/__snapshots__/BlocksList.spec.js.snap

@@ -122,6 +122,7 @@ exports[`Blocks List > renders the Blocks List component 1`] = `
     class="details-list__definition details-list__definition--table"
   >
     <div
+      aria-label="Gas Used"
       class="dusk-progress-bar blocks-list__gas-used"
       role="progressbar"
     >

explorer/src/lib/components/__tests__/__snapshots__/DataCard.spec.js.snap

@@ -171,6 +171,7 @@ exports[`DataCard > should render the \`DataCard\` in the loading state 1`] = `
   </header>
 
   <div
+    aria-label="Loading"
     class="dusk-progress-bar data-card__progress-bar"
     role="progressbar"
   >

explorer/src/lib/components/__tests__/__snapshots__/TransactionsCard.spec.js.snap

@@ -28,6 +28,7 @@ exports[`Transactions Card > should disable the \`Show More\` button if the card
   </header>
 
   <div
+    aria-label="Loading"
     class="dusk-progress-bar data-card__progress-bar"
     role="progressbar"
   >

explorer/src/lib/components/block-details/BlockDetails.svelte

@@ -153,6 +153,7 @@
             data.transactions.stats.gasLimit) *
             100}
           className="block-details__gas-used"
+          ariaLabel="Gas Used"
         />
       </svelte:fragment>
     </ListItem>

explorer/src/lib/components/blocks-list/BlocksList.svelte

@@ -60,6 +60,7 @@
           data.transactions.stats.gasLimit) *
           100}
         className="blocks-list__gas-used"
+        ariaLabel="Gas Used"
       />
     </svelte:fragment>
   </ListItem>

explorer/src/lib/components/data-card/DataCard.svelte

@@ -43,7 +43,7 @@
     {/if}
   </header>
   {#if loading && !data}
-    <ProgressBar className="data-card__progress-bar" />
+    <ProgressBar ariaLabel="Loading" className="data-card__progress-bar" />
   {:else if error || hasEmptyData}
     <DataAlert on:retry {error} />
   {:else if data}

explorer/src/lib/dusk/components/__tests__/ProgressBar.spec.js

@@ -14,15 +14,15 @@ describe("ProgressBar", () => {
 
   it("renders the Stepper component with current percentage set as zero", () => {
     const { container } = render(ProgressBar, {
-      props: { currentPercentage: 0 },
+      props: { ariaLabel: "Loading", currentPercentage: 0 },
     });
 
     expect(container.firstChild).toMatchSnapshot();
   });
 
   it("re-renders the Stepper component when the current percentage property changes", async () => {
     const { container, rerender } = render(ProgressBar, {
-      props: { currentPercentage: 0 },
+      props: { ariaLabel: "Loading", currentPercentage: 0 },
     });
 
     expect(container.firstChild).toMatchSnapshot();

explorer/src/lib/dusk/components/__tests__/__snapshots__/ProgressBar.spec.js.snap

@@ -2,6 +2,7 @@
 
 exports[`ProgressBar > re-renders the Stepper component when the current percentage property changes 1`] = `
 <div
+  aria-label="Loading"
   class="dusk-progress-bar"
   role="progressbar"
 >
@@ -14,6 +15,7 @@ exports[`ProgressBar > re-renders the Stepper component when the current percent
 
 exports[`ProgressBar > re-renders the Stepper component when the current percentage property changes 2`] = `
 <div
+  aria-label="Loading"
   class="dusk-progress-bar"
   role="progressbar"
 >
@@ -37,6 +39,7 @@ exports[`ProgressBar > renders the ProgressBar component with no current percent
 
 exports[`ProgressBar > renders the Stepper component with current percentage set as zero 1`] = `
 <div
+  aria-label="Loading"
   class="dusk-progress-bar"
   role="progressbar"
 >

explorer/src/lib/dusk/components/progress-bar/ProgressBar.svelte

@@ -10,10 +10,13 @@
   /** @type {string | Undefined} */
   export let className = undefined;
 
+  /** @type {string} */
+  export let ariaLabel;
+
   $: classes = makeClassName(["dusk-progress-bar", className]);
 </script>
 
-<div role="progressbar" class={classes}>
+<div role="progressbar" class={classes} aria-label={ariaLabel}>
   <div
     style={currentPercentage !== undefined
       ? `width: ${currentPercentage}%`

explorer/src/routes/blocks/__tests__/__snapshots__/page.spec.js.snap

@@ -31,6 +31,7 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
     </header>
 
     <div
+      aria-label="Loading"
       class="dusk-progress-bar data-card__progress-bar"
       role="progressbar"
     >
@@ -1137,6 +1138,7 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
             class="details-list__definition details-list__definition--table"
           >
             <div
+              aria-label="Gas Used"
               class="dusk-progress-bar blocks-list__gas-used"
               role="progressbar"
             >
@@ -1324,6 +1326,7 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
             class="details-list__definition details-list__definition--table"
           >
             <div
+              aria-label="Gas Used"
               class="dusk-progress-bar blocks-list__gas-used"
               role="progressbar"
             >
@@ -1511,6 +1514,7 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
             class="details-list__definition details-list__definition--table"
           >
             <div
+              aria-label="Gas Used"
               class="dusk-progress-bar blocks-list__gas-used"
               role="progressbar"
             >
@@ -1698,6 +1702,7 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
             class="details-list__definition details-list__definition--table"
           >
             <div
+              aria-label="Gas Used"
               class="dusk-progress-bar blocks-list__gas-used"
               role="progressbar"
             >
@@ -1885,6 +1890,7 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
             class="details-list__definition details-list__definition--table"
           >
             <div
+              aria-label="Gas Used"
               class="dusk-progress-bar blocks-list__gas-used"
               role="progressbar"
             >
@@ -2072,6 +2078,7 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
             class="details-list__definition details-list__definition--table"
           >
             <div
+              aria-label="Gas Used"
               class="dusk-progress-bar blocks-list__gas-used"
               role="progressbar"
             >
@@ -2259,6 +2266,7 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
             class="details-list__definition details-list__definition--table"
           >
             <div
+              aria-label="Gas Used"
               class="dusk-progress-bar blocks-list__gas-used"
               role="progressbar"
             >
@@ -2446,6 +2454,7 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
             class="details-list__definition details-list__definition--table"
           >
             <div
+              aria-label="Gas Used"
               class="dusk-progress-bar blocks-list__gas-used"
               role="progressbar"
             >
@@ -2633,6 +2642,7 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
             class="details-list__definition details-list__definition--table"
           >
             <div
+              aria-label="Gas Used"
               class="dusk-progress-bar blocks-list__gas-used"
               role="progressbar"
             >
@@ -2820,6 +2830,7 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
             class="details-list__definition details-list__definition--table"
           >
             <div
+              aria-label="Gas Used"
               class="dusk-progress-bar blocks-list__gas-used"
               role="progressbar"
             >
@@ -3007,6 +3018,7 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
             class="details-list__definition details-list__definition--table"
           >
             <div
+              aria-label="Gas Used"
               class="dusk-progress-bar blocks-list__gas-used"
               role="progressbar"
             >
@@ -3194,6 +3206,7 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
             class="details-list__definition details-list__definition--table"
           >
             <div
+              aria-label="Gas Used"
               class="dusk-progress-bar blocks-list__gas-used"
               role="progressbar"
             >
@@ -3381,6 +3394,7 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
             class="details-list__definition details-list__definition--table"
           >
             <div
+              aria-label="Gas Used"
               class="dusk-progress-bar blocks-list__gas-used"
               role="progressbar"
             >
@@ -3568,6 +3582,7 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
             class="details-list__definition details-list__definition--table"
           >
             <div
+              aria-label="Gas Used"
               class="dusk-progress-bar blocks-list__gas-used"
               role="progressbar"
             >
@@ -3755,6 +3770,7 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
             class="details-list__definition details-list__definition--table"
           >
             <div
+              aria-label="Gas Used"
               class="dusk-progress-bar blocks-list__gas-used"
               role="progressbar"
             >

explorer/src/routes/blocks/block/__tests__/__snapshots__/page.spec.js.snap

@@ -23,6 +23,7 @@ exports[`Block Details > should render the Block Details page and query the nece
       </header>
 
       <div
+        aria-label="Loading"
         class="dusk-progress-bar data-card__progress-bar"
         role="progressbar"
       >
@@ -55,6 +56,7 @@ exports[`Block Details > should render the Block Details page and query the nece
       </header>
 
       <div
+        aria-label="Loading"
         class="dusk-progress-bar data-card__progress-bar"
         role="progressbar"
       >
@@ -359,6 +361,7 @@ exports[`Block Details > should render the Block Details page and query the nece
             580,718
 
             <div
+              aria-label="Gas Used"
               class="dusk-progress-bar block-details__gas-used"
               role="progressbar"
             >

explorer/src/routes/transactions/__tests__/__snapshots__/page.spec.js.snap

@@ -31,6 +31,7 @@ exports[`Transactions page > should render the Transactions page, start polling
     </header>
 
     <div
+      aria-label="Loading"
       class="dusk-progress-bar data-card__progress-bar"
       role="progressbar"
     >

explorer/src/routes/transactions/transaction/__tests__/__snapshots__/page.spec.js.snap

@@ -20,6 +20,7 @@ exports[`Transaction Details > should render the Transaction details page and qu
     </header>
 
     <div
+      aria-label="Loading"
       class="dusk-progress-bar data-card__progress-bar"
       role="progressbar"
     >