More explanations for embedd modal

Fixes #1272.
This mostly adds additional screen reader text to the embedding code
modal, but also some tooltips and
an explanatory text on the modal itself.

Author: Arnei

src/components/events/partials/modals/EmbeddingCodeModal.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from "react-i18next";
 import { getSourceURL } from "../../../../utils/embeddedCodeUtils";
 import ButtonLikeAnchor from "../../../shared/ButtonLikeAnchor";
 import BaseButton from "../../../shared/BaseButton";
+import { ParseKeys } from "i18next";
 
 /**
  * This component renders the embedding code modal
@@ -82,39 +83,56 @@ const EmbeddingCodeModal = ({
 	return (
 		<>
 			{/* embed size buttons */}
+			<div className="list-obj">
+				<div className="obj-container">
+					<span>
+						{t("EMBEDDING_CODE.DESCRIPTION")}
+					</span>
+				</div>
+			</div>
 			<div className="embedded-code-boxes">
 				<ButtonLikeAnchor
 					id="620x349"
 					className="embedSizeButton size_620x349"
-					onClick={(e) => updateTextArea(e)}
+					onClick={e => updateTextArea(e)}
+					tooltipText={t("EMBEDDING_CODE.GENERATE_TOOLTIP", { size: "620x349" }) as ParseKeys}
+					aria-label={t("EMBEDDING_CODE.GENERATE_TOOLTIP", { size: "620x349" }) as ParseKeys}
 				>
 					<span className="span-embedded-code">620x349</span>
 				</ButtonLikeAnchor>
 				<ButtonLikeAnchor
 					id="540x304"
 					className="embedSizeButton size_540x304"
-					onClick={(e) => updateTextArea(e)}
+					onClick={e => updateTextArea(e)}
+					tooltipText={t("EMBEDDING_CODE.GENERATE_TOOLTIP", { size: "540x304" }) as ParseKeys}
+					aria-label={t("EMBEDDING_CODE.GENERATE_TOOLTIP", { size: "540x304" }) as ParseKeys}
 				>
 					<span className="span-embedded-code">540x304</span>
 				</ButtonLikeAnchor>
 				<ButtonLikeAnchor
 					id="460x259"
 					className="embedSizeButton size_460x259"
-					onClick={(e) => updateTextArea(e)}
+					onClick={e => updateTextArea(e)}
+					tooltipText={t("EMBEDDING_CODE.GENERATE_TOOLTIP", { size: "460x259" }) as ParseKeys}
+					aria-label={t("EMBEDDING_CODE.GENERATE_TOOLTIP", { size: "460x259" }) as ParseKeys}
 				>
 					<span className="span-embedded-code">460x259</span>
 				</ButtonLikeAnchor>
 				<ButtonLikeAnchor
 					id="380x214"
 					className="embedSizeButton size_380x214"
-					onClick={(e) => updateTextArea(e)}
+					onClick={e => updateTextArea(e)}
+					tooltipText={t("EMBEDDING_CODE.GENERATE_TOOLTIP", { size: "380x214" }) as ParseKeys}
+					aria-label={t("EMBEDDING_CODE.GENERATE_TOOLTIP", { size: "380x214" }) as ParseKeys}
 				>
 					<span className="span-embedded-code">380x214</span>
 				</ButtonLikeAnchor>
 				<ButtonLikeAnchor
 					id="300x169"
 					className="embedSizeButton size_300x169"
-					onClick={(e) => updateTextArea(e)}
+					onClick={e => updateTextArea(e)}
+					tooltipText={t("EMBEDDING_CODE.GENERATE_TOOLTIP", { size: "300x169" }) as ParseKeys}
+					aria-label={t("EMBEDDING_CODE.GENERATE_TOOLTIP", { size: "300x169" }) as ParseKeys}
 				>
 					<span className="span-embedded-code">300x169</span>
 				</ButtonLikeAnchor>
@@ -132,6 +150,7 @@ const EmbeddingCodeModal = ({
 					rows={2}
 					value={textAreaContent}
 					cols={1}
+					aria-label={t("EMBEDDING_CODE.EMBEDD_CODE_TEXTAREA_ARIA")}
 				/>
 			</div>
 
@@ -151,6 +170,8 @@ const EmbeddingCodeModal = ({
 						className="cancel-btn"
 						style={{ fontSize: "14px" }}
 						onClick={() => copy()}
+						tooltipText="EMBEDDING_CODE.COPY_BUTTON_TOOLTIP"
+						aria-label={t("EMBEDDING_CODE.COPY_BUTTON_TOOLTIP")}
 					>
 						{t("COPY")}
 					</BaseButton>

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

@@ -153,6 +153,12 @@
 		"HOTKEY_CHEAT_SHEET": "Keyboard Shortcuts",
 		"ADOPTER_REGISTRATION": "Adopter Registration"
 	},
+	"EMBEDDING_CODE": {
+		"DESCRIPTION": "Generate an embed code of the desired size by clicking on the respective button",
+		"GENERATE_TOOLTIP": "Generate an embed code of size {{ size }}",
+		"EMBEDD_CODE_TEXTAREA_ARIA": "This text field holds a generated embed code for copying.",
+		"COPY_BUTTON_TOOLTIP": "Copies a generated embed code to your clipboard."
+	},
 	"NOTIFICATIONS": {
 		"ACL_ADDED": "The access policy has been created",
 		"ACL_NOT_SAVED": "The access policy could not be saved",