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

2 files changed, 20 insertions, 38 deletions

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