Fix accessibility issues found by the application test.

Fixes #6354.
ICTU · Jan 28, 2025 · 2a37c56 · 2a37c56
1 parent c19ae27
commit 2a37c56
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 34 deletions.
diff --git a/components/frontend/public/index.html b/components/frontend/public/index.html
@@ -1,16 +1,12 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="theme-color" content="#000000">
-    <!--
-      manifest.json provides metadata used when your web app is added to the
-      homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-    <!--
+    <head>
+        <meta charset="utf-8" />
+        <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+        <meta name="theme-color" content="#000000" />
+        <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+        <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -19,22 +15,9 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Quality-time</title>
-  </head>
-  <body>
-    <noscript>
-      You need to enable JavaScript to run this app.
-    </noscript>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-  </body>
+        <title>Quality-time</title>
+    </head>
+    <body id="root">
+        <noscript> You need to enable JavaScript to run this app. </noscript>
+    </body>
 </html>
diff --git a/components/frontend/src/AppUI.js b/components/frontend/src/AppUI.js
@@ -6,7 +6,6 @@ import { LocalizationProvider } from "@mui/x-date-pickers"
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs"
 import { bool, func, number, object, string } from "prop-types"
 import HashLinkObserver from "react-hash-link"
-import { ToastContainer } from "react-toastify"
 
 import { useSettings } from "./app_ui_settings"
 import { DataModel } from "./context/DataModel"
@@ -87,7 +86,6 @@ export function AppUI({
                 setUIMode={setMode}
                 uiMode={mode}
             />
-            <ToastContainer theme="colored" />
             <Permissions.Provider value={user_permissions}>
                 <DataModel.Provider value={dataModel}>
                     <PageContent

diff --git a/components/frontend/src/PageContent.js b/components/frontend/src/PageContent.js
@@ -2,6 +2,7 @@ import { Box, Container } from "@mui/material"
 import CircularProgress from "@mui/material/CircularProgress"
 import { bool, func, number, string } from "prop-types"
 import { useEffect, useState } from "react"
+import { ToastContainer } from "react-toastify"
 
 import { get_measurements } from "./api/measurement"
 import { Report } from "./report/Report"
@@ -117,6 +118,7 @@ export function PageContent({
     }
     return (
         <Container
+            component="main"
             disableGutters
             maxWidth={false}
             sx={{
@@ -132,6 +134,7 @@ export function PageContent({
                 marginRight: "0px",
             }}
         >
+            <ToastContainer theme="colored" />
             {content}
         </Container>
     )

diff --git a/docs/src/changelog.md b/docs/src/changelog.md
@@ -14,6 +14,10 @@ If your currently installed *Quality-time* version is not the latest version, pl
 
 ## [Unreleased]
 
+### Fixed
+
+- Fix accessibility issues found by the application test. Fixes [#6354](https://github.com/ICTU/quality-time/issues/6354).
+
 ### Changed
 
 - Use the font configured in the browser instead of the browser's system font. Fixes [#9864](https://github.com/ICTU/quality-time/issues/9864).

diff --git a/tests/application_tests/src/test_report.py b/tests/application_tests/src/test_report.py
@@ -126,6 +126,5 @@ def test_report_axe_accessibility(self):
             self.fail("Could not write axe violations report")
 
         # If there are more violations than expected, output the human readable report
-        # Fixing the axe violations is on the backlog: https://github.com/ICTU/quality-time/issues/6354
-        current_number_of_axe_violations = 7
+        current_number_of_axe_violations = 0
         self.assertLessEqual(len(violation_results), current_number_of_axe_violations, human_readable_axe_report)