SONAR-22301 Fix accessibility issues on project overview page (#11729)

5 files changed, 41 insertions, 54 deletions

diff --git a/server/sonar-web/src/main/js/apps/overview/branches/AnalysisVariations.tsx b/server/sonar-web/src/main/js/apps/overview/branches/AnalysisVariations.tsx
index afcd4b455a9..9c05d456efe 100644
--- a/server/sonar-web/src/main/js/apps/overview/branches/AnalysisVariations.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/branches/AnalysisVariations.tsx
@@ -67,15 +67,7 @@ function Variation(props: Readonly<VariationProps>) {
     trendIconDirection = variation > 0 ? TrendDirection.Up : TrendDirection.Down;
     trendIconType = variation > 0 === isGoodIfGrowing ? TrendType.Positive : TrendType.Negative;
   }
-  const variationIcon = (
-    <TrendIcon
-      className="sw-text-lg"
-      direction={trendIconDirection}
-      height={20}
-      type={trendIconType}
-      width={20}
-    />
-  );
+  const variationIcon = <TrendIcon direction={trendIconDirection} type={trendIconType} />;
 
   const variationToDisplay = formattedValue.startsWith('-') ? formattedValue : `+${formattedValue}`;
 
diff --git a/server/sonar-web/src/main/js/apps/overview/branches/QualityGateCondition.tsx b/server/sonar-web/src/main/js/apps/overview/branches/QualityGateCondition.tsx
index 1f4bbdcaede..e5c87c3ab8e 100644
--- a/server/sonar-web/src/main/js/apps/overview/branches/QualityGateCondition.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/branches/QualityGateCondition.tsx
@@ -17,6 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import styled from '@emotion/styled';
 import { LinkBox, TextMuted } from 'design-system';
 import * as React from 'react';
 import { Path } from 'react-router-dom';
@@ -107,7 +108,11 @@ export class QualityGateCondition extends React.PureComponent<Props> {
     };
 
     if (METRICS_TO_URL_MAPPING[metricKey]) {
-      return <LinkBox to={METRICS_TO_URL_MAPPING[metricKey]()}>{children}</LinkBox>;
+      return (
+        <LinkBox className="link-box-wrapper" to={METRICS_TO_URL_MAPPING[metricKey]()}>
+          {children}
+        </LinkBox>
+      );
     }
 
     const url = isIssueMeasure(condition.measure.metric.key)
@@ -122,7 +127,11 @@ export class QualityGateCondition extends React.PureComponent<Props> {
           listView: true,
         });
 
