Skip to content
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

a11y: test Paragraph #372

Merged
merged 2 commits into from
Dec 12, 2024
Merged

a11y: test Paragraph #372

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
f775549
docs: tested all sc's
MarjonBakker Dec 12, 2024
c379e3c
fix: add missing WCAG success criteria
Robbert Dec 12, 2024
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
204 changes: 19 additions & 185 deletions packages/storybook-test/src/WcagAudit.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,241 +1,98 @@
/** Success criterium 1.1.1 */
export const WCAG22_111_NON_TEXT_CONTENT = 'https://www.w3.org/TR/WCAG22/#non-text-content';

/** Success criterium 1.2.1 */
export const WCAG22_121_AUDIO_ONLY_AND_VIDEO_ONLY_PRERECORDED =
'https://www.w3.org/TR/WCAG22/#audio-only-and-video-only-prerecorded';

/** Success criterium 1.2.2 */
export const WCAG22_122_CAPTIONS_PRERECORDED = 'https://www.w3.org/TR/WCAG22/#captions-prerecorded';

/** Success criterium 1.2.3 */
export const WCAG22_123_AUDIO_DESCRIPTION_OR_MEDIA_ALTERNATIVE_PRERECORDED =
'https://www.w3.org/TR/WCAG22/#audio-description-or-media-alternative-prerecorded';

/** Success criterium 1.2.4 */
export const WCAG22_124_CAPTIONS_LIVE = 'https://www.w3.org/TR/WCAG22/#captions-live';

/** Success criterium 1.2.5 */
export const WCAG22_125_AUDIO_DESCRIPTION_PRERECORDED = 'https://www.w3.org/TR/WCAG22/#audio-description-prerecorded';

/** Success criterium 1.2.6 */
export const WCAG22_126_SIGN_LANGUAGE_PRERECORDED = 'https://www.w3.org/TR/WCAG22/#sign-language-prerecorded';

/** Success criterium 1.2.7 */
export const WCAG22_127_EXTENDED_AUDIO_DESCRIPTION_PRERECORDED =
'https://www.w3.org/TR/WCAG22/#extended-audio-description-prerecorded';

/** Success criterium 1.2.8 */
export const WCAG22_128_MEDIA_ALTERNATIVE_PRERECORDED = 'https://www.w3.org/TR/WCAG22/#media-alternative-prerecorded';

/** Success criterium 1.2.9 */
export const WCAG22_129_AUDIO_ONLY_LIVE = 'https://www.w3.org/TR/WCAG22/#audio-only-live';

/** Success criterium 1.3.1 */
export const WCAG22_131_INFO_AND_RELATIONSHIPS = 'https://www.w3.org/TR/WCAG22/#info-and-relationships';

/** Success criterium 1.3.2 */
export const WCAG22_132_MEANINGFUL_SEQUENCE = 'https://www.w3.org/TR/WCAG22/#meaningful-sequence';

/** Success criterium 1.3.3 */
export const WCAG22_133_SENSORY_CHARACTERISTICS = 'https://www.w3.org/TR/WCAG22/#sensory-characteristics';

/** Success criterium 1.3.4 */
export const WCAG22_134_ORIENTATION = 'https://www.w3.org/TR/WCAG22/#orientation';

/** Success criterium 1.3.5 */
export const WCAG22_135_IDENTIFY_INPUT_PURPOSE = 'https://www.w3.org/TR/WCAG22/#identify-input-purpose';

/** Success criterium 1.3.6 */
export const WCAG22_136_IDENTIFY_PURPOSE = 'https://www.w3.org/TR/WCAG22/#identify-purpose';

/** Success criterium 1.4.1 */
export const WCAG22_141_USE_OF_COLOR = 'https://www.w3.org/TR/WCAG22/#use-of-color';

/** Success criterium 1.4.2 */
export const WCAG22_142_AUDIO_CONTROL = 'https://www.w3.org/TR/WCAG22/#audio-control';

/** Success criterium 1.4.3 */
export const WCAG22_143_CONTRAST_MINIMUM = 'https://www.w3.org/TR/WCAG22/#contrast-minimum';

