openvibers/openvibe.food Commits

The budget tier badge reads on white (WCAG AA) (#178)

OP OpenVibers committed 12 days ago · ad5aac38cb · 2 files, +11 −1

Changes

ddiff --git a/public/css/delivery.css b/public/css/delivery.css
iindex 01d18bb..6080329 100644
---- a/public/css/delivery.css
++++ b/public/css/delivery.css
@@@ -16,7 +16,8 @@
.dv-kit-name { font-weight: 700; color: var(--text-primary, #e6edf7); text-decoration: none; }
.dv-kit-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.dv-tier { justify-self: start; font-size: .72rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border-light, #2c3d5c); }
--.dv-budget { color: color-mix(in srgb, #22c55e 75%, var(--text-primary, #e6edf7)); border-color: rgba(74, 222, 128, .45); }
++/* 75% green + the theme's text was #209a52 on white (3.61:1) in Daylight; the success text pair reads 5.4:1. */
++.dv-budget { color: var(--success-text, #15803d); border-color: rgba(74, 222, 128, .45); }
.dv-mid { color: color-mix(in srgb, #3b82f6 75%, var(--text-primary, #e6edf7)); border-color: rgba(96, 165, 250, .45); }
.dv-premium { color: color-mix(in srgb, #d946ef 75%, var(--text-primary, #e6edf7)); border-color: rgba(240, 171, 252, .45); }
.dv-watch { white-space: nowrap; }
ddiff --git a/test/delivery.test.js b/test/delivery.test.js
iindex b96de07..cd599e3 100644
---- a/test/delivery.test.js
++++ b/test/delivery.test.js
@@@ -5,10 +5,19 @@
* by tier with their plans pages and a Watch link; Food never fetches the apps; the home and the navbar link it.
*/
const assert = require('assert');
++const fs = require('fs');
++const path = require('path');
const { boot, check, done } = require('./helpers/boot');
const delivery = require('../server/food/delivery');
++const css = fs.readFileSync(path.join(__dirname, '..', 'public', 'css', 'delivery.css'), 'utf8');
++
(async () => {
++ await check('the budget tier reads on white; no colour mix left in its text', () => {
++ assert.ok(css.includes('.dv-budget { color: var(--success-text, #15803d); border-color: rgba(74, 222, 128, .45); }'), 'the budget tier uses the success text token');
++ assert.ok(!/\.dv-budget \{[^}]*color-mix/.test(css), 'the budget tier text is not a mix');
++ });
++
await check('one query, every app\'s own search, encoded; nothing for an empty query', () => {
const links = delivery.linksFor(' pad thai & spring rolls ');
assert.deepStrictEqual(links.map((l) => l.id), ['doordash', 'ubereats', 'grubhub', 'seamless', 'caviar', 'instacart']);