Merge pull request #564 from luniki/a11y/landmarks

Move all HTML content into ARIA landmarks.
opencast · Jun 6, 2024 · feffc95 · feffc95
2 parents 1d1154e + 145fa8e
commit feffc95
Show file tree

Hide file tree

Showing 16 changed files with 108 additions and 95 deletions.
diff --git a/src/components/About.tsx b/src/components/About.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react";
 import Header from "./Header";
+import NavBar from "./NavBar";
 import Footer from "./Footer";
 import MainNav from "./shared/MainNav";
 import { useTranslation } from "react-i18next";
@@ -45,13 +46,13 @@ const About: React.FC = () => {
 	return (
 		<span>
 			<Header />
-			<section className="action-nav-bar">
+			<NavBar>
 				<MainNav isOpen={displayNavigation} toggleMenu={toggleNavigation} />
 				<nav>
 					<Link to="/about/imprint" className={cn({ active: location.pathname === "/about/imprint" })} onClick={() => { }}>{t("ABOUT.IMPRINT")}</Link>
 					<Link to="/about/privacy" className={cn({ active: location.pathname === "/about/privacy" })} onClick={() => { }}>{t("ABOUT.PRIVACY")}</Link>
 				</nav>
-			</section>
+			</NavBar>
 			<div className="about">
 				<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(aboutContent) }} ></div>
 			</div>

diff --git a/src/components/MainView.tsx b/src/components/MainView.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+import { styleNavClosed, styleNavOpen } from "../utils/componentsUtils";
+
+/**
+ * Component that renders the main view
+ */
+const MainView: React.FC<{ open: Boolean, children: React.ReactNode }> = ({ open, children }) => {
+	return (
+		<main
+			className="main-view"
+			style={open ? styleNavOpen : styleNavClosed}
+			role="main"
+		>
+			{children}
+		</main>
+	);
+};
+
+export default MainView;
diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+
+/**
+ * Component that renders the nav bar
+ */
+const NavBar: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+	return (
+		<section className="action-nav-bar" role="navigation">
+			{children}
+		</section>
+	);
+};
+
+export default NavBar;
diff --git a/src/components/configuration/Themes.tsx b/src/components/configuration/Themes.tsx
@@ -12,8 +12,9 @@ import { getTotalThemes } from "../../selectors/themeSelectors";
 import { loadThemesIntoTable } from "../../thunks/tableThunks";
 import Notifications from "../shared/Notifications";
 import NewResourceModal from "../shared/NewResourceModal";
-import { styleNavClosed, styleNavOpen } from "../../utils/componentsUtils";
 import Header from "../Header";
+import NavBar from "../NavBar";
+import MainView from "../MainView";
 import Footer from "../Footer";
 import { getUserInformation } from "../../selectors/userInfoSelectors";
 import { hasAccess } from "../../utils/utils";