/** Success criterium 1.4.4 */
export const WCAG22_144_RESIZE_TEXT = 'https://www.w3.org/TR/WCAG22/#resize-text';

/** Success criterium 1.4.5 */
export const WCAG22_145_IMAGES_OF_TEXT = 'https://www.w3.org/TR/WCAG22/#images-of-text';

/** Success criterium 1.4.6 */
export const WCAG22_146_CONTRAST_ENHANCED = 'https://www.w3.org/TR/WCAG22/#contrast-enhanced';

/** Success criterium 1.4.7 */
export const WCAG22_147_LOW_OR_NO_BACKGROUND_AUDIO = 'https://www.w3.org/TR/WCAG22/#low-or-no-background-audio';

/** Success criterium 1.4.8 */
export const WCAG22_148_VISUAL_PRESENTATION = 'https://www.w3.org/TR/WCAG22/#visual-presentation';

/** Success criterium 1.4.9 */
export const WCAG22_149_IMAGES_OF_TEXT_NO_EXCEPTION = 'https://www.w3.org/TR/WCAG22/#images-of-text-no-exception';

/** Success criterium 1.4.10 */
export const WCAG22_1410_REFLOW = 'https://www.w3.org/TR/WCAG22/#reflow';

/** Success criterium 1.4.11 */
export const WCAG22_1411_NON_TEXT_CONTRAST = 'https://www.w3.org/TR/WCAG22/#non-text-contrast';

/** Success criterium 1.4.12 */
export const WCAG22_1412_TEXT_SPACING = 'https://www.w3.org/TR/WCAG22/#text-spacing';

/** Success criterium 1.4.13 */
export const WCAG22_1413_CONTENT_ON_HOVER_OR_FOCUS = 'https://www.w3.org/TR/WCAG22/#content-on-hover-or-focus';

/** Success criterium 2.1.1 */
export const WCAG22_211_KEYBOARD = 'https://www.w3.org/TR/WCAG22/#keyboard';

/** Success criterium 2.1.2 */
export const WCAG22_212_NO_KEYBOARD_TRAP = 'https://www.w3.org/TR/WCAG22/#no-keyboard-trap';

/** Success criterium 2.1.3 */
export const WCAG22_213_KEYBOARD_NO_EXCEPTION = 'https://www.w3.org/TR/WCAG22/#keyboard-no-exception';

/** Success criterium 2.1.4 */
export const WCAG22_214_CHARACTER_KEY_SHORTCUTS = 'https://www.w3.org/TR/WCAG22/#character-key-shortcuts';

/** Success criterium 2.2.1 */
export const WCAG22_221_TIMING_ADJUSTABLE = 'https://www.w3.org/TR/WCAG22/#timing-adjustable';

/** Success criterium 2.2.2 */
export const WCAG22_222_PAUSE_STOP_HIDE = 'https://www.w3.org/TR/WCAG22/#pause-stop-hide';

/** Success criterium 2.2.3 */
export const WCAG22_223_NO_TIMING = 'https://www.w3.org/TR/WCAG22/#no-timing';

/** Success criterium 2.2.4 */
export const WCAG22_224_INTERRUPTIONS = 'https://www.w3.org/TR/WCAG22/#interruptions';

/** Success criterium 2.2.5 */
export const WCAG22_225_RE_AUTHENTICATING = 'https://www.w3.org/TR/WCAG22/#re-authenticating';

/** Success criterium 2.2.6 */
export const WCAG22_226_TIMEOUTS = 'https://www.w3.org/TR/WCAG22/#timeouts';

/** Success criterium 2.3.1 */
export const WCAG22_231_THREE_FLASHES_OR_BELOW_THRESHOLD =
'https://www.w3.org/TR/WCAG22/#three-flashes-or-below-threshold';

/** Success criterium 2.3.2 */
export const WCAG22_232_THREE_FLASHES = 'https://www.w3.org/TR/WCAG22/#three-flashes';

/** Success criterium 2.3.3 */
export const WCAG22_233_ANIMATION_FROM_INTERACTIONS = 'https://www.w3.org/TR/WCAG22/#animation-from-interactions';

