' pour un en-tête, et la clé de son explication — ; null
+ // sans infobulle. Ouvrir sur un terme remplace l'explication d'un autre ;
+ // quitter un terme ne ferme que la sienne.
+ const uid = $props.id();
+ const idExplication = `${uid}-explication`;
+ let expliquee = $state(null);
+ function expliquer(evenement, terme, colonne) {
+ expliquee = { ancre: evenement.currentTarget, terme, cle: explicationDeColonne(colonne), details: {} };
+ }
+ function taire(terme) {
+ if (expliquee?.terme === terme) expliquee = null;
+ }
+ const fermerExplication = () => (expliquee = null);
+ // L'aria-describedby d'un terme : l'infobulle quand elle l'explique.
+ const decrit = (terme) => (expliquee?.terme === terme ? idExplication : undefined);
+
+ function entrer(evenement, { critere, colonne }) {
+ surligner(colonne);
+ expliquer(evenement, `critere:${critere}`, colonne);
+ }
+ function sortir({ critere, colonne }) {
+ quitter(colonne);
+ taire(`critere:${critere}`);
+ }
+
const effacer = () => seance.executer('effacerPropositions', {});
const nommer = (id) => nomDe(charge, id);
@@ -114,19 +149,22 @@
class:actif={surlignee === morceau.colonne}
data-critere={morceau.critere}
tabindex="0"
- onmouseenter={() => surligner(morceau.colonne)}
- onmouseleave={() => quitter(morceau.colonne)}
- onfocus={() => surligner(morceau.colonne)}
- onblur={() => quitter(morceau.colonne)}>{t(morceau.cle, morceau.details)} entrer(evenement, morceau)}
+ onmouseleave={() => sortir(morceau)}
+ onfocus={(evenement) => entrer(evenement, morceau)}
+ onblur={() => sortir(morceau)}>{t(morceau.cle, morceau.details)}
{/if}
{/each}
{/each}
-
+
{/if}
+
+
{#if charge !== null && charge.propositions.length > 0}
diff --git a/src/interface/propositions/TableauPropositions.svelte b/src/interface/propositions/TableauPropositions.svelte
index 22c1f65..aec572d 100644
--- a/src/interface/propositions/TableauPropositions.svelte
+++ b/src/interface/propositions/TableauPropositions.svelte
@@ -20,6 +20,12 @@
// la cellule des raisons d'une ligne hors classement, qui en couvre
// plusieurs.
//
+ // Chaque en-tête explique sa colonne dans l'infobulle de la section : il se
+ // focalise au clavier (tabindex 0), et son survol ou son focus appelle
+ // expliquer(evenement, 'colonne:', nom), le quitter taire('colonne:').
+ // decrit('colonne:') rend l'identifiant de l'infobulle quand elle
+ // explique cet en-tête, pour son aria-describedby, undefined sinon.
+ //
// Désignations : data-retenu sur la ligne du retenu, data-proposition sur
// chaque autre ligne, data-colonne sur chaque cellule et chaque en-tête ;
// data-classement et data-hors-classement sur les deux groupes de lignes.
@@ -30,7 +36,7 @@
import Commande from '../primitives/Commande.svelte';
import { texteCellule } from './modele.js';
- let { vue, surlignee = null, nommer, voir, retenir } = $props();
+ let { vue, surlignee = null, nommer, voir, retenir, expliquer, taire, decrit } = $props();
// L'attribut data-marque d'une cellule de la colonne nommée : 'selection'
// quand elle est la colonne surlignée, undefined sinon, qui l'omet.
@@ -98,7 +104,21 @@
{#each vue.colonnes as colonne (colonne.nom)}
- | {t(colonne.cle)} |
+ {@const terme = `colonne:${colonne.nom}`}
+
+ expliquer(evenement, terme, colonne.nom)}
+ onmouseleave={() => taire(terme)}
+ onfocus={(evenement) => expliquer(evenement, terme, colonne.nom)}
+ onblur={() => taire(terme)}>{t(colonne.cle)} |
{/each}
@@ -227,6 +247,13 @@
border-right: 2px solid var(--couleur-selection);
}
+ /* L'anneau de focus se pose dans la cellule : le conteneur défilant ne le
+ rogne pas. */
+ thead th:focus-visible {
+ outline: 2px solid var(--couleur-focus);
+ outline-offset: -2px;
+ }
+
thead th.surlignee {
text-decoration: underline;
text-decoration-thickness: 2px;
diff --git a/src/interface/propositions/modele.js b/src/interface/propositions/modele.js
index df876a3..f4960dc 100644
--- a/src/interface/propositions/modele.js
+++ b/src/interface/propositions/modele.js
@@ -64,14 +64,30 @@ const DECIMALES = new Map([['diversite', 2]]);
/** Les colonnes du tableau, dans l'ordre d'affichage : le rang et
* l'identifiant, puis les mesures — les trois minimums des rencontres en
- * tête —, le certificat, les imposés et les commandes. Chacune porte son nom
- * et la clé de son en-tête, qui nomme son unité. */
+ * tête —, le certificat, les imposés et les commandes. Chacune porte son nom,
+ * la clé de son en-tête, qui nomme son unité, et celle de son explication,
+ * le texte de l'infobulle de son en-tête et du critère qui la désigne. */
export const COLONNES = Object.freeze(
['rang', 'proposition', ...LECTURES.keys(), 'imposes', 'commandes'].map((nom) =>
- Object.freeze({ nom, cle: `propositions.colonne.${nom}` }),
+ Object.freeze({ nom, cle: `propositions.colonne.${nom}`, explication: `propositions.explication.${nom}` }),
),
);
+/**
+ * La clé de l'explication d'une colonne : le texte de l'infobulle de son
+ * en-tête, et celui du nom de critère qui la désigne dans la phrase de
+ * l'ordre (colonneDuCritere) — un critère et sa colonne partagent la même.
+ * Lève TypeError pour un nom qui n'est pas une colonne de COLONNES.
+ *
+ * @param {string} nom le nom d'une colonne
+ * @returns {string}
+ */
+export function explicationDeColonne(nom) {
+ const colonne = COLONNES.find((candidate) => candidate.nom === nom);
+ if (colonne === undefined) throw new TypeError(`colonne inconnue : ${nom}`);
+ return colonne.explication;
+}
+
// Une cellule de nombre : null s'écrit « — ».
const nombre = (colonne, valeur) => ({
colonne,
diff --git a/src/interface/propositions/modele.test.js b/src/interface/propositions/modele.test.js
index f9efb48..ce98922 100644
--- a/src/interface/propositions/modele.test.js
+++ b/src/interface/propositions/modele.test.js
@@ -29,7 +29,17 @@ import { analyser, capacite, configurationDepuisCharge, creerCharge } from '../.
import { planDepuisFichier } from '../../stockage/placements.js';
import { VERSION } from '../../version.genere.js';
import { TABLES_INTERFACE } from '../libelles.js';
-import { COLONNES, colonneDuCritere, demandeConfirmation, evaluation, nomDe, retenuAjuste, tableau, texteCellule } from './modele.js';
+import {
+ COLONNES,
+ colonneDuCritere,
+ demandeConfirmation,
+ evaluation,
+ explicationDeColonne,
+ nomDe,
+ retenuAjuste,
+ tableau,
+ texteCellule,
+} from './modele.js';
const { t } = creerTraduction([...TABLES_APPLICATION, ...TABLES_INTERFACE]);
const format = creerFormat(t);
@@ -656,3 +666,96 @@ describe('evaluation : la table d’une charge, ou ce qui l’empêche', () => {
assert.equal(refus.code, 'SURRESERVATION');
});
});
+
+describe('les explications des colonnes et des critères (infobulles, § 5.4, § 5.5, § 5.7)', () => {
+ // Le sens de chaque colonne : 'bas' quand la plus faible valeur sert le
+ // mieux, 'grand' quand c'est la plus forte ; null quand l'explication ne
+ // dit aucun sens — le rang, le numéro, les paires distinctes, que l'ordre
+ // ne lit pas et dont le compte le plus faible n'est pas le meilleur
+ // (§ 5.4), le certificat, les imposés et les commandes.
+ const SENS = new Map([
+ ['rang', null],
+ ['proposition', null],
+ ['rencontresTous', 'grand'],
+ ['rencontresMobiles', 'grand'],
+ ['rencontresAncres', 'grand'],
+ ['collisionsCumulees', 'bas'],
+ ['pairesDistinctes', null],
+ ['excedentCollisions', 'bas'],
+ ['rencontresRepetees', 'bas'],
+ ['maxRencontresPaire', 'bas'],
+ ['retoursChoisis', 'bas'],
+ ['appartenancesVues', 'grand'],
+ ['totalRedondance', 'bas'],
+ ['diversite', 'grand'],
+ ['manqueMax', 'bas'],
+ ['effectifManque', 'bas'],
+ ['ecartItineraireMax', 'bas'],
+ ['ecartAuPlafondAPriori', 'bas'],
+ ['certificat', null],
+ ['imposes', null],
+ ['commandes', null],
+ ]);
+ const MIEUX = new Map([
+ ['bas', /Plus (?:il|elle) est (?:bas|basse), mieux c'est\./],
+ ['grand', /Plus (?:il|elle) est (?:grand|grande), mieux c'est\./],
+ ]);
+ // Les phrases d'un texte : un point, puis un blanc, puis une capitale ou
+ // un guillemet ouvrant.
+ const phrases = (texte) => texte.split(/(?<=\.)\s+(?=[\p{Lu}\u{00AB}])/u);
+
+ test('chaque colonne de COLONNES, sans exception, porte la clé de son explication : elle existe, compte une à trois phrases, et diffère de l’en-tête et des autres explications', () => {
+ assert.equal(COLONNES.length, 21);
+ assert.deepEqual(COLONNES.map(({ nom }) => nom), [...SENS.keys()]);
+ const textes = new Set();
+ for (const { nom, cle, explication } of COLONNES) {
+ assert.equal(explication, `propositions.explication.${nom}`, nom);
+ assert.equal(explicationDeColonne(nom), explication, nom);
+ const texte = t(explication);
+ const nombre = phrases(texte).length;
+ assert.ok(nombre >= 1 && nombre <= 3, `${nom} : ${nombre} phrases`);
+ assert.ok(texte.length <= 420, `${nom} : ${texte.length} caractères`);
+ assert.notEqual(texte, t(cle), nom);
+ textes.add(texte);
+ }
+ assert.equal(textes.size, COLONNES.length);
+ });
+
+ test('chaque explication dit dans quel sens la colonne sert le mieux, et seulement quand ce sens existe', () => {
+ assert.ok(SENS.size > 0);
+ for (const [nom, sens] of SENS) {
+ const texte = t(explicationDeColonne(nom));
+ for (const [autre, motif] of MIEUX) {
+ if (autre === sens) assert.match(texte, motif, nom);
+ else assert.doesNotMatch(texte, motif, nom);
+ }
+ if (sens === null) assert.doesNotMatch(texte, /mieux c'est/, nom);
+ }
+ });
+
+ test('chaque critère, et l’identifiant croissant, partage l’explication de la colonne qu’il désigne ; seule l’explication d’un critère le dit critère du classement', () => {
+ const criteres = new Set(CRITERES.map(colonneDuCritere));
+ assert.equal(criteres.size, 5);
+ for (const { nom } of COLONNES) {
+ const texte = t(explicationDeColonne(nom));
+ if (criteres.has(nom)) assert.match(texte, /critère du classement/i, nom);
+ else assert.doesNotMatch(texte, /(? colonne !== null);
+ assert.ok(designants.length >= 5);
+ for (const { critere, colonne } of designants) {
+ assert.equal(explicationDeColonne(colonne), explicationDeColonne(colonneDuCritere(critere)), critere);
+ assert.ok(t(explicationDeColonne(colonne)).length > 0, critere);
+ }
+ }
+ });
+
+ test('explicationDeColonne lève pour un nom qui n’est pas une colonne', () => {
+ assert.equal(explicationDeColonne('rang'), 'propositions.explication.rang');
+ assert.throws(() => explicationDeColonne('redondance'), TypeError);
+ assert.throws(() => explicationDeColonne('moyenneRencontres'), TypeError);
+ });
+});
diff --git a/test/navigateur/ecrans.js b/test/navigateur/ecrans.js
index f9b3707..97316f0 100644
--- a/test/navigateur/ecrans.js
+++ b/test/navigateur/ecrans.js
@@ -620,6 +620,27 @@ export const ECRANS = Object.freeze([
return m.racine;
},
},
+ {
+ nom: 'propositions.infobulleColonne',
+ mode: 'lecture',
+ async atteindre(contexte) {
+ // Le pointeur réel sur un en-tête de colonne : l'infobulle qui
+ // l'explique paraît, visible, de largeur non nulle.
+ const m = await ouvrirEvenement(contexte, chargePrincipale(), { section: 'propositions' });
+ const { x, y } = await centre(await element(m, 'thead th[data-colonne="excedentCollisions"]'));
+ await pointer('bouger', x, y);
+ await attendre("l'infobulle de la colonne", () => {
+ const bulle = m.racine.querySelector('[data-section="propositions"] [role="tooltip"]');
+ return (
+ bulle !== null &&
+ !bulle.hidden &&
+ bulle.getBoundingClientRect().width > 0 &&
+ getComputedStyle(bulle).visibility === 'visible'
+ );
+ });
+ return m.racine;
+ },
+ },
{
nom: 'refus.modeLecture',
mode: 'lecture',