Fix accessibility issues.

Closes #7251.
ICTU · Jan 22, 2025 · 3cbe16a · 3cbe16a
1 parent e0dfd46
commit 3cbe16a
Show file tree

Hide file tree

Showing 14 changed files with 41 additions and 40 deletions.
diff --git a/components/frontend/src/dashboard/MetricSummaryCard.js b/components/frontend/src/dashboard/MetricSummaryCard.js
@@ -81,8 +81,8 @@ export function MetricSummaryCard({ header, onClick, selected, summary, maxY })
     }
     return (
         <DashboardCard onClick={onClick} selected={selected} title={header}>
-            <div ref={ref} aria-label={ariaChartLabel(summary)}>
-                <VictoryContainer>
+            <div ref={ref}>
+                <VictoryContainer aria-label={ariaChartLabel(summary)}>
                     {dates.length > 1 ? (
                         <StatusBarChart summary={summary} nrdates={dates.length} {...chartProps} />
                     ) : (

diff --git a/components/frontend/src/header_footer/UIModeMenu.js b/components/frontend/src/header_footer/UIModeMenu.js
@@ -17,7 +17,7 @@ export function UIModeMenu({ setUIMode, uiMode }) {
             <span /* https://mui.com/material-ui/react-tooltip/#disabled-elements */>
                 <IconButton
                     aria-label="Dark/light mode"
-                    aria-controls="dark-light-menu"
+                    aria-controls={anchorEl ? "dark-light-menu" : null}
                     aria-haspopup="true"
                     color="inherit"
                     onClick={handleMenu}

diff --git a/components/frontend/src/header_footer/buttons/DatePickerButton.js b/components/frontend/src/header_footer/buttons/DatePickerButton.js
@@ -15,7 +15,7 @@ export function DatePickerButton({ onChange, reportDate }) {
             <span /* https://mui.com/material-ui/react-tooltip/#disabled-elements */>
                 <Button
                     aria-label="Report date"
-                    aria-controls="date-picker-button-menu"
+                    aria-controls={anchorEl ? "date-picker-button-menu" : null}
                     color="inherit"
                     onClick={handleMenu}
                     startIcon={<EventIcon />}

diff --git a/components/frontend/src/header_footer/buttons/UserButton.js b/components/frontend/src/header_footer/buttons/UserButton.js
@@ -17,7 +17,7 @@ export function UserButton({ user, email, setUser }) {
         <span /* Not using a React fragment (<>) here because that makes the button top-aligned instead of centered */>
             <Button
                 aria-label="User options"
-                aria-controls="user-options-menu"
+                aria-controls={anchorEl ? "user-options-menu" : null}
                 color="inherit"
                 onClick={handleMenu}
                 startIcon={<Avatar email={email} />}

diff --git a/components/frontend/src/measurement/StatusIcon.js b/components/frontend/src/measurement/StatusIcon.js
@@ -6,12 +6,12 @@ import { STATUS_SHORT_NAME, statusPropType } from "../metric/status"
 import { TimeAgoWithDate } from "../widgets/TimeAgoWithDate"
 
 const STATUS_ICONS = {
-    target_met: (size) => <Check sx={{ fontSize: size }} />,
-    near_target_met: (size) => <Warning sx={{ fontSize: size }} />,
-    debt_target_met: (size) => <Money sx={{ fontSize: size }} />,
-    target_not_met: (size) => <Bolt sx={{ fontSize: size }} />,
-    informative: (_size) => <b>i</b>,
-    unknown: (size) => <QuestionMark sx={{ fontSize: size }} />,
+    target_met: (size) => <Check aria-label={STATUS_SHORT_NAME.target_met} sx={{ fontSize: size }} />,
+    near_target_met: (size) => <Warning aria-label={STATUS_SHORT_NAME.near_target_met} sx={{ fontSize: size }} />,
+    debt_target_met: (size) => <Money aria-label={STATUS_SHORT_NAME.debt_target_met} sx={{ fontSize: size }} />,
+    target_not_met: (size) => <Bolt aria-label={STATUS_SHORT_NAME.target_not_met} sx={{ fontSize: size }} />,
+    informative: (_size) => <b aria-label={STATUS_SHORT_NAME.informative}>i</b>,
+    unknown: (size) => <QuestionMark aria-label={STATUS_SHORT_NAME.unknown} sx={{ fontSize: size }} />,
 }
 
 export function StatusIcon({ status, statusStart, size }) {
@@ -21,7 +21,7 @@ export function StatusIcon({ status, statusStart, size }) {
     const statusName = STATUS_SHORT_NAME[status]
     // Use Avatar to create a round inverted icon:
     const icon = (
-        <Avatar aria-label={statusName} sx={{ width: sizes[size], height: sizes[size], bgcolor: `${status}.main` }}>
+        <Avatar sx={{ width: sizes[size], height: sizes[size], bgcolor: `${status}.main` }}>
             {STATUS_ICONS[status](fontSizes[size])}
         </Avatar>
     )

diff --git a/components/frontend/src/measurement/TrendSparkline.js b/components/frontend/src/measurement/TrendSparkline.js
@@ -29,27 +29,26 @@ export function TrendSparkline({ measurements, scale, report_date }) {
     // The width property below is not used according to https://formidable.com/open-source/victory/docs/common-props#width,
     // but setting it prevents these messages in the console: "Warning: `Infinity` is an invalid value for the `width` css style property.""
     return (
-        <div aria-label={ariaLabel}>
-            <VictoryGroup
-                theme={VictoryTheme.material}
-                scale={{ x: "time", y: "linear" }}
-                domain={{ x: [week_ago, now] }}
-                height={30}
-                padding={0}
-            >
-                <VictoryLine
-                    data={points}
-                    interpolation="stepBefore"
-                    style={{
-                        data: {
-                            stroke: stroke,
-                            strokeWidth: 5,
-                            width: "100%",
-                        },
-                    }}
-                />
-            </VictoryGroup>
-        </div>
+        <VictoryGroup
+            aria-label={ariaLabel}
+            theme={VictoryTheme.material}
+            scale={{ x: "time", y: "linear" }}
+            domain={{ x: [week_ago, now] }}
+            height={30}
+            padding={0}
+        >
+            <VictoryLine
+                data={points}
+                interpolation="stepBefore"
+                style={{
+                    data: {
+                        stroke: stroke,
+                        strokeWidth: 5,
+                        width: "100%",
+                    },
+                }}
+            />
+        </VictoryGroup>
     )
 }
 TrendSparkline.propTypes = {

diff --git a/components/frontend/src/metric/TrendGraph.js b/components/frontend/src/metric/TrendGraph.js
@@ -68,6 +68,7 @@ export function TrendGraph({ metric, measurements, loading }) {
     }
     return (
         <VictoryChart
+            aria-label={`Trend graph for the metric ${metricName}`}
             height={chartHeight}
             scale={{ x: "time", y: "linear" }}
             style={{ parent: { height: "100%", background: bgcolor }, fontFamily: fontFamily }}

diff --git a/components/frontend/src/source/SourceParameter.js b/components/frontend/src/source/SourceParameter.js
@@ -53,7 +53,7 @@ function EditScopeSelect({ editScope, setEditScope }) {
     return (
         <FormControl>
             <IconButton
-                aria-controls="edit-scope-menu"
+                aria-controls={open ? "edit-scope-menu" : null}
                 aria-expanded={open}
                 aria-haspopup="true"
                 aria-label="Edit scope"

diff --git a/components/frontend/src/theme.js b/components/frontend/src/theme.js
@@ -18,10 +18,10 @@ const theme1 = createTheme({
     },
     palette: {
         primary: {
-            main: "#1976D2", // Slightly darker blue than default
+            main: "#0F569C", // Slightly darker blue than default
         },
         secondary: {
-            main: "#963D3D", // Secondary color created with https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors
+            main: "#502c09", // Secondary color created with https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors
         },
     },
     typography: {

diff --git a/components/frontend/src/widgets/HeaderWithDetails.js b/components/frontend/src/widgets/HeaderWithDetails.js
@@ -22,7 +22,7 @@ export function HeaderWithDetails({ children, header, item_uuid, level, settings
             }}
         >
             <AccordionSummary
-                aria-controls={`accordion-content-${item_uuid}`}
+                aria-controls={showDetails ? `accordion-content-${item_uuid}` : null}
                 expandIcon={<CaretRight size={{ h1: "5em", h2: "4em", h3: "3em" }[level]} />}
                 id={`accordion-header-${item_uuid}`}
                 sx={{

diff --git a/components/frontend/src/widgets/Label.js b/components/frontend/src/widgets/Label.js
@@ -4,7 +4,7 @@ import { string } from "prop-types"
 import { childrenPropType } from "../sharedPropTypes"
 
 export function Label({ color, children }) {
-    const bgcolor = `${color}.main`
+    const bgcolor = `${color}.dark`
     const fgcolor = `${color}.contrastText`
     return (
         <Box

diff --git a/components/frontend/src/widgets/buttons/ActionAndItemPickerButton.js b/components/frontend/src/widgets/buttons/ActionAndItemPickerButton.js
@@ -26,7 +26,7 @@ export function ActionAndItemPickerButton({ action, itemType, onChange, get_opti
     return (
         <>
             <Tooltip title={`${action} an existing ${itemType} here`} placement="top">
-                <Button aria-controls="action-menu" onClick={handleMenu} variant="outlined">
+                <Button aria-controls={anchorEl ? "action-menu" : null} onClick={handleMenu} variant="outlined">
                     {icon}&nbsp;{`${action} ${itemType} `}
                     <ArrowDropDownIcon />
                 </Button>

diff --git a/components/frontend/src/widgets/buttons/DeleteButton.js b/components/frontend/src/widgets/buttons/DeleteButton.js
@@ -7,7 +7,7 @@ export function DeleteButton(props) {
     return (
         <ActionButton
             action="Delete"
-            color="warning"
+            color="error"
             icon={<DeleteItemIcon />}
             popup={`Delete this ${props.itemType}. Careful, this can only be undone by a system administrator!`}
             {...props}

diff --git a/docs/src/changelog.md b/docs/src/changelog.md
@@ -16,6 +16,7 @@ If your currently installed *Quality-time* version is not the latest version, pl
 
 ### Fixed
 
+- Fix accessibility issues in dark mode. Fixes [#7251](https://github.com/ICTU/quality-time/issues/7251).
 - When measuring security warnings with Trivy JSON as source, be prepared for optional fields not being present. Fixes [#10672](https://github.com/ICTU/quality-time/issues/10672).
 - Docker compose has been integrated into Docker as a subcommand for a while, but the developer documentation did not reflect that. Change `docker-compose` to `docker compose` in the documentation. Fixes [#10684](https://github.com/ICTU/quality-time/issues/10684).