WCAG AA: the What you get rail is reachable by keyboard (#254)

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

Changes

ddiff --git a/server/home.js b/server/home.js
iindex 428d4bf..6a690a2 100644
---- a/server/home.js
++++ b/server/home.js
@@@ -153,7 +153,7 @@ function sections({ siteUrl, stats }) {
              { icon: 'ov:account', title: 'Your project\'s runs', text: 'Runs belong to your project: another project can never read them. Usage is metered per project, with a free allowance first.' },
              { icon: 'ov:code', title: 'Open source', text: 'AGPL-3.0, built in the open. Every guarantee on this page has a test in the repository.' },
          ],
--    }) + models(stats)
++    }).replace('<div class="sc-grid">', '<div class="sc-grid" role="region" aria-label="What you get" tabindex="0">') + models(stats)
      + '<section class="sc-sec" id="build" aria-labelledby="h-build"><details class="ai-fold"><summary><h2 id="h-build">Build with it</h2><span>the OpenAI SDK, curl, four steps, sandbox and production</span></summary>'
      + showcase.code({
          id: 'openai',
ddiff --git a/test/home.test.js b/test/home.test.js
iindex 12d7185..7c7ccdc 100644
---- a/test/home.test.js
++++ b/test/home.test.js
@@@ -38,6 +38,7 @@ t.test('GET / as a browser: the home page, its CSP and a private cache', async (
      assert.match(r.headers.get('vary'), /Accept/);
      assert.strictEqual((r.text.match(/<h1\b/g) || []).length, 1, 'exactly one h1');
      assert.ok(r.text.includes('Many models, one API.'), 'the hero');
++    assert.ok(r.text.includes('<div class="sc-grid" role="region" aria-label="What you get" tabindex="0">'), 'the sideways rail is reachable by keyboard');
      assert.ok(r.text.includes('point it at /v1 for Chat Completions with tools'), 'the OpenAI-compatible endpoint is on the home');
      assert.ok(r.text.includes('Your project&#39;s own provider') || r.text.includes("Your project's own provider"), 'the project\'s own provider row');
      assert.ok(!r.text.includes('metered models under a project budget'), 'production app runs are free-only until project budgets open');

diff --git a/server/home.js b/server/home.js

index 428d4bf..6a690a2 100644

--- a/server/home.js

+++ b/server/home.js

@@ -153,7 +153,7 @@ function sections({ siteUrl, stats }) {

{ icon: 'ov:account', title: 'Your project\'s runs', text: 'Runs belong to your project: another project can never read them. Usage is metered per project, with a free allowance first.' },

{ icon: 'ov:code', title: 'Open source', text: 'AGPL-3.0, built in the open. Every guarantee on this page has a test in the repository.' },

- }) + models(stats)

+ }).replace('<div class="sc-grid">', '<div class="sc-grid" role="region" aria-label="What you get" tabindex="0">') + models(stats)

+ '<section class="sc-sec" id="build" aria-labelledby="h-build"><details class="ai-fold"><summary><h2 id="h-build">Build with it</h2><span>the OpenAI SDK, curl, four steps, sandbox and production</span></summary>'

+ showcase.code({

id: 'openai',

diff --git a/test/home.test.js b/test/home.test.js

index 12d7185..7c7ccdc 100644

--- a/test/home.test.js

+++ b/test/home.test.js

@@ -38,6 +38,7 @@ t.test('GET / as a browser: the home page, its CSP and a private cache', async (

assert.match(r.headers.get('vary'), /Accept/);

assert.strictEqual((r.text.match(/<h1\b/g) || []).length, 1, 'exactly one h1');

assert.ok(r.text.includes('Many models, one API.'), 'the hero');

+ assert.ok(r.text.includes('<div class="sc-grid" role="region" aria-label="What you get" tabindex="0">'), 'the sideways rail is reachable by keyboard');

assert.ok(r.text.includes('point it at /v1 for Chat Completions with tools'), 'the OpenAI-compatible endpoint is on the home');

assert.ok(r.text.includes('Your project's own provider') || r.text.includes("Your project's own provider"), 'the project\'s own provider row');

assert.ok(!r.text.includes('metered models under a project budget'), 'production app runs are free-only until project budgets open');