fix: improve feature metrics accessibility (#901)

* refactor: fix header order

* refactor: improve metrics chart aria attributes

* refactor: add focus style for active metrics chips

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

@@ -13,10 +13,10 @@ import {
     Tooltip,
 } from 'chart.js';
 import { useLocationSettings } from 'hooks/useLocationSettings';
-import { FEATURE_METRICS_TABLE_ID } from '../FeatureMetricsTable/FeatureMetricsTable';
 import 'chartjs-adapter-date-fns';
 import { createChartData } from './createChartData';
 import { createChartOptions } from './createChartOptions';
+import { FEATURE_METRICS_STATS_ID } from '../FeatureMetricsStats/FeatureMetricsStats';
 
 interface IFeatureMetricsChartProps {
     metrics: IFeatureMetricsRaw[];
@@ -48,8 +48,8 @@ export const FeatureMetricsChart = ({
             <Line
                 options={options}
                 data={data}
-                aria-label="A line chart with series for all requests, positive requests, and negative requests."
+                aria-label="A feature metrics line chart, with three lines: all requests, positive requests, and negative requests."
-                aria-describedby={FEATURE_METRICS_TABLE_ID}
+                aria-describedby={FEATURE_METRICS_STATS_ID}
             />
         </div>
     );

frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChips/FeatureMetricsChips.styles.ts

@@ -21,5 +21,12 @@ export const useStyles = makeStyles(theme => ({
             backgroundColor: theme.palette.primary.main,
             color: theme.palette.primary.contrastText,
         },
+        '& > :is(:focus-visible, :active)': {
+            outline: 0,
+            outlineStyle: 'solid',
+            outlineWidth: 2,
+            outlineOffset: 2,
+            outlineColor: theme.palette.primary.main,
+        },
     },
 }));

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

@@ -31,7 +31,7 @@ export const FeatureMetricsChips = ({
 
     return (
         <div>
-            <h3 className={styles.title}>{title}</h3>
+            <h2 className={styles.title}>{title}</h2>
             <ul className={styles.list}>
                 {sortedValues.map(val => (
                     <li key={val} className={styles.item}>

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

@@ -8,6 +8,8 @@ interface IFeatureMetricsStatsProps {
     hoursBack: number;
 }
 
+export const FEATURE_METRICS_STATS_ID = 'feature-metrics-stats-id';
+
 export const FeatureMetricsStats = ({
     totalYes,
     totalNo,
@@ -19,7 +21,13 @@ export const FeatureMetricsStats = ({
         hoursBack === 1 ? 'in the last hour' : `in the last ${hoursBack} hours`;
 
     return (
-        <Grid container spacing={2}>
+        <Grid
+            container
+            spacing={2}
+            id={FEATURE_METRICS_STATS_ID}
+            aria-label="Feature metrics summary"
+            component="section"
+        >
             <Grid item xs={12} sm={4}>
                 <article className={styles.item}>
                     <h3 className={styles.title}>Exposure</h3>

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

@@ -34,7 +34,7 @@ export const FeatureMetricsTable = ({ metrics }: IFeatureMetricsTableProps) => {
     }
 
     return (
-        <Table id={FEATURE_METRICS_TABLE_ID}>
+        <Table id={FEATURE_METRICS_TABLE_ID} aria-label="Feature metrics table">
             <TableHead>
                 <TableRow>
                     <TableCell>Time</TableCell>