/** Success criterium 2.4.1 */
export const WCAG22_241_BYPASS_BLOCKS = 'https://www.w3.org/TR/WCAG22/#bypass-blocks';

/** Success criterium 2.4.2 */
export const WCAG22_242_PAGE_TITLED = 'https://www.w3.org/TR/WCAG22/#page-titled';

/** Success criterium 2.4.3 */
export const WCAG22_243_FOCUS_ORDER = 'https://www.w3.org/TR/WCAG22/#focus-order';

/** Success criterium 2.4.4 */
export const WCAG22_244_LINK_PURPOSE_IN_CONTEXT = 'https://www.w3.org/TR/WCAG22/#link-purpose-in-context';

/** Success criterium 2.4.5 */
export const WCAG22_245_MULTIPLE_WAYS = 'https://www.w3.org/TR/WCAG22/#multiple-ways';

/** Success criterium 2.4.6 */
export const WCAG22_246_HEADINGS_AND_LABELS = 'https://www.w3.org/TR/WCAG22/#headings-and-labels';

/** Success criterium 2.4.7 */
export const WCAG22_247_FOCUS_VISIBLE = 'https://www.w3.org/TR/WCAG22/#focus-visible';

/** Success criterium 2.4.8 */
export const WCAG22_248_LOCATION = 'https://www.w3.org/TR/WCAG22/#location';

/** Success criterium 2.4.9 */
export const WCAG22_249_LINK_PURPOSE_LINK_ONLY = 'https://www.w3.org/TR/WCAG22/#link-purpose-link-only';

/** Success criterium 2.4.10 */
export const WCAG22_2410_SECTION_HEADINGS = 'https://www.w3.org/TR/WCAG22/#section-headings';

/** Success criterium 2.5.1 */
export const WCAG22_251_POINTER_GESTURES = 'https://www.w3.org/TR/WCAG22/#pointer-gestures';

/** Success criterium 2.5.2 */
export const WCAG22_252_POINTER_CANCELLATION = 'https://www.w3.org/TR/WCAG22/#pointer-cancellation';

/** Success criterium 2.5.3 */
export const WCAG22_253_LABEL_IN_NAME = 'https://www.w3.org/TR/WCAG22/#label-in-name';

/** Success criterium 2.5.4 */
export const WCAG22_254_MOTION_ACTUATION = 'https://www.w3.org/TR/WCAG22/#motion-actuation';

/** Success criterium 2.5.5 */
export const WCAG22_255_TARGET_SIZE = 'https://www.w3.org/TR/WCAG22/#target-size';

/** Success criterium 2.5.6 */
export const WCAG22_256_CONCURRENT_INPUT_MECHANISMS = 'https://www.w3.org/TR/WCAG22/#concurrent-input-mechanisms';

/** Success criterium 3.1.1 */
export const WCAG22_311_LANGUAGE_OF_PAGE = 'https://www.w3.org/TR/WCAG22/#language-of-page';

/** Success criterium 3.1.2 */
export const WCAG22_312_LANGUAGE_OF_PARTS = 'https://www.w3.org/TR/WCAG22/#language-of-parts';

/** Success criterium 3.1.3 */
export const WCAG22_313_UNUSUAL_WORDS = 'https://www.w3.org/TR/WCAG22/#unusual-words';

/** Success criterium 3.1.4 */
export const WCAG22_314_ABBREVIATIONS = 'https://www.w3.org/TR/WCAG22/#abbreviations';

/** Success criterium 3.1.5 */
export const WCAG22_315_READING_LEVEL = 'https://www.w3.org/TR/WCAG22/#reading-level';

/** Success criterium 3.1.6 */
export const WCAG22_316_PRONUNCIATION = 'https://www.w3.org/TR/WCAG22/#pronunciation';

/** Success criterium 3.2.1 */
export const WCAG22_321_ON_FOCUS = 'https://www.w3.org/TR/WCAG22/#on-focus';

/** Success criterium 3.2.2 */
export const WCAG22_322_ON_INPUT = 'https://www.w3.org/TR/WCAG22/#on-input';

