37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
'use client';
|
|
|
|
import {VStack} from '@astryxdesign/core/Layout';
|
|
import {Heading} from '@astryxdesign/core/Text';
|
|
import {VisuallyHidden} from '@astryxdesign/core/VisuallyHidden';
|
|
|
|
/**
|
|
* A labelled region wrapping a grid of entity cards.
|
|
*
|
|
* The card grids (stores, rewards, staff) are visually self-explanatory — the
|
|
* filter bar above already says "5 stores" — so they carry no visible heading.
|
|
* But each card titles itself with an h3, and an h3 with no h2 above it is a
|
|
* hole in the document outline: screen-reader users navigating by heading jump
|
|
* from the page title straight into individual cards with no sense of what
|
|
* collection they are in.
|
|
*
|
|
* So the heading exists, and is hidden. This is one of the few legitimate uses
|
|
* of visually-hidden text: the information is genuinely redundant for sighted
|
|
* users and genuinely missing for everyone else.
|
|
*/
|
|
export function CollectionRegion({
|
|
label,
|
|
children,
|
|
}: {
|
|
label: string;
|
|
children: React.ReactNode;
|
|
}) {
|
|
return (
|
|
<VStack gap={4} as="section">
|
|
<VisuallyHidden>
|
|
<Heading level={2}>{label}</Heading>
|
|
</VisuallyHidden>
|
|
{children}
|
|
</VStack>
|
|
);
|
|
}
|