Fix some accessibility issues.

ICTU · Jan 25, 2025 · ed39c3d · ed39c3d
1 parent 7473b17
commit ed39c3d
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 24 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>
     )
 }