refining few details

blocks/focused-schema/build/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('wp-blob', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => 'e63645d5b16e12b63e0d');
+<?php return array('dependencies' => array('wp-blob', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => 'a7ab9ce50d3cfb82e362');

blocks/focused-schema/build/index.js

@@ -472,6 +472,7 @@ function save({
     return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", {
       "data-focus-bullet-title": focusBullet.title,
       className: "homegrade-blocks-focus-point-bullet",
+      "aria-hidden": "true",
       style: {
         top: `${focusBullet.y * 100}%`,
         left: `${focusBullet.x * 100}%`

blocks/focused-schema/src/save.js

@@ -14,6 +14,7 @@ export default function save({ attributes }) {
 			<div
 				data-focus-bullet-title={focusBullet.title}
 				className="homegrade-blocks-focus-point-bullet"
+				aria-hidden="true"
 				style={{
 					top: `${focusBullet.y * 100}%`,
 					left: `${focusBullet.x * 100}%`,

blocks/points-cles/build/style-index.css

@@ -31,8 +31,6 @@
   padding-left: 10px;
 }
 .wp-block-homegrade-content-blocks-points-cles ul li {
-  list-style-type: disc;
-  list-style-position: inside;
   margin-left: 1.5em;
 }
 .wp-block-homegrade-content-blocks-points-cles p + ul {

blocks/points-cles/build/style-index.css.map

@@ -1 +1 @@
-{"version":3,"file":"./style-index.css","mappings":";;;AAAA;;;;;EAAA;AAOA;EACC;AAAD;AACC;EACC;EACA;AACF;AAAE;EACC;EACA;EACA;EACA;EACA;EACA;EAAA;AAEH;AAAG;EACC;EACA;AAEJ;AACE;EACC;AACH;AAGC;EACC;EACA;EAEA;AAFF;AAKC;EACC;AAHF;AAKC;EACC;AAHF,C","sources":["webpack://multiblocks/./src/style.scss"],"sourcesContent":["/**\n * The following styles get applied both on the front of your site\n * and in the editor.\n *\n * Replace them with your own styles or remove the file completely.\n */\n\n.wp-block-homegrade-content-blocks-points-cles {\n\tmargin-bottom: 2rem;\n\t&__titling {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\t.icon {\n\t\t\tbackground-color: black;\n\t\t\tborder-radius: 50%;\n\t\t\taspect-ratio: 1/1;\n\t\t\twidth: 40px;\n\t\t\tpadding: 10px;\n\t\t\theight: fit-content;\n\n\t\t\timg {\n\t\t\t\twidth: 30px;\n\t\t\t\theight: auto;\n\t\t\t}\n\t\t}\n\t\th3 {\n\t\t\tpadding-left: 10px;\n\t\t}\n\t}\n\n\tul li {\n\t\tlist-style-type: disc;\n\t\tlist-style-position: inside;\n\t\t// display: flex;\n\t\tmargin-left: 1.5em;\n\t}\n\n\tp + ul {\n\t\tpadding-top: 16px;\n\t}\n\tul + p {\n\t\tpadding-top: 16px;\n\t}\n}\n"],"names":[],"sourceRoot":""}
+{"version":3,"file":"./style-index.css","mappings":";;;AAAA;;;;;EAAA;AAOA;EACC;AAAD;AACC;EACC;EACA;AACF;AAAE;EACC;EACA;EACA;EACA;EACA;EACA;EAAA;AAEH;AAAG;EACC;EACA;AAEJ;AACE;EACC;AACH;AAGC;EAIC;AAJF;AAOC;EACC;AALF;AAOC;EACC;AALF,C","sources":["webpack://multiblocks/./src/style.scss"],"sourcesContent":["/**\n * The following styles get applied both on the front of your site\n * and in the editor.\n *\n * Replace them with your own styles or remove the file completely.\n */\n\n.wp-block-homegrade-content-blocks-points-cles {\n\tmargin-bottom: 2rem;\n\t&__titling {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\t.icon {\n\t\t\tbackground-color: black;\n\t\t\tborder-radius: 50%;\n\t\t\taspect-ratio: 1/1;\n\t\t\twidth: 40px;\n\t\t\tpadding: 10px;\n\t\t\theight: fit-content;\n\n\t\t\timg {\n\t\t\t\twidth: 30px;\n\t\t\t\theight: auto;\n\t\t\t}\n\t\t}\n\t\th3 {\n\t\t\tpadding-left: 10px;\n\t\t}\n\t}\n\n\tul li {\n\t\t// list-style-type: disc;\n\t\t// list-style-position: inside;\n\t\t// display: flex;\n\t\tmargin-left: 1.5em;\n\t}\n\n\tp + ul {\n\t\tpadding-top: 16px;\n\t}\n\tul + p {\n\t\tpadding-top: 16px;\n\t}\n}\n"],"names":[],"sourceRoot":""}

blocks/points-cles/src/style.scss

@@ -29,8 +29,8 @@
 	}
 
 	ul li {
-		list-style-type: disc;
+		// list-style-type: disc;
-		list-style-position: inside;
+		// list-style-position: inside;
 		// display: flex;
 		margin-left: 1.5em;
 	}

blocks/questions-container/build/render.php

@@ -5,6 +5,6 @@ $relatedPost = get_post($relatedPostId);
 
 
 <section id="questions-container-<?php echo $relatedPostId  ?>" class="questions-container-block">
-	<h2 class="questions-container-block__title"><?php echo $relatedPost->post_title ?></h2>
+	<h2 class="questions-container-block__title" tabindex="-1"><?php echo $relatedPost->post_title ?></h2>
 	<?php echo $relatedPost->post_content ?>
 </section>

blocks/questions-container/src/render.php

@@ -5,6 +5,6 @@ $relatedPost = get_post($relatedPostId);
 
 
 <section id="questions-container-<?php echo $relatedPostId  ?>" class="questions-container-block">
-	<h2 class="questions-container-block__title"><?php echo $relatedPost->post_title ?></h2>
+	<h2 class="questions-container-block__title" tabindex="-1"><?php echo $relatedPost->post_title ?></h2>
 	<?php echo $relatedPost->post_content ?>
 </section>

blocks/vocabulaire-summary/build/render.php

@@ -4,7 +4,7 @@ global $post;
 $thematique = get_the_terms($post->ID, 'thematiques')[0];
 ?>
 
-<section class="homegrade-blocks-vocabulaire-summary">
+<section id="vocabulaire-summary" class="homegrade-blocks-vocabulaire-summary">
 	<h3 className="homegrade-blocks-vocabulaire-summary__title">
 		Vocabulaire <?php echo $thematique->name ? " — " . $thematique->name : ""; ?>
 	</h3>

blocks/vocabulaire-summary/src/render.php

@@ -4,7 +4,7 @@ global $post;
 $thematique = get_the_terms($post->ID, 'thematiques')[0];
 ?>
 
-<section class="homegrade-blocks-vocabulaire-summary">
+<section id="vocabulaire-summary" class="homegrade-blocks-vocabulaire-summary">
 	<h3 className="homegrade-blocks-vocabulaire-summary__title">
 		Vocabulaire <?php echo $thematique->name ? " — " . $thematique->name : ""; ?>
 	</h3>

build/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('wp-block-editor', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n', 'wp-primitives', 'wp-rich-text'), 'version' => '6b99bf41aa6ae29bed43');
+<?php return array('dependencies' => array('wp-block-editor', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n', 'wp-primitives', 'wp-rich-text'), 'version' => 'd0f83f5f5780d1e8868a');

build/index.css

@@ -16,12 +16,15 @@
 	top: -6px;
 	left: 50%;
 	text-align: left;
-	transform: translate(-50%, -100%);
+	transform: translate(-50%, -94%);
 	padding: 10px;
 	max-width: 300px;
 	width: -moz-max-content;
 	width: max-content;
 }
+.tooltip-popup[aria-hidden="true"] {
+	display: none;
+}
 .tooltip-popup:after {
 	content: "";
 	display: block;

build/index.css.map

@@ -1 +1 @@
-{"version":3,"file":"index.css","mappings":";;;AAAA;CACC,iBAAiB;CACjB,kBAAkB;CAClB,eAAe;CACf,0BAA0B;CAC1B,6BAA6B;CAC7B,0BAA0B;AAC3B;;AAEA;CACC,wBAAwB;CACxB,kBAAkB;CAClB,SAAS;CACT,SAAS;CACT,gBAAgB;CAChB,iCAAiC;CACjC,aAAa;CACb,gBAAgB;CAChB,uBAAkB;CAAlB,kBAAkB;AACnB;AACA;CACC,WAAW;CACX,cAAc;CACd,uBAAuB;CACvB,kBAAkB;CAClB,SAAS;CACT,SAAS;CACT,WAAW;CACX,YAAY;CACZ,8CAA8C;CAC9C,2CAA2C;AAC5C;AACA;CACC,iBAAiB;CACjB,uBAAuB;CACvB,oBAAoB;AACrB;AACA;CACC,uBAAuB;CACvB,oBAAoB;AACrB;;AAEA,mBAAmB;AACnB;CACC;EACC,wBAAwB;EACxB,gBAAgB;CACjB;AACD;;;;;AChDA;CACC,mBAAmB;CACnB,qBAAqB;CACrB,2BAA2B;AAC5B","sources":["webpack://multi-blocks/./src/format-types/tooltip/tooltip.css","webpack://multi-blocks/./src/format-types/brochure/brochure.css"],"sourcesContent":[".tooltip-word {\r\n\tpadding-top: 12px;\r\n\tposition: relative;\r\n\tcursor: default;\r\n\ttext-underline-offset: 4px;\r\n\ttext-decoration-style: dashed;\r\n\ttext-decoration-color: red;\r\n}\r\n\r\n.tooltip-popup {\r\n\tbackground-color: yellow;\r\n\tposition: absolute;\r\n\ttop: -6px;\r\n\tleft: 50%;\r\n\ttext-align: left;\r\n\ttransform: translate(-50%, -100%);\r\n\tpadding: 10px;\r\n\tmax-width: 300px;\r\n\twidth: max-content;\r\n}\r\n.tooltip-popup:after {\r\n\tcontent: \"\";\r\n\tdisplay: block;\r\n\tbackground-color: white;\r\n\tposition: absolute;\r\n\ttop: 100%;\r\n\tleft: 50%;\r\n\twidth: 20px;\r\n\theight: 20px;\r\n\ttransform: translate(-50%, -50%) rotate(45deg);\r\n\tbox-shadow: 4px 4px 4px rgba(0, 0, 0, 0.08);\r\n}\r\n.tooltip-popup__title {\r\n\tfont-weight: bold;\r\n\tcolor: black !important;\r\n\tpadding-bottom: 10px;\r\n}\r\n.tooltip-popup__definition {\r\n\tcolor: black !important;\r\n\tmargin: 0 !important;\r\n}\r\n\r\n/* FOR THE EDITOR */\r\n.popover_tooltip_field {\r\n\t.components-popover__content {\r\n\t\tpadding: 10px !important;\r\n\t\tmin-width: 200px;\r\n\t}\r\n}\r\n",".brochure-download-icon {\r\n\tmargin: 0 0px 0 6px;\r\n\tdisplay: inline-block;\r\n\ttransform: translateY(-1px);\r\n}\r\n"],"names":[],"sourceRoot":""}
+{"version":3,"file":"index.css","mappings":";;;AAAA;CACC,iBAAiB;CACjB,kBAAkB;CAClB,eAAe;CACf,0BAA0B;CAC1B,6BAA6B;CAC7B,0BAA0B;AAC3B;;AAEA;CACC,wBAAwB;CACxB,kBAAkB;CAClB,SAAS;CACT,SAAS;CACT,gBAAgB;CAChB,gCAAgC;CAChC,aAAa;CACb,gBAAgB;CAChB,uBAAkB;CAAlB,kBAAkB;AACnB;AACA;CACC,aAAa;AACd;AACA;CACC,WAAW;CACX,cAAc;CACd,uBAAuB;CACvB,kBAAkB;CAClB,SAAS;CACT,SAAS;CACT,WAAW;CACX,YAAY;CACZ,8CAA8C;CAC9C,2CAA2C;AAC5C;AACA;CACC,iBAAiB;CACjB,uBAAuB;CACvB,oBAAoB;AACrB;AACA;CACC,uBAAuB;CACvB,oBAAoB;AACrB;;AAEA,mBAAmB;AACnB;CACC;EACC,wBAAwB;EACxB,gBAAgB;CACjB;AACD;;;;;ACnDA;CACC,mBAAmB;CACnB,qBAAqB;CACrB,2BAA2B;AAC5B","sources":["webpack://multi-blocks/./src/format-types/tooltip/tooltip.css","webpack://multi-blocks/./src/format-types/brochure/brochure.css"],"sourcesContent":[".tooltip-word {\r\n\tpadding-top: 12px;\r\n\tposition: relative;\r\n\tcursor: default;\r\n\ttext-underline-offset: 4px;\r\n\ttext-decoration-style: dashed;\r\n\ttext-decoration-color: red;\r\n}\r\n\r\n.tooltip-popup {\r\n\tbackground-color: yellow;\r\n\tposition: absolute;\r\n\ttop: -6px;\r\n\tleft: 50%;\r\n\ttext-align: left;\r\n\ttransform: translate(-50%, -94%);\r\n\tpadding: 10px;\r\n\tmax-width: 300px;\r\n\twidth: max-content;\r\n}\r\n.tooltip-popup[aria-hidden=\"true\"] {\r\n\tdisplay: none;\r\n}\r\n.tooltip-popup:after {\r\n\tcontent: \"\";\r\n\tdisplay: block;\r\n\tbackground-color: white;\r\n\tposition: absolute;\r\n\ttop: 100%;\r\n\tleft: 50%;\r\n\twidth: 20px;\r\n\theight: 20px;\r\n\ttransform: translate(-50%, -50%) rotate(45deg);\r\n\tbox-shadow: 4px 4px 4px rgba(0, 0, 0, 0.08);\r\n}\r\n.tooltip-popup__title {\r\n\tfont-weight: bold;\r\n\tcolor: black !important;\r\n\tpadding-bottom: 10px;\r\n}\r\n.tooltip-popup__definition {\r\n\tcolor: black !important;\r\n\tmargin: 0 !important;\r\n}\r\n\r\n/* FOR THE EDITOR */\r\n.popover_tooltip_field {\r\n\t.components-popover__content {\r\n\t\tpadding: 10px !important;\r\n\t\tmin-width: 200px;\r\n\t}\r\n}\r\n",".brochure-download-icon {\r\n\tmargin: 0 0px 0 6px;\r\n\tdisplay: inline-block;\r\n\ttransform: translateY(-1px);\r\n}\r\n"],"names":[],"sourceRoot":""}

index.php

@@ -84,6 +84,20 @@ function blocks_course_plugin_enqueue_assets()
 	wp_enqueue_script('homegrade-blocks-tooltipjs', plugin_dir_url(__FILE__) . 'src/format-types/tooltip/tooltip-front.js');
 	wp_enqueue_style('homegrade-blocks-tooltipcss', plugin_dir_url(__FILE__) . 'src/format-types/tooltip/tooltip.css');
 	wp_enqueue_script('homegrade-blocks-brochurejs', plugin_dir_url(__FILE__) . 'src/format-types/brochure/brochure-front.js');
+
+	// #PASSING TRANSLATIONS
+	wp_register_script('homegrade-blocks-brochurejs', plugin_dir_url(__FILE__) . 'src/format-types/brochure/brochure-front.js');
+
+	$translation_array_brochure_link = array(
+		'download' => __('Télécharger', 'homegrade-theme__texte-fonctionnel'),
+	);
+	wp_localize_script('homegrade-blocks-brochurejs', 'textTranslationsBrochureLink', $translation_array_brochure_link);
+
+	wp_enqueue_script('homegrade-blocks-brochurejs');
+
+
+
+
 	wp_enqueue_style('homegrade-blocks-brochurecss', plugin_dir_url(__FILE__) . 'src/format-types/brochure/brochure.css');
 
 	wp_localize_script('homegrade-blocks-brochurejs', 'img_path_datas', array(

src/format-types/brochure/brochure-front.js

@@ -8,7 +8,7 @@ window.addEventListener("DOMContentLoaded", (event) => {
 		const brochureLinkIcon = document.createElement("img");
 		brochureLinkIcon.src = iconSrc;
 		brochureLinkIcon.classList.add("brochure-download-icon");
-		brochureLinkIcon.alt = "";
+		brochureLinkIcon.alt = textTranslationsBrochureLink.download;
 
 		brochureLink.appendChild(brochureLinkIcon);
 	});

src/format-types/tooltip/tooltip-front.js

@@ -1,10 +1,13 @@
-window.addEventListener("DOMContentLoaded", (event) => {
+function initTooltips(tooltipWords) {
-	let tooltipWords = document.querySelectorAll("[data-tooltip-definition]");
+	tooltipWords.forEach((word) => {
-
+		word.setAttribute("tabindex", "0");
-	tooltipWords.forEach((tooltipWord) => {
+		createTooltip(word);
-		tooltipWord.addEventListener("mouseover", (event) => {
+	});
+}
+function createTooltip(tooltipWord) {
 	const tooltipPopup = document.createElement("div");
 	tooltipPopup.className = "tooltip-popup";
+	tooltipPopup.setAttribute("aria-hidden", "true");
 
 	const tooltipDefinition = document.createElement("p");
 	tooltipDefinition.textContent = tooltipWord.getAttribute("data-tooltip-definition");
@@ -17,11 +20,51 @@ window.addEventListener("DOMContentLoaded", (event) => {
 	tooltipPopup.appendChild(tooltipTitle);
 	tooltipPopup.appendChild(tooltipDefinition);
 	tooltipWord.appendChild(tooltipPopup);
+	// tooltipWord.insertAdjacentElement("afterend", tooltipPopup);
+}
+
+function showTooltip(tooltipWord) {
+	const tooltipPopup = tooltipWord.querySelector(".tooltip-popup");
+	tooltipPopup.setAttribute("aria-hidden", "false");
+}
+function hideTooltip(tooltipWord) {
+	const tooltipPopup = tooltipWord.querySelector(".tooltip-popup");
+	tooltipPopup.setAttribute("aria-hidden", "true");
+}
+
+window.addEventListener("DOMContentLoaded", (event) => {
+	let tooltipWords = document.querySelectorAll("[data-tooltip-definition]");
+
+	tooltipWords.forEach((tooltipWord) => {
+		tooltipWord.addEventListener("click", (event) => {
+			showTooltip(tooltipWord);
+		});
+		tooltipWord.addEventListener("keydown", (event) => {
+			switch (event.key) {
+				case "Enter":
+					toggleTooltip(tooltipWord);
+					break;
+				case "Escape":
+					hideTooltip(tooltipWord);
+					break;
+			}
+		});
+		tooltipWord.addEventListener("mouseover", (event) => {
+			showTooltip(tooltipWord);
 		});
 
-		tooltipWord.addEventListener("mouseout", function () {
+		tooltipWord.addEventListener("mouseout", (event) => {
-			const tooltipPopup = tooltipWord.querySelector(".tooltip-popup");
+			var isFocused = document.activeElement === tooltipWord;
-			tooltipPopup.remove();
+			if (!isFocused) {
+				hideTooltip(tooltipWord);
+			}
+		});
+		tooltipWord.addEventListener("focusin", (event) => {
+			showTooltip(tooltipWord);
+		});
+		tooltipWord.addEventListener("focusout", (event) => {
+			hideTooltip(tooltipWord);
 		});
 	});
+	initTooltips(tooltipWords);
 });

src/format-types/tooltip/tooltip.css

@@ -13,11 +13,14 @@
 	top: -6px;
 	left: 50%;
 	text-align: left;
-	transform: translate(-50%, -100%);
+	transform: translate(-50%, -94%);
 	padding: 10px;
 	max-width: 300px;
 	width: max-content;
 }
+.tooltip-popup[aria-hidden="true"] {
+	display: none;
+}
 .tooltip-popup:after {
 	content: "";
 	display: block;

src/format-types/tooltip/tooltip.js

@@ -16,6 +16,7 @@ const Edit = (props) => {
 
 	const activeFormat = getActiveFormats(value).filter((format) => format.type === formatName)[0];
 	const lang = getAdminLanguageFromCookie("wp-wpml_current_language");
+
 	function getAdminLanguageFromCookie(c_name) {
 		var c_value = document.cookie,
 			c_start = c_value.indexOf(" " + c_name + "=");