openvibers/openvibe.media Commits

Media pages: filled buttons use the strong accent (AA contrast) (#125)

OP OpenVibers committed 29 days ago · 8f63ebaaa1 · 2 files, +4 −1

openvibe.media's watch pages (`/v/:id`) failed axe `color-contrast` (serious) on their "Watch on Live" button: white on `--accent` (#3b82f6) is 3.7:1, under AA.

A filled `.btn` now uses `--accent-strong` (#2563eb) and `--on-accent-strong`, as filled controls do across the network. Links that use `--acc` as text colour are unchanged. `test/theme-default.test.js` checks the rule.

Changes

ddiff --git a/server/public/page-frame.js b/server/public/page-frame.js
iindex 17890ed..c9a5909 100644
---- a/server/public/page-frame.js
++++ b/server/public/page-frame.js
@@@ -119,7 +119,8 @@ function baseCss() {
    .meta a:hover { text-decoration: underline; }
    .note { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: .7rem 1rem; margin: 0 0 1rem; color: var(--muted); font-size: .9rem; }
    .note a { font-weight: 600; }
--  .btn { display: inline-block; padding: .5rem .95rem; border-radius: 10px; background: var(--acc); color: var(--on-acc); text-decoration: none; font-weight: 600; font-size: .9rem; }
++  /* A filled button uses the strong accent: white on --accent (#3b82f6) is 3.7:1, under AA; on --accent-strong it passes. */
++  .btn { display: inline-block; padding: .5rem .95rem; border-radius: 10px; background: var(--accent-strong, #2563eb); color: var(--on-accent-strong, #fff); text-decoration: none; font-weight: 600; font-size: .9rem; }
    .btn.ghost { background: transparent; color: var(--link); border: 1px solid var(--line); }
    .actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
    .desc { color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; }
ddiff --git a/test/theme-default.test.js b/test/theme-default.test.js
iindex cda750d..fc7fed7 100644
---- a/test/theme-default.test.js
++++ b/test/theme-default.test.js
@@@ -13,6 +13,8 @@ const assert = require('assert');
          assert.ok(css.includes(`${k}:${DEFAULT_VARS[k]}`), `the page defines ${k} as the default theme does`);
      }
      assert.ok(!/url\(|;\s*}/.test(css.split('\n').find((l) => l.includes('--accent:')) || ''), 'only plain token values');
++    // A filled button is white on the strong accent (AA); white on --accent is 3.7:1 (axe color-contrast on /v/:id).
++    assert.ok(/\.btn \{[^}]*background: var\(--accent-strong, #2563eb\); color: var\(--on-accent-strong, #fff\)/.test(css), 'buttons use the strong accent');
      // The index page (browse.js) is composed by page-frame too, so it carries the same tokens.
      const src = require('fs').readFileSync(require('path').join(__dirname, '..', 'server', 'public', 'browse.js'), 'utf8');
      assert.ok(/pageFrame\.page\(/.test(src) && !/<!DOCTYPE/i.test(src), 'browse.js renders through page-frame, not its own document');