/** Success criterium 3.2.3 */
export const WCAG22_323_CONSISTENT_NAVIGATION = 'https://www.w3.org/TR/WCAG22/#consistent-navigation';

/** Success criterium 3.2.4 */
export const WCAG22_324_CONSISTENT_IDENTIFICATION = 'https://www.w3.org/TR/WCAG22/#consistent-identification';

/** Success criterium 3.2.5 */
export const WCAG22_325_CHANGE_ON_REQUEST = 'https://www.w3.org/TR/WCAG22/#change-on-request';

/** Success criterium 3.3.1 */
export const WCAG22_331_ERROR_IDENTIFICATION = 'https://www.w3.org/TR/WCAG22/#error-identification';

/** Success criterium 3.3.2 */
export const WCAG22_332_LABELS_OR_INSTRUCTIONS = 'https://www.w3.org/TR/WCAG22/#labels-or-instructions';

/** Success criterium 3.3.3 */
export const WCAG22_333_ERROR_SUGGESTION = 'https://www.w3.org/TR/WCAG22/#error-suggestion';

/** Success criterium 3.3.4 */
export const WCAG22_334_ERROR_PREVENTION_LEGAL_FINANCIAL_DATA =
'https://www.w3.org/TR/WCAG22/#error-prevention-legal-financial-data';

/** Success criterium 3.3.5 */
export const WCAG22_335_HELP = 'https://www.w3.org/TR/WCAG22/#help';

/** Success criterium 3.3.6 */
export const WCAG22_336_ERROR_PREVENTION_ALL = 'https://www.w3.org/TR/WCAG22/#error-prevention-all';

/** Success criterium 4.1.1 */
export const WCAG22_411_PARSING = 'https://www.w3.org/TR/WCAG22/#parsing';

/** Success criterium 4.1.2 */
export const WCAG22_412_NAME_ROLE_VALUE = 'https://www.w3.org/TR/WCAG22/#name-role-value';

/** Success criterium 4.1.3 */
export const WCAG22_413_STATUS_MESSAGES = 'https://www.w3.org/TR/WCAG22/#status-messages';
export const WCAG22_2411_FOCUS_NOT_OBSCURED_MINIMUM = 'https://www.w3.org/TR/WCAG22/#focus-not-obscured-minimum';
export const WCAG22_2412_FOCUS_NOT_OBSCURED_ENHANCED = 'https://www.w3.org/TR/WCAG22/#focus-not-obscured-enhanced';
export const WCAG22_2413_FOCUS_APPEARANCE = 'https://www.w3.org/TR/WCAG22/#focus-appearance';
export const WCAG22_257_DRAGGING_MOVEMENTS = 'https://www.w3.org/TR/WCAG22/#dragging-movements';
export const WCAG22_258_TARGET_SIZE_MINIMUM = 'https://www.w3.org/TR/WCAG22/#target-size-minimum';
export const WCAG22_326_CONSISTENT_HELP = 'https://www.w3.org/TR/WCAG22/#consistent-help';
export const WCAG22_337_REDUNDANT_ENTRY = 'https://www.w3.org/TR/WCAG22/#redundant-entry';
export const WCAG22_338_ACCESSIBLE_AUTHENTICATION_MINIMUM =
'https://www.w3.org/TR/WCAG22/#accessible-authentication-minimum';
export const WCAG22_339_ACCESSIBLE_AUTHENTICATION_ENHANCED =
'https://www.w3.org/TR/WCAG22/#accessible-authentication-enhanced';

export const WCAG22_411_PARSING = 'https://www.w3.org/TR/WCAG22/#parsing';

