Merge branch 'stats-accessibility' of Arnei/opencast-admin-interface into r/17.x

Pull request #1334
Fixes #1222
  Accessibility concerns in events stats

Author: gregorydlogan

src/components/shared/Stats.tsx

@@ -13,6 +13,7 @@ import { loadEventsIntoTable } from "../../thunks/tableThunks";
 import { useAppDispatch, useAppSelector } from "../../store";
 import { fetchEvents } from "../../slices/eventSlice";
 import { ParseKeys } from "i18next";
+import { Tooltip } from "./Tooltip";
 
 /**
  * This component renders the status bar of the event view and filters depending on these
@@ -66,20 +67,26 @@ const Stats = () => {
 				{/* Show one counter for each status */}
 				{stats.map((st, key) => (
 					<div className="col" key={key}>
-						<button className="stat" onClick={() => showStatsFilter(st)}>
-							<h1>{st.count}</h1>
-							{/* Show the description of the status, if defined,
-								else show name of filter and its value*/}
-							{!!st.description ? (
-								<span>{t(st.description as ParseKeys)}</span>
-							) : (
-								st.filters.map((filter, key) => (
-									<span key={key}>
-										{t(filter.filter as ParseKeys)}: {t(filter.value as ParseKeys)}
-									</span>
-								))
-							)}
-						</button>
+						<Tooltip title={t("DASHBOARD.BUTTON_TOOLTIP", { filterName: t(st.description as ParseKeys)})}>
+							<button
+								className="stat"
+								aria-label={t("DASHBOARD.BUTTON_TOOLTIP", { filterName: t(st.description as ParseKeys)})}
+								onClick={() => showStatsFilter(st)}
+							>
+								<div>{st.count}</div>
+								{/* Show the description of the status, if defined,
+									else show name of filter and its value*/}
+								{!!st.description ? (
+									<span>{t(st.description as ParseKeys)}</span>
+								) : (
+									st.filters.map((filter, key) => (
+										<span key={key}>
+											{t(filter.filter as ParseKeys)}: {t(filter.value as ParseKeys)}
+										</span>
+									))
+								)}
+							</button>
+						</Tooltip>
 					</div>
 				))}
 			</div>

src/i18n/org/opencastproject/adminui/languages/lang-en_US.json

@@ -1992,7 +1992,8 @@
 		"FAILED": "Failed",
 		"FINISHED_WITH_COMMENTS": "Todo",
 		"SCHEDULED": "Scheduled",
-		"RECORDING": "Recording"
+		"RECORDING": "Recording",
+		"BUTTON_TOOLTIP": "Apply filter {{filterName}} to the table"
 	},
 	"HOTKEYS": {
 		"CHEAT_SHEET": {

src/styles/components/_stats.scss

@@ -58,7 +58,7 @@
         outline: variables.$stats-color solid thin;
       }
 
-      h1 {
+      div {
         font-weight: 100;
         font-size: 24px;
         margin: 0 0 5px 0;