Base : bordure des fenêtres et menus à la charte, croix « Fermer », aide clavier muette au doigt (t_8f5dbd3b) #1704

Merged

hermes-fusion merged 1 commit from hermes/base-finition-fenetres into main

2026-10-15 06:55:03 +02:00

hermes-bot commented

2026-10-15 06:41:49 +02:00

Collaborator

Carte t_8f5dbd3b, sujet 2 sur 2 (la base, après la fenêtre « À prévoir » de la PR #1703). Indépendante de #1703 : aucun fichier commun.

Causes mesurées (aperçu apercu.py, Chromium, styles calculés) :

app.css ne bordait que les descendants des contenus portés ([data-slot$="-content"]) : le contenu lui-même gardait border-color: currentColor. Un trait de la couleur du texte autour de chaque fenêtre et chaque menu : rgb(241, 241, 241) en sombre (noir en clair). Le cadre (BarreBas) le contournait à la main par border-border.
La croix des fenêtres shadcn : « Close » (anglais) pour les lecteurs d'écran, glyphe nu de 16 px, anneau gris focus:ring-2 hors charte.
Champ : « Ctrl+Entrée envoie » affiché au téléphone, qui n'a pas de touche Ctrl.

Remède (base seulement : app.css, components/ui/dialog, lib/base/Champ.svelte) :

une règle pour les contenus portés eux-mêmes : bord mesuré après = rgb(48, 48, 48), --border-default ;
la croix devient une puce carrée de la base (PUCE_ICONE, 32 × 32 px, aria-label="Fermer", data-base="puce", contour de focus de la charte) ; l'en-tête de fenêtre garde sa place (pe-8) ;
l'aide clavier se tait sous pointeur grossier (pointer-coarse:hidden).

Rien de retiré : la croix, l'aide sur ordinateur, les fenêtres et les menus restent.

Preuves

npx vitest run : 28 fichiers, 205 tests, 0 échec ; tests/fenetres-base.test.js : 5 tests, rouges sur les fichiers de main.
npm run build : dist/index.html présent, app.js 145 Ko.
test_charte_ui.py, test_charte_svelte.py, test_homogeneite.py (44 relevés, 0 nouvel écart, 0 capture changée), garde-habillage.py : OK.
Captures avant / après de la fiche du Calendrier (sombre et clair à 1 440 px, sombre à 390 px) : jointes à la carte t_8f5dbd3b.

Repéré, hors de cette PR (pas la base) : la visionneuse de l'Atelier porte sm:max-w-5xl, or sm n'existe pas dans la charte : elle reste à 512 px sur ordinateur. Pas mesuré : les menus déroulants ouverts (même règle, non capturés) et la page servie du 132.

Carte t_8f5dbd3b, sujet 2 sur 2 (la base, après la fenêtre « À prévoir » de la PR #1703). Indépendante de #1703 : aucun fichier commun. **Causes mesurées** (aperçu `apercu.py`, Chromium, styles calculés) : - `app.css` ne bordait que les **descendants** des contenus portés (`[data-slot$="-content"]`) : le contenu lui-même gardait `border-color: currentColor`. Un trait de la couleur du texte autour de **chaque fenêtre et chaque menu** : rgb(241, 241, 241) en sombre (noir en clair). Le cadre (`BarreBas`) le contournait à la main par `border-border`. - La croix des fenêtres shadcn : « Close » (anglais) pour les lecteurs d'écran, glyphe nu de 16 px, anneau gris `focus:ring-2` hors charte. - `Champ` : « Ctrl+Entrée envoie » affiché au téléphone, qui n'a pas de touche Ctrl. **Remède** (base seulement : `app.css`, `components/ui/dialog`, `lib/base/Champ.svelte`) : - une règle pour les contenus portés eux-mêmes : bord mesuré après = rgb(48, 48, 48), `--border-default` ; - la croix devient une puce carrée de la base (`PUCE_ICONE`, 32 × 32 px, `aria-label="Fermer"`, `data-base="puce"`, contour de focus de la charte) ; l'en-tête de fenêtre garde sa place (`pe-8`) ; - l'aide clavier se tait sous pointeur grossier (`pointer-coarse:hidden`). Rien de retiré : la croix, l'aide sur ordinateur, les fenêtres et les menus restent. **Preuves** - `npx vitest run` : 28 fichiers, 205 tests, 0 échec ; `tests/fenetres-base.test.js` : 5 tests, rouges sur les fichiers de main. - `npm run build` : `dist/index.html` présent, `app.js` 145 Ko. - `test_charte_ui.py`, `test_charte_svelte.py`, `test_homogeneite.py` (44 relevés, 0 nouvel écart, 0 capture changée), `garde-habillage.py` : OK. - Captures avant / après de la fiche du Calendrier (sombre et clair à 1 440 px, sombre à 390 px) : jointes à la carte t_8f5dbd3b. Repéré, hors de cette PR (pas la base) : la visionneuse de l'Atelier porte `sm:max-w-5xl`, or `sm` n'existe pas dans la charte : elle reste à 512 px sur ordinateur. Pas mesuré : les menus déroulants ouverts (même règle, non capturés) et la page servie du 132.

planche-base-bureau.png

214 KiB

planche-base-telephone.png

69 KiB

hermes-bot added 1 commit

2026-10-15 06:41:49 +02:00

Fenêtres et menus de la base : bordure de la charte, croix « Fermer », aide clavier muette au doigt

Tests du tableau (Rust + Svelte) / Rust (_tableau/rust) (push) Successful in 20s

Details

Tests du tableau (Rust + Svelte) / Front Svelte (_tableau/front) (push) Successful in 12s

Details

Tests du tableau (Rust + Svelte) / Rust (_tableau/rust) (pull_request) Successful in 20s

Details

Tests du tableau (Rust + Svelte) / Front Svelte (_tableau/front) (pull_request) Successful in 12s

Details

1282d73987

Cause : la remise à zéro de app.css ne bordait que les descendants des contenus
portés ([data-slot$="-content"]) ; leur propre `border` restait à currentColor,
un trait de la couleur du texte autour de chaque fenêtre et de chaque menu (mesuré
en sombre : rgb(241, 241, 241) au lieu de --border-default). La croix des fenêtres
était nommée « Close » et portait l'anneau gris de shadcn ; le Champ affichait
« Ctrl+Entrée envoie » au téléphone.

Remède : une règle pour les contenus eux-mêmes (bord rgb(48, 48, 48) mesuré
après), la croix devient une puce carrée de la base (PUCE_ICONE, 32 px, « Fermer »,
contour de focus de la charte), l'en-tête laisse sa place (pe-8), l'aide se tait
sous pointeur grossier. Banc tests/fenetres-base.test.js (5 rouges sur main).

hermes-bot commented

2026-10-15 06:42:14 +02:00

Author

Collaborator

Captures avant / après de la fiche du Calendrier (la même fenêtre de base).

Bureau 1 440 px, en haut sombre, en bas clair ; à gauche avant (trait blanc, croix nue), à droite après :

Téléphone 390 px, sombre, avant puis après :

Captures avant / après de la fiche du Calendrier (la même fenêtre de base). Bureau 1 440 px, en haut sombre, en bas clair ; à gauche avant (trait blanc, croix nue), à droite après : ![bureau](/attachments/a0d2701a-64af-4d34-9748-dc34fc6788f9) Téléphone 390 px, sombre, avant puis après : ![téléphone](/attachments/c117075a-6185-423c-846a-11e91fc12262)

hermes-bot added the

relu

label

2026-10-15 06:53:20 +02:00