export const WCAG22_AA_LEVEL = [
WCAG22_111_NON_TEXT_CONTENT,
Expand All @@ -244,78 +101,55 @@ export const WCAG22_AA_LEVEL = [
WCAG22_123_AUDIO_DESCRIPTION_OR_MEDIA_ALTERNATIVE_PRERECORDED,
WCAG22_124_CAPTIONS_LIVE,
WCAG22_125_AUDIO_DESCRIPTION_PRERECORDED,
WCAG22_126_SIGN_LANGUAGE_PRERECORDED,
WCAG22_127_EXTENDED_AUDIO_DESCRIPTION_PRERECORDED,
WCAG22_128_MEDIA_ALTERNATIVE_PRERECORDED,
WCAG22_129_AUDIO_ONLY_LIVE,
WCAG22_131_INFO_AND_RELATIONSHIPS,
WCAG22_132_MEANINGFUL_SEQUENCE,
WCAG22_133_SENSORY_CHARACTERISTICS,
WCAG22_134_ORIENTATION,
WCAG22_135_IDENTIFY_INPUT_PURPOSE,
WCAG22_136_IDENTIFY_PURPOSE,
WCAG22_141_USE_OF_COLOR,
WCAG22_142_AUDIO_CONTROL,
WCAG22_143_CONTRAST_MINIMUM,
WCAG22_144_RESIZE_TEXT,
WCAG22_145_IMAGES_OF_TEXT,
WCAG22_146_CONTRAST_ENHANCED,
WCAG22_147_LOW_OR_NO_BACKGROUND_AUDIO,
WCAG22_148_VISUAL_PRESENTATION,
WCAG22_149_IMAGES_OF_TEXT_NO_EXCEPTION,
WCAG22_1410_REFLOW,
WCAG22_1411_NON_TEXT_CONTRAST,
WCAG22_1412_TEXT_SPACING,
WCAG22_1413_CONTENT_ON_HOVER_OR_FOCUS,
WCAG22_211_KEYBOARD,
WCAG22_212_NO_KEYBOARD_TRAP,
WCAG22_213_KEYBOARD_NO_EXCEPTION,
WCAG22_214_CHARACTER_KEY_SHORTCUTS,
WCAG22_221_TIMING_ADJUSTABLE,
WCAG22_222_PAUSE_STOP_HIDE,
WCAG22_223_NO_TIMING,
WCAG22_224_INTERRUPTIONS,
WCAG22_225_RE_AUTHENTICATING,
WCAG22_226_TIMEOUTS,
WCAG22_231_THREE_FLASHES_OR_BELOW_THRESHOLD,
WCAG22_232_THREE_FLASHES,
WCAG22_233_ANIMATION_FROM_INTERACTIONS,
WCAG22_241_BYPASS_BLOCKS,
WCAG22_242_PAGE_TITLED,
WCAG22_243_FOCUS_ORDER,
WCAG22_244_LINK_PURPOSE_IN_CONTEXT,
WCAG22_245_MULTIPLE_WAYS,
WCAG22_246_HEADINGS_AND_LABELS,
WCAG22_247_FOCUS_VISIBLE,
WCAG22_248_LOCATION,
WCAG22_249_LINK_PURPOSE_LINK_ONLY,
WCAG22_2410_SECTION_HEADINGS,
WCAG22_251_POINTER_GESTURES,
WCAG22_252_POINTER_CANCELLATION,
WCAG22_253_LABEL_IN_NAME,
WCAG22_254_MOTION_ACTUATION,
WCAG22_255_TARGET_SIZE,
WCAG22_256_CONCURRENT_INPUT_MECHANISMS,
WCAG22_311_LANGUAGE_OF_PAGE,
WCAG22_312_LANGUAGE_OF_PARTS,
WCAG22_313_UNUSUAL_WORDS,
WCAG22_314_ABBREVIATIONS,
WCAG22_315_READING_LEVEL,
WCAG22_316_PRONUNCIATION,
WCAG22_321_ON_FOCUS,
WCAG22_322_ON_INPUT,
WCAG22_323_CONSISTENT_NAVIGATION,
WCAG22_324_CONSISTENT_IDENTIFICATION,
WCAG22_325_CHANGE_ON_REQUEST,
WCAG22_331_ERROR_IDENTIFICATION,
WCAG22_332_LABELS_OR_INSTRUCTIONS,
WCAG22_333_ERROR_SUGGESTION,
WCAG22_334_ERROR_PREVENTION_LEGAL_FINANCIAL_DATA,
WCAG22_335_HELP,
WCAG22_336_ERROR_PREVENTION_ALL,
WCAG22_411_PARSING,
WCAG22_412_NAME_ROLE_VALUE,
WCAG22_413_STATUS_MESSAGES,
WCAG22_2411_FOCUS_NOT_OBSCURED_MINIMUM,
WCAG22_257_DRAGGING_MOVEMENTS,
WCAG22_258_TARGET_SIZE_MINIMUM,
WCAG22_326_CONSISTENT_HELP,
WCAG22_337_REDUNDANT_ENTRY,
WCAG22_338_ACCESSIBLE_AUTHENTICATION_MINIMUM,
] as const;

const enumGuard =
Expand Down
14 changes: 4 additions & 10 deletions packages/storybook-test/stories/paragraph/paragraph.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,9 +121,8 @@ const meta = {
baseline: 'http://nldesignsystem.nl/wcag/baseline#2024-12',
cannotTell: [],
date: '2024-12-12',
fail: [],
notApplicable: [WCAG22_121_AUDIO_ONLY_AND_VIDEO_ONLY_PRERECORDED],
notTested: [
fail: [WCAG22_144_RESIZE_TEXT, WCAG22_1410_REFLOW, WCAG22_1412_TEXT_SPACING],
notApplicable: [
WCAG22_111_NON_TEXT_CONTENT,
WCAG22_121_AUDIO_ONLY_AND_VIDEO_ONLY_PRERECORDED,
WCAG22_122_CAPTIONS_PRERECORDED,
Expand All @@ -134,24 +133,19 @@ const meta = {
WCAG22_127_EXTENDED_AUDIO_DESCRIPTION_PRERECORDED,
WCAG22_128_MEDIA_ALTERNATIVE_PRERECORDED,
WCAG22_129_AUDIO_ONLY_LIVE,
WCAG22_131_INFO_AND_RELATIONSHIPS,
WCAG22_132_MEANINGFUL_SEQUENCE,
WCAG22_133_SENSORY_CHARACTERISTICS,
WCAG22_134_ORIENTATION,
WCAG22_135_IDENTIFY_INPUT_PURPOSE,
WCAG22_136_IDENTIFY_PURPOSE,
WCAG22_141_USE_OF_COLOR,
WCAG22_142_AUDIO_CONTROL,
WCAG22_143_CONTRAST_MINIMUM,
WCAG22_144_RESIZE_TEXT,
WCAG22_145_IMAGES_OF_TEXT,
WCAG22_146_CONTRAST_ENHANCED,
WCAG22_147_LOW_OR_NO_BACKGROUND_AUDIO,
WCAG22_148_VISUAL_PRESENTATION,
WCAG22_149_IMAGES_OF_TEXT_NO_EXCEPTION,
WCAG22_1410_REFLOW,
WCAG22_1411_NON_TEXT_CONTRAST,
WCAG22_1412_TEXT_SPACING,
WCAG22_1413_CONTENT_ON_HOVER_OR_FOCUS,
WCAG22_211_KEYBOARD,
WCAG22_212_NO_KEYBOARD_TRAP,
Expand Down Expand Up @@ -183,7 +177,6 @@ const meta = {
WCAG22_255_TARGET_SIZE,
WCAG22_256_CONCURRENT_INPUT_MECHANISMS,
WCAG22_311_LANGUAGE_OF_PAGE,
WCAG22_312_LANGUAGE_OF_PARTS,
WCAG22_313_UNUSUAL_WORDS,
WCAG22_314_ABBREVIATIONS,
WCAG22_315_READING_LEVEL,
Expand All @@ -203,7 +196,8 @@ const meta = {
WCAG22_412_NAME_ROLE_VALUE,
WCAG22_413_STATUS_MESSAGES,
],
pass: [WCAG22_131_INFO_AND_RELATIONSHIPS],
notTested: [],
pass: [WCAG22_131_INFO_AND_RELATIONSHIPS, WCAG22_312_LANGUAGE_OF_PARTS, WCAG22_143_CONTRAST_MINIMUM],
},
},
title: 'Componenten/Paragraph',
Expand Down
Loading