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)

frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsHours/FeatureMetricsHours.tsx

@@ -1,31 +1,22 @@
-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;
 
 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)}

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>