From 9811bb28e44a5875a85ecba367f097527d08b7a4 Mon Sep 17 00:00:00 2001
From: Frank Niessink <frank@niessink.com>
Date: Sat, 25 Jan 2025 17:12:15 +0100
Subject: [PATCH] Fix some accessibility issues.

---
 .../frontend/src/header_footer/Footer.js      |  2 +-
 components/frontend/src/widgets/Header.js     |  6 ++--
 .../frontend/src/widgets/HeaderWithDetails.js |  2 ++
 .../frontend/src/widgets/TableHeaderCell.js   | 29 +++++--------------
 4 files changed, 15 insertions(+), 24 deletions(-)

diff --git a/components/frontend/src/header_footer/Footer.js b/components/frontend/src/header_footer/Footer.js
index 12e3300b51..d35a4e9861 100644
--- a/components/frontend/src/header_footer/Footer.js
+++ b/components/frontend/src/header_footer/Footer.js
@@ -147,7 +147,7 @@ function QuoteColumn() {
 
 export function Footer({ lastUpdate, report }) {
     return (
-        <AppBar position="relative" sx={{ displayPrint: "none" }}>
+        <AppBar component="footer" position="relative" sx={{ displayPrint: "none" }}>
             <Container maxWidth="md" sx={{ padding: "60px" }}>
                 <Grid container spacing={2} columns={{ xs: 1, sm: 3 }}>
                     <Grid size={1}>
diff --git a/components/frontend/src/widgets/Header.js b/components/frontend/src/widgets/Header.js
index 1a674e9b02..d618420482 100644
--- a/components/frontend/src/widgets/Header.js
+++ b/components/frontend/src/widgets/Header.js
@@ -4,8 +4,10 @@ import { element, oneOfType, string } from "prop-types"
 export function Header({ header, level, subheader }) {
     return (
         <Stack direction="column" sx={{ whiteSpace: "normal" }}>
-            <Typography variant={level}>{header}</Typography>
-            <Typography variant={`h${parseInt(level[1]) + 1}`}>{subheader}</Typography>
+            <Typography variant={level}>
+                {header}
+                {subheader && <Typography sx={{ fontSize: "80%", fontWeight: "inherit" }}>{subheader}</Typography>}
+            </Typography>
         </Stack>
     )
 }
diff --git a/components/frontend/src/widgets/HeaderWithDetails.js b/components/frontend/src/widgets/HeaderWithDetails.js
index c1111e28fb..e00ca806f4 100644
--- a/components/frontend/src/widgets/HeaderWithDetails.js
+++ b/components/frontend/src/widgets/HeaderWithDetails.js
@@ -15,6 +15,7 @@ export function HeaderWithDetails({ children, header, item_uuid, level, settings
             expanded={showDetails}
             onChange={() => settings.expandedItems.toggle(item_uuid)}
             slotProps={{ transition: { unmountOnExit: true } }} // Make testing for (dis)appearance of contents easier
+            slots={{ heading: "div" }}
             sx={{
                 "&:before": {
                     display: "none", // Remove top border
@@ -23,6 +24,7 @@ export function HeaderWithDetails({ children, header, item_uuid, level, settings
         >
             <AccordionSummary
                 aria-controls={showDetails ? `accordion-content-${item_uuid}` : null}
+                aria-label="Expand/collapse"
                 expandIcon={<CaretRight size={{ h1: "5em", h2: "4em", h3: "3em" }[level]} />}
                 id={`accordion-header-${item_uuid}`}
                 sx={{
diff --git a/components/frontend/src/widgets/TableHeaderCell.js b/components/frontend/src/widgets/TableHeaderCell.js
index 618824b0f7..5de854c052 100644
--- a/components/frontend/src/widgets/TableHeaderCell.js
+++ b/components/frontend/src/widgets/TableHeaderCell.js
@@ -1,4 +1,4 @@
-import { ButtonBase, TableCell, TableSortLabel, Tooltip } from "@mui/material"
+import { TableCell, TableSortLabel, Tooltip } from "@mui/material"
 import { func, string } from "prop-types"
 
 import {
@@ -39,28 +39,15 @@ export function SortableTableHeaderCell({
     help,
 }) {
     const sorted = sortColumn === column ? MuiSortDirection(sortDirection) : null
-    const align = textAlign || "left"
     return (
-        <TableCell colSpan={colSpan} sortDirection={sorted}>
-            <ButtonBase
-                focusRipple
-                sx={{
-                    display: "block",
-                    fontSize: "inherit",
-                    padding: "inherit",
-                    textAlign: align,
-                    width: "100%",
-                }}
-                tabIndex={-1}
+        <TableCell align={textAlign || "left"} colSpan={colSpan} sortDirection={sorted}>
+            <TableSortLabel
+                active={column === sortColumn}
+                direction={column === sortColumn ? MuiSortDirection(sortDirection) : "asc"}
+                onClick={() => handleSort(column)}
             >
-                <TableSortLabel
-                    active={column === sortColumn}
-                    direction={column === sortColumn ? MuiSortDirection(sortDirection) : "asc"}
-                    onClick={() => handleSort(column)}
-                >
-                    {children || <TableHeaderCellContents help={help} label={label} />}
-                </TableSortLabel>
-            </ButtonBase>
+                {children || <TableHeaderCellContents help={help} label={label} />}
+            </TableSortLabel>
         </TableCell>
     )
 }