Skip to content

Breaks data format: Require one description per @break, add title field #117

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
kfranqueiro wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Breaks data format: Require one description per @break, add title field #117

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6fb5014
Remove support for multiple break descriptions in one entry
kfranqueiro Mar 10, 2026
18c31c3
Add title field to breaks collection
kfranqueiro Mar 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
77 changes: 37 additions & 40 deletions site/src/components/BreaksList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,8 +81,7 @@ export const BreaksList = ({ breaks, breakProcessesMap }: BreaksListProps) => {
if (!query) return true;

if (caseInsensitiveIncludes(data.location.id, query)) return true;
if (data.description.find((d) => caseInsensitiveIncludes(d, query)))
return true;
if (caseInsensitiveIncludes(data.description, query)) return true;

if (version === "2")
return !!data.wcag2!.find(
Expand Down Expand Up @@ -217,47 +216,45 @@ export const BreaksList = ({ breaks, breakProcessesMap }: BreaksListProps) => {
/>
</dt>
)}
{brk.description.map((description) => (
<dd
id={slugger.slug(
`${name}-${brk[wcagProp]?.replace(/\./g, "-")}`
)}
>
<a href={`${museumBaseUrl.slice(0, -1)}${brk.href}`}>
{brk.href}
</a>
:{" "}
<span dangerouslySetInnerHTML={{ __html: description }} />
{brk.discussionItems &&
(brk.discussionItems.length === 1 ? (
<dd
id={slugger.slug(
`${name}-${brk[wcagProp]?.replace(/\./g, "-")}`
)}
>
<a href={`${museumBaseUrl.slice(0, -1)}${brk.href}`}>
{brk.href}
</a>
:{" "}
<span
dangerouslySetInnerHTML={{ __html: brk.description }}
/>
{brk.discussionItems &&
(brk.discussionItems.length === 1 ? (
<div>
<strong class="discussion-item">
Discussion item:
</strong>{" "}
<span
dangerouslySetInnerHTML={{
__html: brk.discussionItems[0],
}}
/>
</div>
) : (
<>
<div>
<strong class="discussion-item">
Discussion item:
</strong>{" "}
<span
dangerouslySetInnerHTML={{
__html: brk.discussionItems[0],
}}
/>
Discussion items:
</strong>
</div>
) : (
<>
<div>
<strong class="discussion-item">
Discussion items:
</strong>
</div>
<ul>
{brk.discussionItems.map((item) => (
<li
dangerouslySetInnerHTML={{ __html: item }}
/>
))}
</ul>
</>
))}
</dd>
))}
<ul>
{brk.discussionItems.map((item) => (
<li dangerouslySetInnerHTML={{ __html: item }} />
))}
</ul>
</>
))}
</dd>
</>
))}
</dl>
Expand Down
12 changes: 9 additions & 3 deletions site/src/components/Carousel.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,9 +46,15 @@ const collectionMap = {
* @break
* wcag2: 2.2.2
* wcag3: No visual motion
* description:
* - The carousel does not include controls to stop moving and updating.
* - The promotional video at the bottom of the home page loops infinitely and does not have controls to pause.
* description: |
* The carousel does not include controls to stop moving and updating.
*/
/**
* @break
* wcag2: 2.2.2
* wcag3: No visual motion
* description: |
* The promotional video at the bottom of the home page loops infinitely and does not have controls to pause.
*/
}
<div class:list={["carousel", getMode()]}>
Expand Down
11 changes: 8 additions & 3 deletions site/src/components/Header.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,14 @@ const { searchMode } = Astro.props;
* @break
* wcag2: 1.4.10
* wcag3: Text reflow supported
* description:
* - When zoomed, the header text moves off the background.
* - At 400% zoom, the cookie notice occupies more than the full screen and cannot be scrolled.
* description: When zoomed, the header text moves off the background.
*/
/**
* @break
* wcag2: 1.4.10
* wcag3: Text reflow supported
* description: |
* At 400% zoom, the cookie notice occupies more than the full screen and cannot be scrolled.
*/
}
<header>
Expand Down
3 changes: 2 additions & 1 deletion site/src/content.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,7 +184,8 @@ export const collections = {
// in order for typings for references and transforms to work
schema: z
.object({
description: singleOrArray(z.string()).transform(transformToArray),
title: z.string().optional(),
description: z.string(),
discussionItems: z.array(z.string()).nonempty().optional(),
href: z.string().regex(/^(\/|#|$)/),
location: reference("breakSections"),
Expand Down
24 changes: 18 additions & 6 deletions site/src/pages/museum/collections/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,12 +82,24 @@ const headerNavLinks = filterNavTreeLinks(
* @break
* wcag2: 2.4.3
* wcag3: Focus order meaningful
* description:
* - The collection links have explicit tabindex attributes, causing them to come before anything else in the page.
* - The links in the "See More" section are not included in the explicit order, meaning focus tabs to each collection link,
* then header items, then the "See More" links, then the footer.
* - The explicit tab order is optimized specifically for the widest layout,
* making it incorrect even within the collections list on narrower viewports.
* description: |
* The collection links have explicit tabindex attributes, causing them to come before anything else in the page.
*/
/**
* @break
* wcag2: 2.4.3
* wcag3: Focus order meaningful
* description: |
* The links in the "See More" section are not included in the explicit order, meaning focus tabs to each collection link,
* then header items, then the "See More" links, then the footer.
*/
/**
* @break
* wcag2: 2.4.3
* wcag3: Focus order meaningful
* description: |
* The explicit tab order is optimized specifically for the widest layout,
* making it incorrect even within the collections list on narrower viewports.
*/
---

Expand Down
17 changes: 13 additions & 4 deletions site/src/pages/museum/early-home-computers-event.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,10 +108,19 @@ import vic20 from "@/assets/images/exhibits/early-home-computers/vic20.webp";
* href: "#zx81"
* wcag2: 1.4.11
* wcag3: Interactive element contrast sufficient
* description:
* - The links in the small text in the cards are the same color as non-link text
* and have underlines that have a contrast of less than 3:1 with the page background.
* - Scrollbar color contrast is less than 3:1 in browsers that support styling scrollbars.
* description: |
* The links in the small text in the cards are the same color as non-link text
* and have underlines that have a contrast of less than 3:1 with the page background.
* discussionItems:
* - Does this fail WCAG 3 Control contrast? If not, what requirement does it fail?
*/
/**
* @break
* href: "#zx81"
* wcag2: 1.4.11
* wcag3: Interactive element contrast sufficient
* description: |
* Scrollbar color contrast is less than 3:1 in browsers that support styling scrollbars.
* discussionItems:
* - Does this fail WCAG 3 Control contrast? If not, what requirement does it fail?
*/
Expand Down
15 changes: 10 additions & 5 deletions site/src/pages/museum/gift-shop/[category]/[product].astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,11 +71,16 @@ const { Content } = await render(product);
/**
* @break
* wcag3: Focus placed
* description:
* - Upon entering an invalid quantity (e.g. 0), pressing add to cart, then dismissing the modal,
* focus is not restored to the add to cart button.
* - Upon entering an invalid quantity (e.g. 0),
* the modal that appears does not grab and trap focus.
* description: |
* Upon entering an invalid quantity (e.g. 0), pressing add to cart, then dismissing the modal,
* focus is not restored to the add to cart button.
*/
/**
* @break
* wcag3: Focus placed
* description: |
* Upon entering an invalid quantity (e.g. 0),
* the modal that appears does not grab and trap focus.
* discussionItems:
* - Focus placed does not seem to actually cover focus _into_ a modal, only returning from it?
* What requirement would be relevant to failing to move focus inside a modal when it opens?
Expand Down
2 changes: 1 addition & 1 deletion site/src/pages/museum/gift-shop/checkout/payment.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import ShopLayout from "@/layouts/ShopLayout.astro";
* wcag2:
* - 3.3.4
* - 3.3.6
* description:
* description: |
* There is no confirmation step after entering payment information.
*/
}
Expand Down
6 changes: 2 additions & 4 deletions site/src/pages/museum/help.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,12 @@ import Layout from "@/layouts/Layout.astro";
/**
* @break
* wcag3: Common words used
* description:
* - No definitions are provided for uncommon words found in the page.
* description: No definitions are provided for uncommon words found in the page.
*/
/**
* @break
* wcag3: Non-literal language explained
* description:
* - No explanations are included for idioms and metaphors used on the page.
* description: No explanations are included for idioms and metaphors used on the page.
*/
/**
* @break
Expand Down
16 changes: 10 additions & 6 deletions site/src/pages/museum/register.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,13 +77,17 @@ import Layout from "@/layouts/Layout.astro";
* @break
* href: "#prove-youre-a-human"
* wcag3: Interactive element contrast sufficient
* description:
* - The CAPTCHA field has an invisible text cursor/caret.
* - |
* The CAPTCHA field is initially empty and indicated only by a
* low-contrast underline, making its target area ambiguous.
* description: The CAPTCHA field has an invisible text cursor/caret.
* discussionItems:
* - Does the invisible text cursor/caret fail INteractive element contrast?
* - Does the invisible text cursor/caret fail Interactive element contrast?
*/
/**
* @break
* href: "#prove-youre-a-human"
* wcag3: Interactive element contrast sufficient
* description: |
* The CAPTCHA field is initially empty and indicated only by a
* low-contrast underline, making its target area ambiguous.
*/
}
<label
Expand Down
Loading