@@ -85,7 +86,7 @@ const Themes = ({
 	return (
 		<>
 			<Header />
-			<section className="action-nav-bar">
+			<NavBar>
 				{/* Add theme button */}
 				<div className="btn-group">
 					{hasAccess("ROLE_UI_THEMES_CREATE", user) && (
@@ -117,12 +118,9 @@ const Themes = ({
 						</Link>
 					)}
 				</nav>
-			</section>
+			</NavBar>
 
-			<div
-				className="main-view"
-				style={displayNavigation ? styleNavOpen : styleNavClosed}
-			>
+			<MainView open={displayNavigation}>
 				{/* Include notifications component */}
 				<Notifications />
 
@@ -138,7 +136,7 @@ const Themes = ({
 				</div>
 				{/* Include table component */}
 				<Table templateMap={themesTemplateMap} />
-			</div>
+			</MainView>
 			<Footer />
 		</>
 	);

diff --git a/src/components/events/Events.tsx b/src/components/events/Events.tsx
@@ -25,8 +25,9 @@ import {
 	isShowActions,
 } from "../../selectors/eventSelectors";
 import { setOffset } from "../../actions/tableActions";
-import { styleNavClosed, styleNavOpen } from "../../utils/componentsUtils";
 import Header from "../Header";
+import NavBar from "../NavBar";
+import MainView from "../MainView";
 import Footer from "../Footer";
 import { getUserInformation } from "../../selectors/userInfoSelectors";
 import { hasAccess } from "../../utils/utils";
@@ -193,7 +194,7 @@ const Events = ({
 	return (
 		<>
 			<Header />
-			<section className="action-nav-bar">
+			<NavBar>
 				<div className="btn-group">
 					{hasAccess("ROLE_UI_EVENTS_CREATE", user) && (
 						<button className="add" onClick={() => showNewEventModal()}>
@@ -230,7 +231,7 @@ const Events = ({
 				{/* Include Burger-button menu */}
 				<MainNav isOpen={displayNavigation} toggleMenu={toggleNavigation} />
 
-				<nav>
+				<nav aria-label={t("EVENTS.EVENTS.NAVIGATION.LABEL")}>
 					{hasAccess("ROLE_UI_EVENTS_VIEW", user) && (
 						<Link
 							to="/events/events"
@@ -257,12 +258,9 @@ const Events = ({
 						<Stats />
 					</div>
 				)}
-			</section>
+			</NavBar>
 
-			<div
-				className="main-view"
-				style={displayNavigation ? styleNavOpen : styleNavClosed}
-			>
+			<MainView open={displayNavigation}>
 				{/* Include notifications component */}
 				<Notifications />
 
@@ -323,7 +321,7 @@ const Events = ({
 				{/*Include table component*/}
 				{/* <Table templateMap={eventsTemplateMap} resourceType="events" /> */}
         <Table templateMap={eventsTemplateMap} />
-			</div>
+			</MainView>
 			<Footer />
 		</>
 	);

diff --git a/src/components/events/Series.tsx b/src/components/events/Series.tsx
@@ -17,8 +17,9 @@ import {
 import { fetchFilters, fetchStats, editTextFilter } from "../../slices/tableFilterSlice";
 import { getTotalSeries, isShowActions } from "../../selectors/seriesSeletctor";
 import { setOffset } from "../../actions/tableActions";
-import { styleNavClosed, styleNavOpen } from "../../utils/componentsUtils";
 import Header from "../Header";
+import NavBar from "../NavBar";
+import MainView from "../MainView";
 import Footer from "../Footer";
 import { getUserInformation } from "../../selectors/userInfoSelectors";
 import { hasAccess } from "../../utils/utils";
@@ -161,7 +162,7 @@ const Series = ({
 	return (
 		<>
 			<Header />
-			<section className="action-nav-bar">
+			<NavBar>
 				<div className="btn-group">
 					{hasAccess("ROLE_UI_SERIES_CREATE", user) && (
 						<button className="add" onClick={() => showNewSeriesModal()}>
@@ -185,7 +186,7 @@ const Series = ({
 				{/* Include Burger-button menu */}
 				<MainNav isOpen={displayNavigation} toggleMenu={toggleNavigation} />
 
-				<nav>
+				<nav aria-label={t("EVENTS.EVENTS.NAVIGATION.LABEL")}>
 					{hasAccess("ROLE_UI_EVENTS_VIEW", user) && (
 						<Link
 							to="/events/events"
@@ -205,12 +206,9 @@ const Series = ({
 						</Link>
 					)}
 				</nav>
-			</section>
+			</NavBar>
 
-			<div
-				className="main-view"
-				style={displayNavigation ? styleNavOpen : styleNavClosed}
-			>
+			<MainView open={displayNavigation}>
 				{/* Include notifications component */}
 				<Notifications />
 
@@ -247,7 +245,7 @@ const Series = ({
 					<h4>{t("TABLE_SUMMARY", { numberOfRows: series })}</h4>
 				</div>
 				<Table templateMap={seriesTemplateMap} />
-			</div>
+			</MainView>
 			<Footer />
 		</>
 	);

diff --git a/src/components/recordings/Recordings.tsx b/src/components/recordings/Recordings.tsx
@@ -11,8 +11,9 @@ import { recordingsTemplateMap } from "../../configs/tableConfigs/recordingsTabl
 import { getTotalRecordings } from "../../selectors/recordingSelectors";
 import { loadRecordingsIntoTable } from "../../thunks/tableThunks";
 import { fetchFilters, editTextFilter } from "../../slices/tableFilterSlice";
-import { styleNavClosed, styleNavOpen } from "../../utils/componentsUtils";
 import Header from "../Header";
+import NavBar from "../NavBar";
+import MainView from "../MainView";
 import Footer from "../Footer";
 import { getUserInformation } from "../../selectors/userInfoSelectors";
 import { hasAccess } from "../../utils/utils";
@@ -68,7 +69,7 @@ const Recordings = ({
 	return (
 		<>
 			<Header />
-			<section className="action-nav-bar">
+			<NavBar>
 				{/* Include Burger-button menu*/}
 				<MainNav isOpen={displayNavigation} toggleMenu={toggleNavigation} />
 
@@ -83,12 +84,9 @@ const Recordings = ({
 						</Link>
 					)}
 				</nav>
-			</section>
+			</NavBar>
 
-			<div
-				className="main-view"
-				style={displayNavigation ? styleNavOpen : styleNavClosed}
-			>
+			<MainView open={displayNavigation}>
 				{/* Include notifications component */}
 				<Notifications />
 
@@ -105,7 +103,7 @@ const Recordings = ({
 				</div>
 				{/* Include table component */}
 				<Table templateMap={recordingsTemplateMap} />
-			</div>
+			</MainView>
 			<Footer />
 		</>
 	);

diff --git a/src/components/statistics/Statistics.tsx b/src/components/statistics/Statistics.tsx
@@ -4,6 +4,8 @@ import { Link } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import cn from "classnames";
 import Header from "../Header";
+import NavBar from "../NavBar";
+import MainView from "../MainView";
 import Footer from "../Footer";
 import MainNav from "../shared/MainNav";
 import TimeSeriesStatistics from "../shared/TimeSeriesStatistics";
@@ -18,7 +20,6 @@ import {
 	getUserInformation,
 } from "../../selectors/userInfoSelectors";
 import { hasAccess } from "../../utils/utils";
-import { styleNavClosed, styleNavOpen } from "../../utils/componentsUtils";
 import { fetchUserInfo } from "../../slices/userInfoSlice";
 import { useAppDispatch, useAppSelector } from "../../store";
 import {
@@ -74,7 +75,7 @@ const Statistics: React.FC = () => {
 	return (
                 <span>
 			<Header />
-			<section className="action-nav-bar">
+			<NavBar>
 				{/* Include Burger-button menu */}
 				<MainNav isOpen={displayNavigation} toggleMenu={toggleNavigation} />
 
@@ -89,13 +90,10 @@ const Statistics: React.FC = () => {
 						</Link>
 					)}
 				</nav>
-			</section>
+			</NavBar>
 
 			{/* main view of this page, displays statistics */}
-			<div
-				className="main-view"
-				style={displayNavigation ? styleNavOpen : styleNavClosed}
-			>
+			<MainView open={displayNavigation}>
 				<div className="obj statistics">
 					{/* heading */}
 					<div className="controls-container">
@@ -152,7 +150,7 @@ const Statistics: React.FC = () => {
 							))
 						))}
 				</div>
-			</div>
+			</MainView>
 			<Footer />
 		</span>
     );

diff --git a/src/components/systems/Jobs.tsx b/src/components/systems/Jobs.tsx
@@ -16,8 +16,9 @@ import {
 	loadServicesIntoTable,
 } from "../../thunks/tableThunks";
 import { setOffset } from "../../actions/tableActions";
-import { styleNavClosed, styleNavOpen } from "../../utils/componentsUtils";
 import Header from "../Header";
+import NavBar from "../NavBar";
+import MainView from "../MainView";
 import Footer from "../Footer";
 import { getUserInformation } from "../../selectors/userInfoSelectors";
 import { hasAccess } from "../../utils/utils";
@@ -108,7 +109,7 @@ const Jobs = ({
 	return (
 		<>
 			<Header />
-			<section className="action-nav-bar">
+			<NavBar>
 				{/* Include Burger-button menu*/}
 				<MainNav isOpen={displayNavigation} toggleMenu={toggleNavigation} />
 
@@ -141,12 +142,9 @@ const Jobs = ({
 						</Link>
 					)}
 				</nav>
-			</section>
+			</NavBar>
 
-			<div
-				className="main-view"
-				style={displayNavigation ? styleNavOpen : styleNavClosed}
-			>
+			<MainView open={displayNavigation}>
 				{/* Include notifications component */}
 				<Notifications />
 
@@ -162,7 +160,7 @@ const Jobs = ({
 				</div>
 				{/* Include table component */}
 				<Table templateMap={jobsTemplateMap} />
-			</div>
+			</MainView>
 			<Footer />
 		</>
 	);

diff --git a/src/components/systems/Servers.tsx b/src/components/systems/Servers.tsx
@@ -16,8 +16,9 @@ import {
 	loadServicesIntoTable,
 } from "../../thunks/tableThunks";
 import { setOffset } from "../../actions/tableActions";
-import { styleNavClosed, styleNavOpen } from "../../utils/componentsUtils";
 import Header from "../Header";
+import NavBar from "../NavBar";
+import MainView from "../MainView";
 import Footer from "../Footer";
 import { getUserInformation } from "../../selectors/userInfoSelectors";
 import { hasAccess } from "../../utils/utils";
@@ -108,7 +109,7 @@ const Servers = ({
 	return (
 		<>
 			<Header />
-			<section className="action-nav-bar">
+			<NavBar>
 				{/* Include Burger-button menu*/}
 				<MainNav isOpen={displayNavigation} toggleMenu={toggleNavigation} />
 
@@ -141,12 +142,9 @@ const Servers = ({
 						</Link>
 					)}
 				</nav>
-			</section>
+			</NavBar>
 
-			<div
-				className="main-view"
-				style={displayNavigation ? styleNavOpen : styleNavClosed}
-			>
+			<MainView open={displayNavigation}>
 				{/* Include notifications component */}
 				<Notifications />
 
@@ -162,7 +160,7 @@ const Servers = ({
 				</div>
 				{/* Include table component */}
 				<Table templateMap={serversTemplateMap} />
-			</div>
+			</MainView>
 			<Footer />
 		</>
 	);