-    return <LinkBox to={url}>{children}</LinkBox>;
+    return (
+      <LinkBox className="link-box-wrapper" to={url}>
+        {children}
+      </LinkBox>
+    );
   }
 
   getPrimaryText = () => {
@@ -173,7 +182,7 @@ export class QualityGateCondition extends React.PureComponent<Props> {
               {this.getPrimaryText()}
             </span>
           </div>
-          <TextMuted text={`${operator} ${formatMeasure(threshold, metric.type)}`} />
+          <StyledMutedText text={`${operator} ${formatMeasure(threshold, metric.type)}`} />
         </div>
       </div>,
     );
@@ -181,3 +190,9 @@ export class QualityGateCondition extends React.PureComponent<Props> {
 }
 
 export default withMetricsContext(QualityGateCondition);
+
+const StyledMutedText = styled(TextMuted)`
+  .link-box-wrapper:hover & {
+    color: unset;
+  }
+`;
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/ProjectActivityApp-it.tsx b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/ProjectActivityApp-it.tsx
index 4cf9ca58475..1e29192a079 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/ProjectActivityApp-it.tsx
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/__tests__/ProjectActivityApp-it.tsx
@@ -111,7 +111,7 @@ describe('rendering', () => {
     renderProjectActivityAppContainer();
 
     await ui.appLoaded();
-    expect(ui.graphTypeIssues.get()).toBeInTheDocument();
+    expect(ui.graphTypeSelect.get()).toHaveValue('project_activity.graphs.issues');
   });
 
   it('should render new code legend for applications', async () => {
@@ -402,7 +402,7 @@ describe('data loading', () => {
     renderProjectActivityAppContainer();
     await ui.appLoaded();
 
-    expect(ui.graphTypeCustom.get()).toBeInTheDocument();
+    expect(ui.graphTypeSelect.get()).toHaveValue('project_activity.graphs.custom');
   });
 
   it('should correctly fetch the top level component when dealing with sub portfolios', async () => {
@@ -756,8 +756,6 @@ function getPageObject() {
   const ui = {
     // Graph types.
     graphTypeSelect: byLabelText('project_activity.graphs.choose_type'),
-    graphTypeIssues: byText('project_activity.graphs.issues'),
-    graphTypeCustom: byText('project_activity.graphs.custom'),
 
     // Graphs.
     graphs: byLabelText('project_activity.graphs.explanation_x', { exact: false }),
diff --git a/server/sonar-web/src/main/js/components/activity-graph/AddGraphMetric.tsx b/server/sonar-web/src/main/js/components/activity-graph/AddGraphMetric.tsx
index b79add8c0f4..1ef69f5ddf1 100644
--- a/server/sonar-web/src/main/js/components/activity-graph/AddGraphMetric.tsx
+++ b/server/sonar-web/src/main/js/components/activity-graph/AddGraphMetric.tsx
@@ -19,7 +19,7 @@
  */
 
 import { Button, IconChevronDown } from '@sonarsource/echoes-react';
-import { Dropdown, TextMuted } from 'design-system';
+import { Dropdown } from 'design-system';
 import { sortBy } from 'lodash';
 import * as React from 'react';
 import { MetricKey, MetricType } from '~sonar-aligned/types/metrics';
@@ -165,10 +165,9 @@ export default class AddGraphMetric extends React.PureComponent<Props, State> {
         }
       >
         <Button suffix={<IconChevronDown />}>
-          <TextMuted
-            className="sw-body-sm sw-flex"
-            text={translate('project_activity.graphs.custom.add')}
-          />
+          <span className="sw-body-sm sw-flex">
+            {translate('project_activity.graphs.custom.add')}
+          </span>
         </Button>
       </Dropdown>
     );
diff --git a/server/sonar-web/src/main/js/components/activity-graph/GraphsHeader.tsx b/server/sonar-web/src/main/js/components/activity-graph/GraphsHeader.tsx
index 8390f89174f..b50b4413050 100644
--- a/server/sonar-web/src/main/js/components/activity-graph/GraphsHeader.tsx
+++ b/server/sonar-web/src/main/js/components/activity-graph/GraphsHeader.tsx
@@ -18,14 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 
-import {
-  Button,
-  ButtonGroup,
-  DropdownMenu,
-  DropdownMenuAlign,
-  IconChevronDown,
-} from '@sonarsource/echoes-react';
-import { TextMuted } from 'design-system';
+import { ButtonGroup, InputSize, Select } from '@sonarsource/echoes-react';
 import * as React from 'react';
 import { translate } from '../../helpers/l10n';
 import { GraphType } from '../../types/project-activity';
@@ -66,34 +59,24 @@ export default function GraphsHeader(props: Props) {
   const noCustomGraph =
     props.onAddCustomMetric === undefined || props.onRemoveCustomMetric === undefined;
 
-  const options = React.useMemo(() => {
-    const types = getGraphTypes(noCustomGraph);
-
-    return types.map((type) => {
-      const label = translate('project_activity.graphs', type);
-
-      return (
-        <DropdownMenu.ItemButton key={label} onClick={() => handleGraphChange(type)}>
-          {label}
-        </DropdownMenu.ItemButton>
-      );
-    });
-  }, [noCustomGraph, handleGraphChange]);
-
   return (
     <div className={className}>
       <ButtonGroup>
-        <DropdownMenu.Root align={DropdownMenuAlign.Start} id="activity-graph-type" items={options}>
-          <Button
-            aria-label={translate('project_activity.graphs.choose_type')}
-            suffix={<IconChevronDown />}
-          >
-            <TextMuted
-              className="sw-body-sm sw-flex"
-              text={translate('project_activity.graphs', graph)}
-            />
-          </Button>
-        </DropdownMenu.Root>
+        <label htmlFor="graph-type" className="sw-body-sm-highlight">
+          {translate('project_activity.graphs.choose_type')}
+        </label>
+        <Select
+          id="graph-type"
+          hasDropdownAutoWidth
+          onChange={handleGraphChange}
+          isNotClearable
+          value={graph}
+          size={InputSize.Small}
+          data={getGraphTypes(noCustomGraph).map((type) => ({
+            value: type,
+            label: translate('project_activity.graphs', type),
+          }))}
+        />
 
         {isCustomGraph(graph) &&
           props.onAddCustomMetric !== undefined &&