From 3bb5a69d86743cc42d679f5f5e8aefeb19397395 Mon Sep 17 00:00:00 2001
From: olav <mail@olav.io>
Date: Fri, 22 Apr 2022 12:35:47 +0200
Subject: [PATCH] fix: improve feature metrics accessibility (#901)

* refactor: fix header order

* refactor: improve metrics chart aria attributes

* refactor: add focus style for active metrics chips
---
 .../FeatureMetricsChart/FeatureMetricsChart.tsx        |  6 +++---
 .../FeatureMetricsChips/FeatureMetricsChips.styles.ts  |  7 +++++++
 .../FeatureMetricsChips/FeatureMetricsChips.tsx        |  2 +-
 .../FeatureMetricsStats/FeatureMetricsStats.tsx        | 10 +++++++++-
 .../FeatureMetricsTable/FeatureMetricsTable.tsx        |  2 +-
 5 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChart/FeatureMetricsChart.tsx b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChart/FeatureMetricsChart.tsx
index 3f9045518b..8c588624ca 100644
--- a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChart/FeatureMetricsChart.tsx
+++ b/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-describedby={FEATURE_METRICS_TABLE_ID}
+                aria-label="A feature metrics line chart, with three lines: all requests, positive requests, and negative requests."
+                aria-describedby={FEATURE_METRICS_STATS_ID}
             />
         </div>
     );
diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChips/FeatureMetricsChips.styles.ts b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChips/FeatureMetricsChips.styles.ts
index eb01171105..ac0b38a72f 100644
--- a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChips/FeatureMetricsChips.styles.ts
+++ b/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,
+        },
     },
 }));
diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChips/FeatureMetricsChips.tsx b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChips/FeatureMetricsChips.tsx
index b04bdf6697..6fb36bf102 100644
--- a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChips/FeatureMetricsChips.tsx
+++ b/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}>
diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsStats/FeatureMetricsStats.tsx b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsStats/FeatureMetricsStats.tsx
index b674d141ad..8aa8a16385 100644
--- a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsStats/FeatureMetricsStats.tsx
+++ b/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>
diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsTable/FeatureMetricsTable.tsx b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsTable/FeatureMetricsTable.tsx
index 559c99e420..ebcd36ac84 100644
--- a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsTable/FeatureMetricsTable.tsx
+++ b/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>