Skip to content

Commit 385fc70

Browse files
RobbertRobbert
committed
docs: improve Heading stories
1 parent 856800e commit 385fc70

File tree

1 file changed

+237
-2
lines changed

1 file changed

+237
-2
lines changed

‎packages/storybook-test/stories/heading/heading.stories.tsx

Lines changed: 237 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,64 @@ import { Heading } from '../../../components-react/heading-react/src/css';
66
import { Paragraph } from '../../../components-react/paragraph-react/src/css';
77
import componentMarkdown from '../../../docs/heading-docs/docs/component.md?raw';
88
import tokens from '../../../tokens/heading-tokens/tokens.json';
9+
import {
10+
WCAG22_111_NON_TEXT_CONTENT,
11+
WCAG22_121_AUDIO_ONLY_AND_VIDEO_ONLY_PRERECORDED,
12+
WCAG22_122_CAPTIONS_PRERECORDED,
13+
WCAG22_123_AUDIO_DESCRIPTION_OR_MEDIA_ALTERNATIVE_PRERECORDED,
14+
WCAG22_124_CAPTIONS_LIVE,
15+
WCAG22_125_AUDIO_DESCRIPTION_PRERECORDED,
16+
WCAG22_131_INFO_AND_RELATIONSHIPS,
17+
WCAG22_132_MEANINGFUL_SEQUENCE,
18+
WCAG22_133_SENSORY_CHARACTERISTICS,
19+
WCAG22_134_ORIENTATION,
20+
WCAG22_135_IDENTIFY_INPUT_PURPOSE,
21+
WCAG22_1410_REFLOW,
22+
WCAG22_1411_NON_TEXT_CONTRAST,
23+
WCAG22_1412_TEXT_SPACING,
24+
WCAG22_1413_CONTENT_ON_HOVER_OR_FOCUS,
25+
WCAG22_141_USE_OF_COLOR,
26+
WCAG22_142_AUDIO_CONTROL,
27+
WCAG22_143_CONTRAST_MINIMUM,
28+
WCAG22_144_RESIZE_TEXT,
29+
WCAG22_145_IMAGES_OF_TEXT,
30+
WCAG22_211_KEYBOARD,
31+
WCAG22_212_NO_KEYBOARD_TRAP,
32+
WCAG22_214_CHARACTER_KEY_SHORTCUTS,
33+
WCAG22_221_TIMING_ADJUSTABLE,
34+
WCAG22_222_PAUSE_STOP_HIDE,
35+
WCAG22_231_THREE_FLASHES_OR_BELOW_THRESHOLD,
36+
WCAG22_2411_FOCUS_NOT_OBSCURED_MINIMUM,
37+
WCAG22_241_BYPASS_BLOCKS,
38+
WCAG22_242_PAGE_TITLED,
39+
WCAG22_243_FOCUS_ORDER,
40+
WCAG22_244_LINK_PURPOSE_IN_CONTEXT,
41+
WCAG22_245_MULTIPLE_WAYS,
42+
WCAG22_246_HEADINGS_AND_LABELS,
43+
WCAG22_247_FOCUS_VISIBLE,
44+
WCAG22_251_POINTER_GESTURES,
45+
WCAG22_252_POINTER_CANCELLATION,
46+
WCAG22_253_LABEL_IN_NAME,
47+
WCAG22_254_MOTION_ACTUATION,
48+
WCAG22_257_DRAGGING_MOVEMENTS,
49+
WCAG22_258_TARGET_SIZE_MINIMUM,
50+
WCAG22_311_LANGUAGE_OF_PAGE,
51+
WCAG22_312_LANGUAGE_OF_PARTS,
52+
WCAG22_321_ON_FOCUS,
53+
WCAG22_322_ON_INPUT,
54+
WCAG22_323_CONSISTENT_NAVIGATION,
55+
WCAG22_324_CONSISTENT_IDENTIFICATION,
56+
WCAG22_326_CONSISTENT_HELP,
57+
WCAG22_331_ERROR_IDENTIFICATION,
58+
WCAG22_332_LABELS_OR_INSTRUCTIONS,
59+
WCAG22_333_ERROR_SUGGESTION,
60+
WCAG22_334_ERROR_PREVENTION_LEGAL_FINANCIAL_DATA,
61+
WCAG22_337_REDUNDANT_ENTRY,
62+
WCAG22_338_ACCESSIBLE_AUTHENTICATION_MINIMUM,
63+
WCAG22_411_PARSING,
64+
WCAG22_412_NAME_ROLE_VALUE,
65+
WCAG22_413_STATUS_MESSAGES,
66+
} from '../../src/WcagTests';
967

