feat: use aria-label property instead of additional MuiBox

opossum-tool · Jan 20, 2025 · 8df5617 · 8df5617
1 parent 04eb8c6
commit 8df5617
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 53 deletions.
diff --git a/src/Frontend/Components/ProgressBar/ProgressBar.tsx b/src/Frontend/Components/ProgressBar/ProgressBar.tsx
@@ -3,7 +3,6 @@
 //
 // SPDX-License-Identifier: Apache-2.0
 import { SxProps } from '@mui/material';
-import MuiBox from '@mui/material/Box';
 import { BarDatum, ResponsiveBar } from '@nivo/bar';
 
 import { criticalityColor, OpossumColors } from '../../shared-styles';
@@ -14,14 +13,6 @@ import {
   useOnProgressBarClick,
 } from './ProgressBar.util';
 
-const classes = {
-  bar: {
-    '&:hover': {
-      cursor: 'pointer',
-    },
-  },
-};
-
 interface ProgressBarProps {
   sx?: SxProps;
   progressBarData: ProgressBarData;
@@ -73,48 +64,50 @@ export const ProgressBar: React.FC<ProgressBarProps> = (props) => {
       ];
 
   return (
-    <MuiBox sx={{ ...props.sx, ...classes.bar }} aria-label={'ProgressBar'}>
-      <ResponsiveBar
-        data={data}
-        keys={Object.keys(data[0])}
-        margin={{ top: 4, bottom: 4 }}
-        maxValue={
-          props.showCriticalSignals
-            ? props.progressBarData.filesWithOnlyExternalAttributionCount
-            : props.progressBarData.fileCount
-        }
-        layout="horizontal"
-        valueScale={{ type: 'linear' }}
-        labelSkipWidth={1}
-        axisBottom={null}
-        axisLeft={null}
-        animate={false}
-        colors={
-          props.showCriticalSignals
-            ? [
-                criticalityColor.high,
-                criticalityColor.medium,
-                OpossumColors.lightestBlue,
-              ]
-            : [
-                OpossumColors.pastelDarkGreen,
-                OpossumColors.pastelMiddleGreen,
-                OpossumColors.pastelRed,
-                OpossumColors.lightestBlue,
-              ]
-        }
-        labelTextColor="black"
-        tooltip={() =>
-          props.showCriticalSignals ? (
-            <CriticalityBarTooltip {...props.progressBarData} />
-          ) : (
-            <ProgressBarTooltip {...props.progressBarData} />
-          )
-        }
-        onClick={
-          props.showCriticalSignals ? onCriticalityBarClick : onProgressBarClick
-        }
-      />
-    </MuiBox>
+    <ResponsiveBar
+      onMouseEnter={(_datum, event) => {
+        event.currentTarget.style.cursor = 'pointer';
+      }}
+      data={data}
+      keys={Object.keys(data[0])}
+      margin={{ top: 4, bottom: 4 }}
+      maxValue={
+        props.showCriticalSignals
+          ? props.progressBarData.filesWithOnlyExternalAttributionCount
+          : props.progressBarData.fileCount
+      }
+      layout="horizontal"
+      valueScale={{ type: 'linear' }}
+      labelSkipWidth={1}
+      ariaLabel={'ProgressBar'}
+      axisBottom={null}
+      axisLeft={null}
+      animate={false}
+      colors={
+        props.showCriticalSignals
+          ? [
+              criticalityColor.high,
+              criticalityColor.medium,
+              OpossumColors.lightestBlue,
+            ]
+          : [
+              OpossumColors.pastelDarkGreen,
+              OpossumColors.pastelMiddleGreen,
+              OpossumColors.pastelRed,
+              OpossumColors.lightestBlue,
+            ]
+      }
+      labelTextColor="black"
+      tooltip={() =>
+        props.showCriticalSignals ? (
+          <CriticalityBarTooltip {...props.progressBarData} />
+        ) : (
+          <ProgressBarTooltip {...props.progressBarData} />
+        )
+      }
+      onClick={
+        props.showCriticalSignals ? onCriticalityBarClick : onProgressBarClick
+      }
+    />
   );
 };
diff --git a/src/e2e-tests/page-objects/TopBar.ts b/src/e2e-tests/page-objects/TopBar.ts
@@ -23,7 +23,7 @@ export class TopBar {
     this.reportViewButton = this.node.getByRole('button', { name: 'report' });
     this.progressBar = this.node.getByLabel('ProgressBar');
     this.openFileButton = this.node.getByRole('button', { name: 'open file' });
-    this.tooltip = this.progressBar.getByLabel('tooltip');
+    this.tooltip = this.node.getByLabel('tooltip');
     this.switchBar = this.node.getByLabel('switch-bar');
   }