From 5abc3b47324a19e51225743c92541177ef290ca6 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Wed, 2 Oct 2024 12:57:01 +0200
Subject: [PATCH] a11y: add labels to env/period selectors (#8329)

This PR adds labels to the environment and period selectors for the flag
metrics chart on the personal dashboard page. Because the period
selector is also used on the flag metrics page, I've also updated its
use there by removing a previous text label (which was just text, not an
associated `label` element).

Before:
Chart:

![image](https://github.com/user-attachments/assets/e150d786-3c00-4b49-851b-8073c4b97f4f)

Flag metrics:

![image](https://github.com/user-attachments/assets/de7f533d-d945-425b-ae6c-6eda02cea995)


After:
Chart:

![image](https://github.com/user-attachments/assets/a3336a8e-9745-4509-90e8-df999edec3fa)

Flag metrics:

![image](https://github.com/user-attachments/assets/ac2bf7bf-6454-4c63-a680-db4d1d4fb4b9)
---
 .../FeatureMetricsHours/FeatureMetricsHours.tsx | 17 ++++-------------
 .../personalDashboard/FlagMetricsChart.tsx      |  2 +-
 2 files changed, 5 insertions(+), 14 deletions(-)

diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsHours/FeatureMetricsHours.tsx b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsHours/FeatureMetricsHours.tsx
index d196503c5822..10a8da565fd8 100644
--- a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsHours/FeatureMetricsHours.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsHours/FeatureMetricsHours.tsx
@@ -1,23 +1,14 @@
-import { styled } from '@mui/material';
 import GeneralSelect, {
     type IGeneralSelectProps,
 } from 'component/common/GeneralSelect/GeneralSelect';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
-import { type ReactNode, useEffect } from 'react';
+import { useEffect } from 'react';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 
-const StyledTitle = styled('h2')(({ theme }) => ({
-    margin: 0,
-    marginBottom: theme.spacing(1),
-    fontSize: theme.fontSizes.smallBody,
-    fontWeight: theme.fontWeight.thin,
-    color: theme.palette.text.secondary,
-}));
-
 interface IFeatureMetricsHoursProps {
     hoursBack: number;
     setHoursBack: (value: number) => void;
-    label?: ReactNode;
+    label?: string;
 }
 
 export const FEATURE_METRIC_HOURS_BACK_DEFAULT = 48;
@@ -25,7 +16,7 @@ export const FEATURE_METRIC_HOURS_BACK_DEFAULT = 48;
 export const FeatureMetricsHours = ({
     hoursBack,
     setHoursBack,
-    label = <StyledTitle>Period</StyledTitle>,
+    label = 'Period',
 }: IFeatureMetricsHoursProps) => {
     const { trackEvent } = usePlausibleTracker();
 
@@ -57,9 +48,9 @@ export const FeatureMetricsHours = ({
 
     return (
         <div>
-            {label}
             <GeneralSelect
                 name='feature-metrics-period'
+                label={label}
                 id='feature-metrics-period'
                 options={options}
                 value={String(normalizedHoursBack)}
diff --git a/frontend/src/component/personalDashboard/FlagMetricsChart.tsx b/frontend/src/component/personalDashboard/FlagMetricsChart.tsx
index c8b605274db5..2b1a8b8bbf36 100644
--- a/frontend/src/component/personalDashboard/FlagMetricsChart.tsx
+++ b/frontend/src/component/personalDashboard/FlagMetricsChart.tsx
@@ -144,6 +144,7 @@ const EnvironmentSelect: FC<{
     return (
         <GeneralSelect
             name='feature-environments'
+            label='Environment'
             id='feature-environments'
             options={activeEnvironments.map((env) => ({
                 key: env.name,
@@ -187,7 +188,6 @@ export const FlagMetricsChart: FC<{
                 <FeatureMetricsHours
                     hoursBack={hoursBack}
                     setHoursBack={setHoursBack}
-                    label={null}
                 />
             </MetricsSelectors>