1068
const meta = {
1169
argTypes: {
@@ -48,6 +106,67 @@ const meta = {
48106
url: packageJSON.homepage,
49107
},
50108
],
109+
testResult: {
110+
notApplicable: [
111+
WCAG22_111_NON_TEXT_CONTENT,
112+
WCAG22_121_AUDIO_ONLY_AND_VIDEO_ONLY_PRERECORDED,
113+
WCAG22_122_CAPTIONS_PRERECORDED,
114+
WCAG22_123_AUDIO_DESCRIPTION_OR_MEDIA_ALTERNATIVE_PRERECORDED,
115+
WCAG22_124_CAPTIONS_LIVE,
116+
WCAG22_125_AUDIO_DESCRIPTION_PRERECORDED,
117+
WCAG22_131_INFO_AND_RELATIONSHIPS,
118+
WCAG22_132_MEANINGFUL_SEQUENCE,
119+
WCAG22_133_SENSORY_CHARACTERISTICS,
120+
WCAG22_134_ORIENTATION,
121+
WCAG22_135_IDENTIFY_INPUT_PURPOSE,
122+
WCAG22_141_USE_OF_COLOR,
123+
WCAG22_142_AUDIO_CONTROL,
124+
WCAG22_143_CONTRAST_MINIMUM,
125+
WCAG22_144_RESIZE_TEXT,
126+
WCAG22_145_IMAGES_OF_TEXT,
127+
WCAG22_1410_REFLOW,
128+
WCAG22_1411_NON_TEXT_CONTRAST,
129+
WCAG22_1412_TEXT_SPACING,
130+
WCAG22_1413_CONTENT_ON_HOVER_OR_FOCUS,
131+
WCAG22_211_KEYBOARD,
132+
WCAG22_212_NO_KEYBOARD_TRAP,
133+
WCAG22_214_CHARACTER_KEY_SHORTCUTS,
134+
WCAG22_221_TIMING_ADJUSTABLE,
135+
WCAG22_222_PAUSE_STOP_HIDE,
136+
WCAG22_231_THREE_FLASHES_OR_BELOW_THRESHOLD,
137+
WCAG22_241_BYPASS_BLOCKS,
138+
WCAG22_242_PAGE_TITLED,
139+
WCAG22_243_FOCUS_ORDER,
140+
WCAG22_244_LINK_PURPOSE_IN_CONTEXT,
141+
WCAG22_245_MULTIPLE_WAYS,
142+
WCAG22_246_HEADINGS_AND_LABELS,
143+
WCAG22_247_FOCUS_VISIBLE,
144+
WCAG22_251_POINTER_GESTURES,
145+
WCAG22_252_POINTER_CANCELLATION,
146+
WCAG22_253_LABEL_IN_NAME,
147+
WCAG22_254_MOTION_ACTUATION,
148+
WCAG22_311_LANGUAGE_OF_PAGE,
149+
WCAG22_312_LANGUAGE_OF_PARTS,
150+
WCAG22_321_ON_FOCUS,
151+
WCAG22_322_ON_INPUT,
152+
WCAG22_323_CONSISTENT_NAVIGATION,
153+
WCAG22_324_CONSISTENT_IDENTIFICATION,
154+
WCAG22_331_ERROR_IDENTIFICATION,
155+
WCAG22_332_LABELS_OR_INSTRUCTIONS,
156+
WCAG22_333_ERROR_SUGGESTION,
157+
WCAG22_334_ERROR_PREVENTION_LEGAL_FINANCIAL_DATA,
158+
WCAG22_412_NAME_ROLE_VALUE,
159+
WCAG22_413_STATUS_MESSAGES,
160+
WCAG22_2411_FOCUS_NOT_OBSCURED_MINIMUM,
161+
WCAG22_257_DRAGGING_MOVEMENTS,
162+
WCAG22_258_TARGET_SIZE_MINIMUM,
163+
WCAG22_326_CONSISTENT_HELP,
164+
WCAG22_337_REDUNDANT_ENTRY,
165+
WCAG22_338_ACCESSIBLE_AUTHENTICATION_MINIMUM,
166+
],
167+
notTested: [WCAG22_1410_REFLOW, WCAG22_312_LANGUAGE_OF_PARTS],
168+
pass: [],
169+
},
51170
tokens,
52171
},
53172
title: 'Componenten/Heading',
@@ -88,6 +207,17 @@ Bron: [Civiel recht (Nederlands) - Wikipedia](https://nl.wikipedia.org/wiki/Civi
88207
},
89208
},
90209
status: { type: [] },
210+
testResult: {
211+
date: '2024-12-17',
212+
pass: [
213+
WCAG22_131_INFO_AND_RELATIONSHIPS,
214+
WCAG22_1412_TEXT_SPACING,
215+
WCAG22_143_CONTRAST_MINIMUM,
216+
WCAG22_144_RESIZE_TEXT,
217+
WCAG22_246_HEADINGS_AND_LABELS,
218+
WCAG22_411_PARSING,
219+
],
220+
},
91221
},
92222
};
93223

