feat(website): sell plain-language prompts and cross-model quality #1202
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| /** | ||
| * The accessible name on every code block the marketing pages render. | ||
| * | ||
| * A <pre> maps to ARIA role `generic`, and ARIA prohibits an author-supplied | ||
| * name on `generic`, so a bare <pre aria-label="..."> gives a spec-following | ||
| * screen reader a name it will not announce. Every block that carries a name | ||
| * therefore carries an explicit `role="region"` to make that name one ARIA | ||
| * permits, and because a named region is a landmark, the names have to be | ||
| * unique per page or they collapse into an ambiguous pair in the landmark list. | ||
| * | ||
| * This lives in its own file rather than inside each page's test because the | ||
| * rule is a property of the SITE, not of one page. The pages here were fixed | ||
| * together, and pinning them together is what stops the next one from drifting | ||
| * back: the sweep that fixed them originally covered one page, and the other | ||
| * two went unobserved until a review caught it. | ||
|
Collaborator
Author
There was a problem hiding this comment. Narrates this PR's review history in permanent source. The rule is worth stating; how it was arrived at is not. |
||
| */ | ||
| import test from 'node:test'; | ||
| import assert from 'node:assert/strict'; | ||
| import { renderToString } from '@webjsdev/core/server'; | ||
| import Home from '#app/page.ts'; | ||
| import WhatIsWebJs from '#app/what-is-webjs/page.ts'; | ||
| import Why from '#app/why-webjs/page.ts'; | ||
|
|
||
| /** Every `<pre …>` open tag in the rendered HTML, attribute order as authored. */ | ||
| function preTags(html: string) { | ||
| return html.match(/<pre\b[^>]*>/g) ?? []; | ||
| } | ||
|
|
||
| function nameOf(tag: string) { | ||
| return tag.match(/aria-label="([^"]*)"/)?.[1]; | ||
| } | ||
|
|
||
| const PAGES = [ | ||
| { name: '/', render: () => Home() }, | ||
| { name: '/what-is-webjs', render: () => WhatIsWebJs() }, | ||
| { name: '/why-webjs', render: () => Why() }, | ||
| ]; | ||
|
|
||
| for (const page of PAGES) { | ||
| test(`every named code block on ${page.name} carries a role that permits the name`, async () => { | ||
| const tags = preTags(await renderToString(page.render())); | ||
| assert.ok(tags.length > 0, 'the page renders at least one code block'); | ||
| const named = tags.filter(nameOf); | ||
| assert.ok(named.length > 0, 'the page renders at least one NAMED code block, so this test has something to check'); | ||
| for (const tag of named) { | ||
| // Read the role by attribute, not by position: an order-sensitive regex | ||
| // would red on correct markup that simply wrote the attributes the other | ||
| // way round. | ||
| assert.match(tag, /\brole="region"/, `a named pre is missing role=region, so its name is one ARIA prohibits: ${nameOf(tag)}`); | ||
| } | ||
| }); | ||
|
|
||
| test(`no two code blocks on ${page.name} share a landmark name`, async () => { | ||
| const named = preTags(await renderToString(page.render())).map(nameOf).filter(Boolean); | ||
| assert.deepEqual([...new Set(named)], named, `duplicate landmark names on ${page.name}: ${named.join(', ')}`); | ||
| }); | ||
| } | ||
|
|
||
| test('a code block with no name needs no role, so it adds no landmark', async () => { | ||
| // The home page's toggled usage block holds one short line that never becomes | ||
| // a scroll container at a real viewport width. It carries no name and no | ||
|
Collaborator
Author
There was a problem hiding this comment. The premise is wrong at the width WCAG reflow names. The sample is about 266px of text and the content box at a 320px viewport is about 230px, so it does overflow below roughly 356px. The test then pins that wrong premise as an invariant, so the block cannot be given a name or a focus stop without editing this test. |
||
| // focus stop on purpose, and promoting it would add an empty-ish landmark and | ||
| // a permanent tab stop on content nothing can interact with. | ||
| const tags = preTags(await renderToString(Home())); | ||
| const unnamed = tags.filter((t) => !nameOf(t)); | ||
| assert.ok(unnamed.length > 0, 'the home page still renders an unnamed code block'); | ||
|
Collaborator
Author
There was a problem hiding this comment. This documents one block and observes a set. It passes if the usage block gains a name while any other unnamed block exists, which is exactly when the property it describes stops being observed, and it reds with this message if that block is legitimately named. |
||
| for (const tag of unnamed) { | ||
| assert.doesNotMatch(tag, /\brole="region"/, 'an unnamed block claims a landmark role it has no name for'); | ||
| assert.doesNotMatch(tag, /\btabindex=/, 'an unnamed, non-scrolling block takes a tab stop for nothing'); | ||
| } | ||
| }); | ||
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is not the revert I called it. main carries aria-label="like-button usage" on this block, so the PR's net effect here is deleting an accessible name the block already had, while the same PR resolves the identical construct on four other blocks by adding a role instead. Verified against main.