optimizing format types for accessibility

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' => 'd0f83f5f5780d1e8868a');
+<?php return array('dependencies' => array('wp-block-editor', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n', 'wp-primitives', 'wp-rich-text'), 'version' => '38f431f8844e556b89ac');

build/index.js

@@ -317,7 +317,7 @@ const Edit = props => {
 };
 (0,_wordpress_rich_text__WEBPACK_IMPORTED_MODULE_2__.registerFormatType)(formatName, {
   title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)("Tooltip", "homegrade-format"),
-  tagName: "span",
+  tagName: "button",
   attributes: {
     definitionId: "data-definition-id",
     dataTooltipDefinition: "data-tooltip-definition",

index.php

@@ -45,7 +45,6 @@ function create_block_multiblocks_block_init()
 	register_block_type(__DIR__ . '/blocks/vocabulaire-summary/build');
 	register_block_type(__DIR__ . '/blocks/focused-schema/build');
 	register_block_type(__DIR__ . '/blocks/focused-thematique/build');
-	// register_block_type(__DIR__ . '/blocks/chapitrage-thematique/build');
 	// register_block_type(__DIR__ . '/blocks/illustration-thematique/build');
 
 	// Statics
@@ -54,8 +53,9 @@ function create_block_multiblocks_block_init()
 	register_block_type(__DIR__ . '/blocks/picture-banner/build');
 	register_block_type(__DIR__ . '/blocks/highlight/build');
 	register_block_type(__DIR__ . '/blocks/aside/build');
-	register_block_type(__DIR__ . '/blocks/table/build');
 	register_block_type(__DIR__ . '/blocks/plus-loin/build');
+	register_block_type(__DIR__ . '/blocks/chapitrage-thematique/build');
+	// register_block_type(__DIR__ . '/blocks/table/build');
 }
 add_action('init', 'create_block_multiblocks_block_init');
 

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

@@ -1,9 +1,13 @@
 function initTooltips(tooltipWords) {
 	tooltipWords.forEach((word) => {
 		word.setAttribute("tabindex", "0");
+		word.setAttribute("aria-expanded", "false");
+		word.setAttribute("aria-description", "voir définition");
+
 		createTooltip(word);
 	});
 }
+
 function createTooltip(tooltipWord) {
 	const tooltipPopup = document.createElement("div");
 	tooltipPopup.className = "tooltip-popup";
@@ -20,30 +24,38 @@ function createTooltip(tooltipWord) {
 	tooltipPopup.appendChild(tooltipTitle);
 	tooltipPopup.appendChild(tooltipDefinition);
 	tooltipWord.appendChild(tooltipPopup);
+
 	// tooltipWord.insertAdjacentElement("afterend", tooltipPopup);
 }
-
 function showTooltip(tooltipWord) {
+	tooltipWord.setAttribute("aria-expanded", "true");
 	const tooltipPopup = tooltipWord.querySelector(".tooltip-popup");
 	tooltipPopup.setAttribute("aria-hidden", "false");
 }
 function hideTooltip(tooltipWord) {
+	tooltipWord.setAttribute("aria-expanded", "false");
 	const tooltipPopup = tooltipWord.querySelector(".tooltip-popup");
 	tooltipPopup.setAttribute("aria-hidden", "true");
 }
 
+function toggleTooltip(tooltipWord) {
+	const isExpanded = tooltipWord.getAttribute("aria-expanded") === "true";
+	if (isExpanded) {
+		hideTooltip(tooltipWord);
+	} else {
+		showTooltip(tooltipWord);
+	}
+}
 window.addEventListener("DOMContentLoaded", (event) => {
 	let tooltipWords = document.querySelectorAll("[data-tooltip-definition]");
 
 	tooltipWords.forEach((tooltipWord) => {
 		tooltipWord.addEventListener("click", (event) => {
-			showTooltip(tooltipWord);
+			// showTooltip(tooltipWord);
+			toggleTooltip(tooltipWord);
 		});
 		tooltipWord.addEventListener("keydown", (event) => {
 			switch (event.key) {
-				case "Enter":
-					toggleTooltip(tooltipWord);
-					break;
 				case "Escape":
 					hideTooltip(tooltipWord);
 					break;
@@ -59,9 +71,9 @@ window.addEventListener("DOMContentLoaded", (event) => {
 				hideTooltip(tooltipWord);
 			}
 		});
-		tooltipWord.addEventListener("focusin", (event) => {
+		// tooltipWord.addEventListener("focusin", (event) => {
-			showTooltip(tooltipWord);
+		// 	showTooltip(tooltipWord);
-		});
+		// });
 		tooltipWord.addEventListener("focusout", (event) => {
 			hideTooltip(tooltipWord);
 		});

src/format-types/tooltip/tooltip.js

@@ -138,7 +138,7 @@ const Edit = (props) => {
 
 registerFormatType(formatName, {
 	title: __("Tooltip", "homegrade-format"),
-	tagName: "span",
+	tagName: "button",
 	attributes: {
 		definitionId: "data-definition-id",
 		dataTooltipDefinition: "data-tooltip-definition",