@@ -116,6 +246,17 @@ export const HeadingLevel2: Story = {
116246
},
117247
},
118248
status: { type: [] },
249+
testResult: {
250+
date: '2024-12-17',
251+
pass: [
252+
WCAG22_131_INFO_AND_RELATIONSHIPS,
253+
WCAG22_1412_TEXT_SPACING,
254+
WCAG22_143_CONTRAST_MINIMUM,
255+
WCAG22_144_RESIZE_TEXT,
256+
WCAG22_246_HEADINGS_AND_LABELS,
257+
WCAG22_411_PARSING,
258+
],
259+
},
119260
},
120261
};
121262

@@ -145,6 +286,17 @@ export const HeadingLevel3: Story = {
145286
},
146287
},
147288
status: { type: [] },
289+
testResult: {
290+
date: '2024-12-17',
291+
pass: [
292+
WCAG22_131_INFO_AND_RELATIONSHIPS,
293+
WCAG22_1412_TEXT_SPACING,
294+
WCAG22_143_CONTRAST_MINIMUM,
295+
WCAG22_144_RESIZE_TEXT,
296+
WCAG22_246_HEADINGS_AND_LABELS,
297+
WCAG22_411_PARSING,
298+
],
299+
},
148300
},
149301
};
150302

@@ -177,6 +329,17 @@ export const HeadingLevel4: Story = {
177329
},
178330
},
179331
status: { type: [] },
332+
testResult: {
333+
date: '2024-12-17',
334+
pass: [
335+
WCAG22_131_INFO_AND_RELATIONSHIPS,
336+
WCAG22_1412_TEXT_SPACING,
337+
WCAG22_143_CONTRAST_MINIMUM,
338+
WCAG22_144_RESIZE_TEXT,
339+
WCAG22_246_HEADINGS_AND_LABELS,
340+
WCAG22_411_PARSING,
341+
],
342+
},
180343
},
181344
};
182345

@@ -203,6 +366,17 @@ export const HeadingLevel5: Story = {
203366
},
204367
parameters: {
205368
status: { type: [] },
369+
testResult: {
370+
date: '2024-12-17',
371+
pass: [
372+
WCAG22_131_INFO_AND_RELATIONSHIPS,
373+
WCAG22_1412_TEXT_SPACING,
374+
WCAG22_143_CONTRAST_MINIMUM,
375+
WCAG22_144_RESIZE_TEXT,
376+
WCAG22_246_HEADINGS_AND_LABELS,
377+
WCAG22_411_PARSING,
378+
],
379+
},
206380
},
207381
};
208382

@@ -238,6 +412,17 @@ export const HeadingLevel6: Story = {
238412
},
239413
},
240414
status: { type: [] },
415+
testResult: {
416+
date: '2024-12-17',
417+
pass: [
418+
WCAG22_131_INFO_AND_RELATIONSHIPS,
419+
WCAG22_1412_TEXT_SPACING,
420+
WCAG22_143_CONTRAST_MINIMUM,
421+
WCAG22_144_RESIZE_TEXT,
422+
WCAG22_246_HEADINGS_AND_LABELS,
423+
WCAG22_411_PARSING,
424+
],
425+
},
241426
},
242427
};
243428

