Antoine/homegrade_blocks_production
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

optimizing format types for accessibility

Browse Source
This commit is contained in:
Antoine M 2023-10-04 14:41:47 +02:00
parent 39574e3f0b
commit 1c6200800d
6 changed files with 26 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
build/index.asset.php
View File

@ -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');

2
build/index.js
View File

@ -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",

2
build/index.js.map
View File

File diff suppressed because one or more lines are too long

4
index.php
View File

@ -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');

28
src/format-types/tooltip/tooltip-front.js
View File

@ -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) => {
showTooltip(tooltipWord);
});
// tooltipWord.addEventListener("focusin", (event) => {
// showTooltip(tooltipWord);
// });
tooltipWord.addEventListener("focusout", (event) => {
hideTooltip(tooltipWord);
});

2
src/format-types/tooltip/tooltip.js
View File

@ -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",