fix(frontend): accessibility improvements for FeatureSidebar (#133)

- hierarchical heading structure, for users that navigate by heading.
- fix unlabelled combobox inputs.
- add `tabindex` to scrolling tables.

Author: eatyourgreens

frontend/src/details/features/adaptation/AdaptationSection.tsx

@@ -76,7 +76,9 @@ export const AdaptationSection = ({ fd }) => {
     <>
       <Box py={2}>
         <Box position="relative">
-          <Typography variant="h6">Adaptation Options</Typography>
+          <Typography variant="h6" component="h2">
+            Adaptation Options
+          </Typography>
           <IconButton
             sx={{
               position: 'absolute',
@@ -101,7 +103,7 @@ export const AdaptationSection = ({ fd }) => {
               const filteredOptions = options.filter((o) => o.adaptation_name === name);
               return (
                 <>
-                  <Typography variant="subtitle2" component="h2" sx={{ mt: 2, mb: 1 }}>
+                  <Typography variant="subtitle2" component="h3" sx={{ mt: 2, mb: 1 }}>
                     {name}
                   </Typography>
                   <Typography variant="body2" component="p" sx={{ mb: 2 }}>

frontend/src/details/features/adaptation/AdaptationTable.tsx

@@ -7,7 +7,7 @@ const padding = { px: 0.25, py: 0.25 };
 export const AdaptationTable = ({ options }) => {
   const numDays = 15;
   return (
-    <TableContainer sx={{ maxHeight: 260 }}>
+    <TableContainer sx={{ maxHeight: 260 }} tabIndex={0}>
       <Table size="small" padding="none" stickyHeader>
         <TableHead>
           <TableRow>

frontend/src/details/features/damages/DamageTable.tsx

@@ -2,7 +2,7 @@ import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from
 import { numFormat, numRangeFormat } from 'lib/helpers';
 const padding = { px: 0.25, py: 0.25 };
 export const DamageTable = ({ damages }) => (
-  <TableContainer sx={{ maxHeight: 260 }}>
+  <TableContainer sx={{ maxHeight: 260 }} tabIndex={0}>
     <Table size="small" padding="none" stickyHeader>
       <TableHead>
         <TableRow>

frontend/src/details/features/damages/DamagesSection.tsx

@@ -193,7 +193,9 @@ export const DamagesSection = ({ fd }) => {
     <>
       <Box py={2}>
         <Box position="relative">
-          <Typography variant="h6">Risk</Typography>
+          <Typography variant="h6" component="h2">
+            Risk
+          </Typography>
           <IconButton
             sx={{
               position: 'absolute',
@@ -210,9 +212,9 @@ export const DamagesSection = ({ fd }) => {
         </Box>
         {hazards.length ? (
           <FormControl fullWidth sx={{ my: 2 }} disabled={hazards.length === 1}>
-            <InputLabel>Hazard</InputLabel>
+            <InputLabel id={`feature-${fd.id}-hazard`}>Hazard</InputLabel>
             <Select
-              label="Hazard"
+              labelId={`feature-${fd.id}-hazard`}
               value={selectedHazard ?? ''}
               onChange={(e) => setSelectedHazard(e.target.value as string)}
             >
@@ -227,7 +229,9 @@ export const DamagesSection = ({ fd }) => {
         {selectedData ? (
           <>
             <Box mt={1}>
-              <Typography variant="subtitle2">Expected Annual Damages</Typography>
+              <Typography component="h3" variant="subtitle2">
+                Expected Annual Damages
+              </Typography>
               <ExpectedDamageChart
                 data={{
                   table: selectedData,
@@ -245,7 +249,9 @@ export const DamagesSection = ({ fd }) => {
             </Box>
             {has_eael ? (
               <Box mt={1}>
-                <Typography variant="subtitle2">Expected Annual Economic Losses</Typography>
+                <Typography component="h3" variant="subtitle2">
+                  Expected Annual Economic Losses
+                </Typography>
                 <ExpectedDamageChart
                   data={{
                     table: selectedData,
@@ -274,7 +280,9 @@ export const DamagesSection = ({ fd }) => {
       </Box>
       <Box py={2}>
         <Box position="relative">
-          <Typography variant="h6">Return Period Damages</Typography>
+          <Typography variant="h6" component="h2">
+            Return Period Damages
+          </Typography>
           <IconButton
             sx={{
               position: 'absolute',
@@ -295,9 +303,9 @@ export const DamagesSection = ({ fd }) => {
         </Box>
         {epochs.length ? (
           <FormControl fullWidth sx={{ my: 2 }} disabled={epochs.length === 1}>
-            <InputLabel>Epoch</InputLabel>
+            <InputLabel id={`feature-${fd.id}-epoch`}>Epoch</InputLabel>
             <Select
-              label="Epoch"
+              labelId={`feature-${fd.id}-epoch`}
               value={selectedEpoch ?? ''}
               onChange={(e) => setSelectedEpoch(e.target.value as string)}
             >

frontend/src/details/features/damages/RPDamageTable.tsx

@@ -2,7 +2,7 @@ import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from
 import { numFormat, numRangeFormat } from 'lib/helpers';
 const padding = { px: 0.25, py: 0.25 };
 export const RPDamageTable = ({ damages }) => (
-  <TableContainer sx={{ maxHeight: 250 }}>
+  <TableContainer sx={{ maxHeight: 250 }} tabIndex={0}>
     <Table size="small" padding="none" stickyHeader>
       <TableHead>
         <TableRow>