@@ -273,6 +458,10 @@ export const HeadingMultiline: Story = {
273458
Records in the United States on November 9, 1999, When the Pawn... was wholly written by Apple, with production
274459
by Jon Brion.
275460
</Paragraph>
461+
<Paragraph>
462+
Upon its release, "When the Pawn..." broke the record for longest album title at 444 characters (previously held
463+
by a volume in "The Best... Album in the World...Ever!"), though this record was subsequently broken.
464+
</Paragraph>
276465
</>
277466
),
278467
globals: {
@@ -289,6 +478,17 @@ Bron: [When the Pawn... - Wikipedia](https://en.wikipedia.org/wiki/When_the_Pawn
289478
},
290479
},
291480
status: { type: [] },
481+
testResult: {
482+
date: '2024-12-17',
483+
pass: [
484+
WCAG22_131_INFO_AND_RELATIONSHIPS,
485+
WCAG22_1412_TEXT_SPACING,
486+
WCAG22_143_CONTRAST_MINIMUM,
487+
WCAG22_144_RESIZE_TEXT,
488+
WCAG22_246_HEADINGS_AND_LABELS,
489+
WCAG22_411_PARSING,
490+
],
491+
},
292492
},
293493
};
294494

@@ -326,13 +526,14 @@ export const HeadingWordBreak: Story = {
326526
export const HeadingArabic: Story = {
327527
name: 'Heading met Arabisch schrift in een Nederlandstalige pagina',
328528
args: {
329-
children: 'عيد الفطر',
529+
children: 'عيد الفطر (Suikerfeest)',
330530
dir: 'rtl',
331531
lang: 'ar',
332-
level: 1,
532+
level: 2,
333533
},
334534
decorators: (Story) => (
335535
<>
536+
<Heading level={1}>Relevante Arabische termen</Heading>
336537
{Story()}
337538
<Paragraph>
338539
Het Suikerfeest, Ramadanfeest of Eid-al-fitr (einde ramadan, Arabisch: عيد الفطر) is een islamitische feestdag
@@ -343,6 +544,7 @@ export const HeadingArabic: Story = {
343544
globals: {
344545
dir: 'ltr',
345546
lang: 'nl',
547+
title: 'Relevante Arabische termen',
346548
},
347549
parameters: {
348550
docs: {
@@ -353,6 +555,17 @@ Het moet mogelijk zijn een andere taal en tekstrichting in te stellen voor een h
353555
},
354556
},
355557
status: { type: [] },
558+
testResult: {
559+
date: '2024-12-17',
560+
pass: [
561+
WCAG22_131_INFO_AND_RELATIONSHIPS,
562+
WCAG22_1412_TEXT_SPACING,
563+
WCAG22_143_CONTRAST_MINIMUM,
564+
WCAG22_144_RESIZE_TEXT,
565+
WCAG22_246_HEADINGS_AND_LABELS,
566+
WCAG22_411_PARSING,
567+
],
568+
},
356569
},
357570
};
358571

@@ -368,6 +581,17 @@ export const HeadingLevelColors: Story = {
368581
story: `Elk heading niveau moet een onderscheidend lettertype en kleur kunnen hebben, door middel van design tokens.`,
369582
},
370583
},
584+
testResult: {
585+
date: '2024-12-17',
586+
pass: [
587+
WCAG22_131_INFO_AND_RELATIONSHIPS,
588+
WCAG22_1412_TEXT_SPACING,
589+
WCAG22_143_CONTRAST_MINIMUM,
590+
WCAG22_144_RESIZE_TEXT,
591+
WCAG22_246_HEADINGS_AND_LABELS,
592+
WCAG22_411_PARSING,
593+
],
594+
},
371595
},
372596
render: () => (
373597
<div
@@ -413,6 +637,17 @@ export const HeadingLevelSize: Story = {
413637
story: `Elk heading niveau moet een eigen font-size en bijpassende line-height kunnen hebben. Vaak geldt: hoe groter de font-size, hoe kleiner de line-height.`,
414638
},
415639
},
640+
testResult: {
641+
date: '2024-12-17',
642+
pass: [
643+
WCAG22_131_INFO_AND_RELATIONSHIPS,
644+
WCAG22_1412_TEXT_SPACING,
645+
WCAG22_143_CONTRAST_MINIMUM,
646+
WCAG22_144_RESIZE_TEXT,
647+
WCAG22_246_HEADINGS_AND_LABELS,
648+
WCAG22_411_PARSING,
649+
],
650+
},
416651
},
417652
render: () => (
418653
<div

0 commit comments

Comments
 (0)