From 86354609606ee7b9180f660e3420973aadda8795 Mon Sep 17 00:00:00 2001 From: brunoschadeck Date: Tue, 6 Aug 2024 14:11:00 +0200 Subject: [PATCH 001/137] docs: adds install commands to readme --- showcases/screen-reader/README.md | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/showcases/screen-reader/README.md b/showcases/screen-reader/README.md index a642cc52a6a..692488feec0 100644 --- a/showcases/screen-reader/README.md +++ b/showcases/screen-reader/README.md @@ -1,14 +1,23 @@ # Screen Automated Reader (ScAR 🦁🔥💀) +## Install + +```shell +npx playwright install +npx @guidepup/setup +``` + +## Start + Start a test with these commands: -## MacOS +### MacOS ```shell npm run test:screen-reader:macos --workspace=react-showcase -- --ui ``` -## Windows +### Windows ```shell npm run test:screen-reader:windows --workspace=react-showcase -- --ui From 319cab3c8335f3ea52271a5184d97073e1bd01e8 Mon Sep 17 00:00:00 2001 From: brunoschadeck Date: Tue, 6 Aug 2024 14:12:31 +0200 Subject: [PATCH 002/137] feat: adds empty guidepup test for accordion --- .../screen-reader/tests/accordion.spec.ts | 22 +++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 showcases/screen-reader/tests/accordion.spec.ts diff --git a/showcases/screen-reader/tests/accordion.spec.ts b/showcases/screen-reader/tests/accordion.spec.ts new file mode 100644 index 00000000000..4bee4695b20 --- /dev/null +++ b/showcases/screen-reader/tests/accordion.spec.ts @@ -0,0 +1,22 @@ +import { getTest, testDefault } from '../default'; + +const test = getTest(); + +test.describe('DBAccordion', () => { + testDefault({ + test, + title: 'should ... (next)', + url: './#/04/accordion?page=behaviour', + async testFn(voiceOver, nvda) { + if (nvda) { + await nvda?.next(); + } + + const screenReader = voiceOver ?? nvda; + await screenReader?.clearSpokenPhraseLog(); + await screenReader?.previous(); + await screenReader?.next(); + await screenReader?.next(); + } + }); +}); From 3574daa91efec2837ef04236f704edf349dac998 Mon Sep 17 00:00:00 2001 From: brunoschadeck Date: Tue, 6 Aug 2024 16:53:24 +0200 Subject: [PATCH 003/137] docs: adds installation guide for playwright and guidepup --- showcases/screen-reader/README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/showcases/screen-reader/README.md b/showcases/screen-reader/README.md index 692488feec0..9b68f653443 100644 --- a/showcases/screen-reader/README.md +++ b/showcases/screen-reader/README.md @@ -7,6 +7,8 @@ npx playwright install npx @guidepup/setup ``` +If errors occur after the automatic setup of guidepup (e.g. no connection to voicover), the setup must be executed manually. [See instructions](https://www.guidepup.dev/docs/guides/manual-voiceover-setup). + ## Start Start a test with these commands: From d5f71bcfcee2556bc44cf1520dfeb058dabe0390 Mon Sep 17 00:00:00 2001 From: brunoschadeck Date: Tue, 6 Aug 2024 16:54:29 +0200 Subject: [PATCH 004/137] test: adds ignore line --- showcases/screen-reader/default.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/showcases/screen-reader/default.ts b/showcases/screen-reader/default.ts index 5e4627cc193..758c72ca4fb 100644 --- a/showcases/screen-reader/default.ts +++ b/showcases/screen-reader/default.ts @@ -41,7 +41,8 @@ const cleanSpeakInstructions = (phraseLog: string[]): string[] => sPhrase.includes('To click') || sPhrase.includes('To select') || sPhrase.includes('To interact') || - sPhrase.includes('Press Control') + sPhrase.includes('Press Control') || + sPhrase.includes('To expand') ) ) .join('. ') From 5368d69f761fe63f1d0b5be5174113e856e5dc52 Mon Sep 17 00:00:00 2001 From: brunoschadeck Date: Tue, 6 Aug 2024 16:55:10 +0200 Subject: [PATCH 005/137] test: adds guidepup tests for accordion --- ...-should-then-close-automatically-next-.txt | 1 + .../macos/webkit/DBAccordion-should-next-.txt | 1 + .../screen-reader/tests/accordion.spec.ts | 35 +++++++++++++++++-- 3 files changed, 35 insertions(+), 2 deletions(-) create mode 100644 showcases/screen-reader/__snapshots__/macos/webkit/DBAccordion-one-item-should-open-then-the-nex-10d9e-he-first-should-then-close-automatically-next-.txt create mode 100644 showcases/screen-reader/__snapshots__/macos/webkit/DBAccordion-should-next-.txt diff --git a/showcases/screen-reader/__snapshots__/macos/webkit/DBAccordion-one-item-should-open-then-the-nex-10d9e-he-first-should-then-close-automatically-next-.txt b/showcases/screen-reader/__snapshots__/macos/webkit/DBAccordion-one-item-should-open-then-the-nex-10d9e-he-first-should-then-close-automatically-next-.txt new file mode 100644 index 00000000000..b4202c707ce --- /dev/null +++ b/showcases/screen-reader/__snapshots__/macos/webkit/DBAccordion-one-item-should-open-then-the-nex-10d9e-he-first-should-then-close-automatically-next-.txt @@ -0,0 +1 @@ +["Item 1 collapsed summary","Item 1 chevron_down expanded summary","Content 1","Item 2 collapsed summary","Item 2 chevron_down expanded summary","Content 2","Item 2 chevron_down expanded summary","Item 1 chevron_down collapsed summary"] diff --git a/showcases/screen-reader/__snapshots__/macos/webkit/DBAccordion-should-next-.txt b/showcases/screen-reader/__snapshots__/macos/webkit/DBAccordion-should-next-.txt new file mode 100644 index 00000000000..ebc4b268df1 --- /dev/null +++ b/showcases/screen-reader/__snapshots__/macos/webkit/DBAccordion-should-next-.txt @@ -0,0 +1 @@ +["Item 1 collapsed summary","Item 1 chevron_down expanded summary","Content 1","Item 2 collapsed summary","Item 2 chevron_down expanded summary","Content 2","Item 2 chevron_down expanded summary","Content 1","Item 1 chevron_down expanded summary"] diff --git a/showcases/screen-reader/tests/accordion.spec.ts b/showcases/screen-reader/tests/accordion.spec.ts index 4bee4695b20..ec4a5e89bfd 100644 --- a/showcases/screen-reader/tests/accordion.spec.ts +++ b/showcases/screen-reader/tests/accordion.spec.ts @@ -5,7 +5,7 @@ const test = getTest(); test.describe('DBAccordion', () => { testDefault({ test, - title: 'should ... (next)', + title: 'should open two items while both remain unfolded (next)', url: './#/04/accordion?page=behaviour', async testFn(voiceOver, nvda) { if (nvda) { @@ -14,9 +14,40 @@ test.describe('DBAccordion', () => { const screenReader = voiceOver ?? nvda; await screenReader?.clearSpokenPhraseLog(); - await screenReader?.previous(); + await screenReader?.next(); // Focus: "item 1" + await screenReader?.act(); // Interact: "item 1" + await screenReader?.next(); // Focus: "content 1" + await screenReader?.next(); // Focus: "item 2" + await screenReader?.act(); // Interact: "item 2" + await screenReader?.next(); // Focus: "content 2" + await screenReader?.previous(); // Focus: "item 2" + await screenReader?.previous(); // Focus: "content 1" + await screenReader?.previous(); // Focus: "item 1" + } + }); + testDefault({ + test, + title: 'one item should open, then the next, whereby the first should then close automatically (next)', + url: './#/04/accordion?page=behaviour', + async testFn(voiceOver, nvda) { + if (nvda) { + await nvda?.next(); + } + + const screenReader = voiceOver ?? nvda; await screenReader?.next(); await screenReader?.next(); + await screenReader?.next(); + await screenReader?.next(); + await screenReader?.clearSpokenPhraseLog(); + await screenReader?.next(); // Focus example "Single","Item 1" + await screenReader?.act(); // Interact: "item 1" + await screenReader?.next(); // Focus: "content 1" + await screenReader?.next(); // Focus: "item 2" + await screenReader?.act(); // Interact: "item 2" + await screenReader?.next(); // Focus: "content 2" + await screenReader?.previous(); // Focus: "item 2" + await screenReader?.previous(); // Focus: "item 1" } }); }); From 7a8724b25a7ee6a8fe73d15a270d7b4a97b9c182 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Wed, 7 Aug 2024 08:21:16 +0200 Subject: [PATCH 006/137] feat: added missing snapshot --- ...on-should-open-two-items-while-both-remain-unfolded-next-.txt | 1 + 1 file changed, 1 insertion(+) create mode 100644 showcases/screen-reader/__snapshots__/macos/webkit/DBAccordion-should-open-two-items-while-both-remain-unfolded-next-.txt diff --git a/showcases/screen-reader/__snapshots__/macos/webkit/DBAccordion-should-open-two-items-while-both-remain-unfolded-next-.txt b/showcases/screen-reader/__snapshots__/macos/webkit/DBAccordion-should-open-two-items-while-both-remain-unfolded-next-.txt new file mode 100644 index 00000000000..1c4e5d35da1 --- /dev/null +++ b/showcases/screen-reader/__snapshots__/macos/webkit/DBAccordion-should-open-two-items-while-both-remain-unfolded-next-.txt @@ -0,0 +1 @@ +["Item 1 collapsed summary","Item 1 chevron_down expanded summary","Content 1","Item 2 collapsed summary","Item 2 chevron_down expanded summary","Content 2","Item 2 chevron_down expanded summary","Content 1","Item 1 chevron_down expanded summary"] \ No newline at end of file From 6e4311ebcaca343bc85a3a88448e2d0602bcaf30 Mon Sep 17 00:00:00 2001 From: brunoschadeck Date: Wed, 7 Aug 2024 13:20:18 +0200 Subject: [PATCH 007/137] fix: removes empty last line --- ...nex-10d9e-he-first-should-then-close-automatically-next-.txt | 2 +- .../__snapshots__/macos/webkit/DBAccordion-should-next-.txt | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) delete mode 100644 showcases/screen-reader/__snapshots__/macos/webkit/DBAccordion-should-next-.txt diff --git a/showcases/screen-reader/__snapshots__/macos/webkit/DBAccordion-one-item-should-open-then-the-nex-10d9e-he-first-should-then-close-automatically-next-.txt b/showcases/screen-reader/__snapshots__/macos/webkit/DBAccordion-one-item-should-open-then-the-nex-10d9e-he-first-should-then-close-automatically-next-.txt index b4202c707ce..792ea13298f 100644 --- a/showcases/screen-reader/__snapshots__/macos/webkit/DBAccordion-one-item-should-open-then-the-nex-10d9e-he-first-should-then-close-automatically-next-.txt +++ b/showcases/screen-reader/__snapshots__/macos/webkit/DBAccordion-one-item-should-open-then-the-nex-10d9e-he-first-should-then-close-automatically-next-.txt @@ -1 +1 @@ -["Item 1 collapsed summary","Item 1 chevron_down expanded summary","Content 1","Item 2 collapsed summary","Item 2 chevron_down expanded summary","Content 2","Item 2 chevron_down expanded summary","Item 1 chevron_down collapsed summary"] +["Item 1 collapsed summary","Item 1 chevron_down expanded summary","Content 1","Item 2 collapsed summary","Item 2 chevron_down expanded summary","Content 2","Item 2 chevron_down expanded summary","Item 1 chevron_down collapsed summary"] \ No newline at end of file diff --git a/showcases/screen-reader/__snapshots__/macos/webkit/DBAccordion-should-next-.txt b/showcases/screen-reader/__snapshots__/macos/webkit/DBAccordion-should-next-.txt deleted file mode 100644 index ebc4b268df1..00000000000 --- a/showcases/screen-reader/__snapshots__/macos/webkit/DBAccordion-should-next-.txt +++ /dev/null @@ -1 +0,0 @@ -["Item 1 collapsed summary","Item 1 chevron_down expanded summary","Content 1","Item 2 collapsed summary","Item 2 chevron_down expanded summary","Content 2","Item 2 chevron_down expanded summary","Content 1","Item 1 chevron_down expanded summary"] From f70d40cfe869688db7b8c9a23af16bcf66cad9b2 Mon Sep 17 00:00:00 2001 From: brunoschadeck Date: Wed, 7 Aug 2024 15:14:42 +0200 Subject: [PATCH 008/137] test: adds guidepup test for checkbox --- ...checkbox-feedback-messages-must-appear.txt | 1 + .../screen-reader/tests/checkbox.spec.ts | 37 +++++++++++++++++++ 2 files changed, 38 insertions(+) create mode 100644 showcases/screen-reader/__snapshots__/macos/webkit/DBCheckbox-should-tick-and-untick-checkbox-feedback-messages-must-appear.txt create mode 100644 showcases/screen-reader/tests/checkbox.spec.ts diff --git a/showcases/screen-reader/__snapshots__/macos/webkit/DBCheckbox-should-tick-and-untick-checkbox-feedback-messages-must-appear.txt b/showcases/screen-reader/__snapshots__/macos/webkit/DBCheckbox-should-tick-and-untick-checkbox-feedback-messages-must-appear.txt new file mode 100644 index 00000000000..316b245830f --- /dev/null +++ b/showcases/screen-reader/__snapshots__/macos/webkit/DBCheckbox-should-tick-and-untick-checkbox-feedback-messages-must-appear.txt @@ -0,0 +1 @@ +["Required * required unticked tickbox","Required *","Required - Indeterminate mixed tickbox","Required *","Required * required unticked tickbox","required ticked Required * TODO: Add a validMessage tickbox","Required *","TODO: Add a validMessage","Required - Indeterminate mixed tickbox","TODO: Add a validMessage","Required *","Required * TODO: Add a validMessage required ticked tickbox","required unticked Required * Select this checkbox tickbox","Required *","Select this checkbox","Required - Indeterminate mixed tickbox"] \ No newline at end of file diff --git a/showcases/screen-reader/tests/checkbox.spec.ts b/showcases/screen-reader/tests/checkbox.spec.ts new file mode 100644 index 00000000000..28131f14912 --- /dev/null +++ b/showcases/screen-reader/tests/checkbox.spec.ts @@ -0,0 +1,37 @@ +import { getTest, testDefault } from '../default'; + +const test = getTest(); + +test.describe('DBCheckbox', () => { + testDefault({ + test, + title: 'should tick and untick checkbox, feedback messages must appear', + url: './#/03/checkbox?page=requirement', + async testFn(voiceOver, nvda) { + if (nvda) { + await nvda?.next(); + } + + const screenReader = voiceOver ?? nvda; + await screenReader?.next(); // Focus checkbox 1 + await screenReader?.next(); // Focus checkbox 1 label + await screenReader?.clearSpokenPhraseLog(); + await screenReader?.next(); // Focus checkbox 2 + await screenReader?.next(); // Focus checkbox 2 label + await screenReader?.next(); // Focus checkbox 3 + await screenReader?.previous(); // Focus checkbox 2 label + await screenReader?.previous(); // Focus checkbox 2 + await screenReader?.act(); // Tick checkbox 2 + await screenReader?.next(); // Focus checkbox 2 label + await screenReader?.next(); // Focus checkbox 2 message + await screenReader?.next(); // Focus checkbox 3 + await screenReader?.previous(); // Focus checkbox 2 message + await screenReader?.previous(); // Focus checkbox 2 label + await screenReader?.previous(); // Focus checkbox 2 + await screenReader?.act(); // Tick checkbox 2 + await screenReader?.next(); // Focus checkbox 2 label + await screenReader?.next(); // Focus checkbox 2 message + await screenReader?.next(); // Focus checkbox 3 + } + }); +}); From 390a43e6a4bc537922efd5f1ab99d33a36bf584f Mon Sep 17 00:00:00 2001 From: Maximilian Franzke <787658+mfranzke@users.noreply.github.com> Date: Thu, 8 Aug 2024 06:57:10 +0200 Subject: [PATCH 009/137] Update README.md --- showcases/screen-reader/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/showcases/screen-reader/README.md b/showcases/screen-reader/README.md index 9b68f653443..2058b783b6f 100644 --- a/showcases/screen-reader/README.md +++ b/showcases/screen-reader/README.md @@ -7,7 +7,7 @@ npx playwright install npx @guidepup/setup ``` -If errors occur after the automatic setup of guidepup (e.g. no connection to voicover), the setup must be executed manually. [See instructions](https://www.guidepup.dev/docs/guides/manual-voiceover-setup). +If errors occur after the automatic setup of Guidepup (e.g. no connection to Voiceover), the setup must be executed manually. See [instructions](https://www.guidepup.dev/docs/guides/manual-voiceover-setup). ## Start From 246000f5e91ef7a8c912eade33b3c0c8fe903a7a Mon Sep 17 00:00:00 2001 From: Nicolas Merget Date: Thu, 8 Aug 2024 08:09:15 +0200 Subject: [PATCH 010/137] chore: update snapshots for windows --- ...d9e-he-first-should-then-close-automatically-next-.txt | 1 + ...ld-open-two-items-while-both-remain-unfolded-next-.txt | 1 + showcases/screen-reader/default.ts | 4 +++- showcases/screen-reader/tests/accordion.spec.ts | 8 -------- 4 files changed, 5 insertions(+), 9 deletions(-) create mode 100644 showcases/screen-reader/__snapshots__/windows/chromium/DBAccordion-one-item-should-open-then-the-nex-10d9e-he-first-should-then-close-automatically-next-.txt create mode 100644 showcases/screen-reader/__snapshots__/windows/chromium/DBAccordion-should-open-two-items-while-both-remain-unfolded-next-.txt diff --git a/showcases/screen-reader/__snapshots__/windows/chromium/DBAccordion-one-item-should-open-then-the-nex-10d9e-he-first-should-then-close-automatically-next-.txt b/showcases/screen-reader/__snapshots__/windows/chromium/DBAccordion-one-item-should-open-then-the-nex-10d9e-he-first-should-then-close-automatically-next-.txt new file mode 100644 index 00000000000..0f721b98a29 --- /dev/null +++ b/showcases/screen-reader/__snapshots__/windows/chromium/DBAccordion-one-item-should-open-then-the-nex-10d9e-he-first-should-then-close-automatically-next-.txt @@ -0,0 +1 @@ +["button, collapsed, Item 1","expanded","Content 1","button, collapsed, Item 2","expanded","Content 2","button, expanded, Item 2","button, collapsed, Item 1"] diff --git a/showcases/screen-reader/__snapshots__/windows/chromium/DBAccordion-should-open-two-items-while-both-remain-unfolded-next-.txt b/showcases/screen-reader/__snapshots__/windows/chromium/DBAccordion-should-open-two-items-while-both-remain-unfolded-next-.txt new file mode 100644 index 00000000000..c698d574c06 --- /dev/null +++ b/showcases/screen-reader/__snapshots__/windows/chromium/DBAccordion-should-open-two-items-while-both-remain-unfolded-next-.txt @@ -0,0 +1 @@ +["button, collapsed, Item 1","expanded","Content 1","button, collapsed, Item 2","expanded. expanded","Content 2","button, expanded, Item 2","Content 1","button, expanded, Item 1"] diff --git a/showcases/screen-reader/default.ts b/showcases/screen-reader/default.ts index 758c72ca4fb..b5dcbeca61a 100644 --- a/showcases/screen-reader/default.ts +++ b/showcases/screen-reader/default.ts @@ -25,7 +25,9 @@ const translations: Record = { 'has auto complete': ['mit Auto Vervollständigung'], unknown: ['Unbekannt'], dialog: ['Dialogfeld'], - document: ['Dokument'] + document: ['Dokument'], + collapsed: ['reduziert'], + expanded: ['erweitert'] }; const cleanSpeakInstructions = (phraseLog: string[]): string[] => diff --git a/showcases/screen-reader/tests/accordion.spec.ts b/showcases/screen-reader/tests/accordion.spec.ts index ec4a5e89bfd..d52fc71714f 100644 --- a/showcases/screen-reader/tests/accordion.spec.ts +++ b/showcases/screen-reader/tests/accordion.spec.ts @@ -8,10 +8,6 @@ test.describe('DBAccordion', () => { title: 'should open two items while both remain unfolded (next)', url: './#/04/accordion?page=behaviour', async testFn(voiceOver, nvda) { - if (nvda) { - await nvda?.next(); - } - const screenReader = voiceOver ?? nvda; await screenReader?.clearSpokenPhraseLog(); await screenReader?.next(); // Focus: "item 1" @@ -30,10 +26,6 @@ test.describe('DBAccordion', () => { title: 'one item should open, then the next, whereby the first should then close automatically (next)', url: './#/04/accordion?page=behaviour', async testFn(voiceOver, nvda) { - if (nvda) { - await nvda?.next(); - } - const screenReader = voiceOver ?? nvda; await screenReader?.next(); await screenReader?.next(); From 57ea7377d86b5c279e407346812dfe4430bc23c6 Mon Sep 17 00:00:00 2001 From: Nicolas Merget Date: Thu, 8 Aug 2024 08:49:37 +0200 Subject: [PATCH 011/137] fix: issue with sr accordion test --- .../screen-reader/tests/accordion.spec.ts | 28 +++++++++++++++++-- 1 file changed, 25 insertions(+), 3 deletions(-) diff --git a/showcases/screen-reader/tests/accordion.spec.ts b/showcases/screen-reader/tests/accordion.spec.ts index d52fc71714f..7cf3f89bf8f 100644 --- a/showcases/screen-reader/tests/accordion.spec.ts +++ b/showcases/screen-reader/tests/accordion.spec.ts @@ -1,7 +1,27 @@ -import { getTest, testDefault } from '../default'; +import type { NVDAPlaywright, VoiceOverPlaywright } from '@guidepup/playwright'; +import { generateSnapshot, getTest, testDefault } from '../default'; const test = getTest(); +const postTestFn = async ( + voiceOver?: VoiceOverPlaywright, + nvda?: NVDAPlaywright, + retry?: number +) => { + if (nvda) { + /* + * There is an issue with nvda duplicating expanded sometimes + */ + await generateSnapshot(nvda, retry, (phraseLog) => + phraseLog.map((log) => + log.replace('expanded. expanded', 'expanded') + ) + ); + } else if (voiceOver) { + await generateSnapshot(voiceOver, retry); + } +}; + test.describe('DBAccordion', () => { testDefault({ test, @@ -19,7 +39,8 @@ test.describe('DBAccordion', () => { await screenReader?.previous(); // Focus: "item 2" await screenReader?.previous(); // Focus: "content 1" await screenReader?.previous(); // Focus: "item 1" - } + }, + postTestFn }); testDefault({ test, @@ -40,6 +61,7 @@ test.describe('DBAccordion', () => { await screenReader?.next(); // Focus: "content 2" await screenReader?.previous(); // Focus: "item 2" await screenReader?.previous(); // Focus: "item 1" - } + }, + postTestFn }); }); From 0ffa2fb26beb020c8f175b1d60bc263cd185df79 Mon Sep 17 00:00:00 2001 From: Nicolas Merget Date: Thu, 8 Aug 2024 09:44:14 +0200 Subject: [PATCH 012/137] chore: remove line ending --- ...nex-10d9e-he-first-should-then-close-automatically-next-.txt | 2 +- ...n-should-open-two-items-while-both-remain-unfolded-next-.txt | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/showcases/screen-reader/__snapshots__/windows/chromium/DBAccordion-one-item-should-open-then-the-nex-10d9e-he-first-should-then-close-automatically-next-.txt b/showcases/screen-reader/__snapshots__/windows/chromium/DBAccordion-one-item-should-open-then-the-nex-10d9e-he-first-should-then-close-automatically-next-.txt index 0f721b98a29..a11ce3567ca 100644 --- a/showcases/screen-reader/__snapshots__/windows/chromium/DBAccordion-one-item-should-open-then-the-nex-10d9e-he-first-should-then-close-automatically-next-.txt +++ b/showcases/screen-reader/__snapshots__/windows/chromium/DBAccordion-one-item-should-open-then-the-nex-10d9e-he-first-should-then-close-automatically-next-.txt @@ -1 +1 @@ -["button, collapsed, Item 1","expanded","Content 1","button, collapsed, Item 2","expanded","Content 2","button, expanded, Item 2","button, collapsed, Item 1"] +["button, collapsed, Item 1","expanded","Content 1","button, collapsed, Item 2","expanded","Content 2","button, expanded, Item 2","button, collapsed, Item 1"] \ No newline at end of file diff --git a/showcases/screen-reader/__snapshots__/windows/chromium/DBAccordion-should-open-two-items-while-both-remain-unfolded-next-.txt b/showcases/screen-reader/__snapshots__/windows/chromium/DBAccordion-should-open-two-items-while-both-remain-unfolded-next-.txt index c698d574c06..812747da93d 100644 --- a/showcases/screen-reader/__snapshots__/windows/chromium/DBAccordion-should-open-two-items-while-both-remain-unfolded-next-.txt +++ b/showcases/screen-reader/__snapshots__/windows/chromium/DBAccordion-should-open-two-items-while-both-remain-unfolded-next-.txt @@ -1 +1 @@ -["button, collapsed, Item 1","expanded","Content 1","button, collapsed, Item 2","expanded. expanded","Content 2","button, expanded, Item 2","Content 1","button, expanded, Item 1"] +["button, collapsed, Item 1","expanded","Content 1","button, collapsed, Item 2","expanded. expanded","Content 2","button, expanded, Item 2","Content 1","button, expanded, Item 1"] \ No newline at end of file From f89690a52a892781a53a24a3ee6e3327ccdb6050 Mon Sep 17 00:00:00 2001 From: Nicolas Merget Date: Thu, 8 Aug 2024 14:40:59 +0200 Subject: [PATCH 013/137] chore: update sr test for checkbox --- showcases/screen-reader/default.ts | 3 +++ showcases/screen-reader/tests/checkbox.spec.ts | 4 ---- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/showcases/screen-reader/default.ts b/showcases/screen-reader/default.ts index 5e4627cc193..4b1cf3bf473 100644 --- a/showcases/screen-reader/default.ts +++ b/showcases/screen-reader/default.ts @@ -15,6 +15,9 @@ import { } from './data'; const translations: Record = { + 'check box': ['Kontrollfeld'], + 'half checked': ['teilweise aktiviert'], + required: ['erforderlich'], button: ['Schalter'], edit: ['Eingabefeld'], 'radio button': ['Auswahlschalter'], diff --git a/showcases/screen-reader/tests/checkbox.spec.ts b/showcases/screen-reader/tests/checkbox.spec.ts index 28131f14912..d8c889e625e 100644 --- a/showcases/screen-reader/tests/checkbox.spec.ts +++ b/showcases/screen-reader/tests/checkbox.spec.ts @@ -8,10 +8,6 @@ test.describe('DBCheckbox', () => { title: 'should tick and untick checkbox, feedback messages must appear', url: './#/03/checkbox?page=requirement', async testFn(voiceOver, nvda) { - if (nvda) { - await nvda?.next(); - } - const screenReader = voiceOver ?? nvda; await screenReader?.next(); // Focus checkbox 1 await screenReader?.next(); // Focus checkbox 1 label From d19f412e67e047e0b10ce738ee9df4b244f3700c Mon Sep 17 00:00:00 2001 From: Maximilian Franzke <787658+mfranzke@users.noreply.github.com> Date: Fri, 9 Aug 2024 14:39:36 +0200 Subject: [PATCH 014/137] Update DBAccordion-should-open-two-items-while-both-remain-unfolded-next-.txt --- ...n-should-open-two-items-while-both-remain-unfolded-next-.txt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/showcases/screen-reader/__snapshots__/windows/chromium/DBAccordion-should-open-two-items-while-both-remain-unfolded-next-.txt b/showcases/screen-reader/__snapshots__/windows/chromium/DBAccordion-should-open-two-items-while-both-remain-unfolded-next-.txt index 812747da93d..ec3891249ff 100644 --- a/showcases/screen-reader/__snapshots__/windows/chromium/DBAccordion-should-open-two-items-while-both-remain-unfolded-next-.txt +++ b/showcases/screen-reader/__snapshots__/windows/chromium/DBAccordion-should-open-two-items-while-both-remain-unfolded-next-.txt @@ -1 +1 @@ -["button, collapsed, Item 1","expanded","Content 1","button, collapsed, Item 2","expanded. expanded","Content 2","button, expanded, Item 2","Content 1","button, expanded, Item 1"] \ No newline at end of file +["button, collapsed, Item 1","expanded","Content 1","button, collapsed, Item 2","expanded","Content 2","button, expanded, Item 2","Content 1","button, expanded, Item 1"] From 3147fb708e4c4efb61c2b1e9d362b5b51848a1a3 Mon Sep 17 00:00:00 2001 From: brunoschadeck Date: Mon, 12 Aug 2024 11:51:47 +0200 Subject: [PATCH 015/137] test: adds title to test, removes obsolete screenshot --- ...back-messages-must-appear.txt => DBCheckbox-default-1.txt} | 0 showcases/screen-reader/tests/checkbox.spec.ts | 4 +++- 2 files changed, 3 insertions(+), 1 deletion(-) rename showcases/screen-reader/__snapshots__/macos/webkit/{DBCheckbox-should-tick-and-untick-checkbox-feedback-messages-must-appear.txt => DBCheckbox-default-1.txt} (100%) diff --git a/showcases/screen-reader/__snapshots__/macos/webkit/DBCheckbox-should-tick-and-untick-checkbox-feedback-messages-must-appear.txt b/showcases/screen-reader/__snapshots__/macos/webkit/DBCheckbox-default-1.txt similarity index 100% rename from showcases/screen-reader/__snapshots__/macos/webkit/DBCheckbox-should-tick-and-untick-checkbox-feedback-messages-must-appear.txt rename to showcases/screen-reader/__snapshots__/macos/webkit/DBCheckbox-default-1.txt diff --git a/showcases/screen-reader/tests/checkbox.spec.ts b/showcases/screen-reader/tests/checkbox.spec.ts index d8c889e625e..6ea9bfc580c 100644 --- a/showcases/screen-reader/tests/checkbox.spec.ts +++ b/showcases/screen-reader/tests/checkbox.spec.ts @@ -5,7 +5,9 @@ const test = getTest(); test.describe('DBCheckbox', () => { testDefault({ test, - title: 'should tick and untick checkbox, feedback messages must appear', + title: 'default', + description: + 'should tick and untick checkbox, feedback messages must appear', url: './#/03/checkbox?page=requirement', async testFn(voiceOver, nvda) { const screenReader = voiceOver ?? nvda; From 0b1d7368cef6ad00aad0452cd7fd7c7d4f0bb02b Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Mon, 12 Aug 2024 12:44:10 +0200 Subject: [PATCH 016/137] chore: prettyfication --- showcases/screen-reader/default.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/showcases/screen-reader/default.ts b/showcases/screen-reader/default.ts index b1f18e76922..1ff9059505c 100644 --- a/showcases/screen-reader/default.ts +++ b/showcases/screen-reader/default.ts @@ -38,7 +38,7 @@ const standardPhrases = [ 'To select', 'To interact', 'Press Control', - 'To expand' + 'To expand' ]; const cleanSpeakInstructions = (phraseLog: string[]): string[] => From 032bb28401762196616f53a00c4d1d3bd131b1a4 Mon Sep 17 00:00:00 2001 From: brunoschadeck Date: Mon, 12 Aug 2024 16:59:59 +0200 Subject: [PATCH 017/137] test: adds title to test, removes obsolete screenshot --- ...emain-unfolded-next-.txt => DBAccordion-multiple-1.txt} | 0 ...se-automatically-next-.txt => DBAccordion-single-1.txt} | 0 showcases/screen-reader/tests/accordion.spec.ts | 7 +++++-- 3 files changed, 5 insertions(+), 2 deletions(-) rename showcases/screen-reader/__snapshots__/macos/webkit/{DBAccordion-should-open-two-items-while-both-remain-unfolded-next-.txt => DBAccordion-multiple-1.txt} (100%) rename showcases/screen-reader/__snapshots__/macos/webkit/{DBAccordion-one-item-should-open-then-the-nex-10d9e-he-first-should-then-close-automatically-next-.txt => DBAccordion-single-1.txt} (100%) diff --git a/showcases/screen-reader/__snapshots__/macos/webkit/DBAccordion-should-open-two-items-while-both-remain-unfolded-next-.txt b/showcases/screen-reader/__snapshots__/macos/webkit/DBAccordion-multiple-1.txt similarity index 100% rename from showcases/screen-reader/__snapshots__/macos/webkit/DBAccordion-should-open-two-items-while-both-remain-unfolded-next-.txt rename to showcases/screen-reader/__snapshots__/macos/webkit/DBAccordion-multiple-1.txt diff --git a/showcases/screen-reader/__snapshots__/macos/webkit/DBAccordion-one-item-should-open-then-the-nex-10d9e-he-first-should-then-close-automatically-next-.txt b/showcases/screen-reader/__snapshots__/macos/webkit/DBAccordion-single-1.txt similarity index 100% rename from showcases/screen-reader/__snapshots__/macos/webkit/DBAccordion-one-item-should-open-then-the-nex-10d9e-he-first-should-then-close-automatically-next-.txt rename to showcases/screen-reader/__snapshots__/macos/webkit/DBAccordion-single-1.txt diff --git a/showcases/screen-reader/tests/accordion.spec.ts b/showcases/screen-reader/tests/accordion.spec.ts index 7cf3f89bf8f..f29b87bc329 100644 --- a/showcases/screen-reader/tests/accordion.spec.ts +++ b/showcases/screen-reader/tests/accordion.spec.ts @@ -25,7 +25,8 @@ const postTestFn = async ( test.describe('DBAccordion', () => { testDefault({ test, - title: 'should open two items while both remain unfolded (next)', + title: 'multiple', + description: 'should open two items while both remain unfolded (next)', url: './#/04/accordion?page=behaviour', async testFn(voiceOver, nvda) { const screenReader = voiceOver ?? nvda; @@ -44,7 +45,9 @@ test.describe('DBAccordion', () => { }); testDefault({ test, - title: 'one item should open, then the next, whereby the first should then close automatically (next)', + title: 'single', + description: + 'one item should open, then the next, whereby the first should then close automatically (next)', url: './#/04/accordion?page=behaviour', async testFn(voiceOver, nvda) { const screenReader = voiceOver ?? nvda; From cf879f14ffa0a27b57432be23eacbd0280e94de2 Mon Sep 17 00:00:00 2001 From: brunoschadeck Date: Tue, 13 Aug 2024 11:52:59 +0200 Subject: [PATCH 018/137] test: simplifies guidepup test for accordion --- .../macos/webkit/DBAccordion-default-1.txt | 1 + .../macos/webkit/DBAccordion-multiple-1.txt | 1 - .../macos/webkit/DBAccordion-single-1.txt | 1 - ...-should-then-close-automatically-next-.txt | 1 - ...items-while-both-remain-unfolded-next-.txt | 1 - .../screen-reader/tests/accordion.spec.ts | 34 ++----------------- 6 files changed, 4 insertions(+), 35 deletions(-) create mode 100644 showcases/screen-reader/__snapshots__/macos/webkit/DBAccordion-default-1.txt delete mode 100644 showcases/screen-reader/__snapshots__/macos/webkit/DBAccordion-multiple-1.txt delete mode 100644 showcases/screen-reader/__snapshots__/macos/webkit/DBAccordion-single-1.txt delete mode 100644 showcases/screen-reader/__snapshots__/windows/chromium/DBAccordion-one-item-should-open-then-the-nex-10d9e-he-first-should-then-close-automatically-next-.txt delete mode 100644 showcases/screen-reader/__snapshots__/windows/chromium/DBAccordion-should-open-two-items-while-both-remain-unfolded-next-.txt diff --git a/showcases/screen-reader/__snapshots__/macos/webkit/DBAccordion-default-1.txt b/showcases/screen-reader/__snapshots__/macos/webkit/DBAccordion-default-1.txt new file mode 100644 index 00000000000..1b047509165 --- /dev/null +++ b/showcases/screen-reader/__snapshots__/macos/webkit/DBAccordion-default-1.txt @@ -0,0 +1 @@ +["Item 1 collapsed summary","Item 1 chevron_down expanded summary","Content 1","Item 2 collapsed summary","Item 3 collapsed summary"] \ No newline at end of file diff --git a/showcases/screen-reader/__snapshots__/macos/webkit/DBAccordion-multiple-1.txt b/showcases/screen-reader/__snapshots__/macos/webkit/DBAccordion-multiple-1.txt deleted file mode 100644 index 1c4e5d35da1..00000000000 --- a/showcases/screen-reader/__snapshots__/macos/webkit/DBAccordion-multiple-1.txt +++ /dev/null @@ -1 +0,0 @@ -["Item 1 collapsed summary","Item 1 chevron_down expanded summary","Content 1","Item 2 collapsed summary","Item 2 chevron_down expanded summary","Content 2","Item 2 chevron_down expanded summary","Content 1","Item 1 chevron_down expanded summary"] \ No newline at end of file diff --git a/showcases/screen-reader/__snapshots__/macos/webkit/DBAccordion-single-1.txt b/showcases/screen-reader/__snapshots__/macos/webkit/DBAccordion-single-1.txt deleted file mode 100644 index 792ea13298f..00000000000 --- a/showcases/screen-reader/__snapshots__/macos/webkit/DBAccordion-single-1.txt +++ /dev/null @@ -1 +0,0 @@ -["Item 1 collapsed summary","Item 1 chevron_down expanded summary","Content 1","Item 2 collapsed summary","Item 2 chevron_down expanded summary","Content 2","Item 2 chevron_down expanded summary","Item 1 chevron_down collapsed summary"] \ No newline at end of file diff --git a/showcases/screen-reader/__snapshots__/windows/chromium/DBAccordion-one-item-should-open-then-the-nex-10d9e-he-first-should-then-close-automatically-next-.txt b/showcases/screen-reader/__snapshots__/windows/chromium/DBAccordion-one-item-should-open-then-the-nex-10d9e-he-first-should-then-close-automatically-next-.txt deleted file mode 100644 index a11ce3567ca..00000000000 --- a/showcases/screen-reader/__snapshots__/windows/chromium/DBAccordion-one-item-should-open-then-the-nex-10d9e-he-first-should-then-close-automatically-next-.txt +++ /dev/null @@ -1 +0,0 @@ -["button, collapsed, Item 1","expanded","Content 1","button, collapsed, Item 2","expanded","Content 2","button, expanded, Item 2","button, collapsed, Item 1"] \ No newline at end of file diff --git a/showcases/screen-reader/__snapshots__/windows/chromium/DBAccordion-should-open-two-items-while-both-remain-unfolded-next-.txt b/showcases/screen-reader/__snapshots__/windows/chromium/DBAccordion-should-open-two-items-while-both-remain-unfolded-next-.txt deleted file mode 100644 index ec3891249ff..00000000000 --- a/showcases/screen-reader/__snapshots__/windows/chromium/DBAccordion-should-open-two-items-while-both-remain-unfolded-next-.txt +++ /dev/null @@ -1 +0,0 @@ -["button, collapsed, Item 1","expanded","Content 1","button, collapsed, Item 2","expanded","Content 2","button, expanded, Item 2","Content 1","button, expanded, Item 1"] diff --git a/showcases/screen-reader/tests/accordion.spec.ts b/showcases/screen-reader/tests/accordion.spec.ts index f29b87bc329..b71cb63b956 100644 --- a/showcases/screen-reader/tests/accordion.spec.ts +++ b/showcases/screen-reader/tests/accordion.spec.ts @@ -25,8 +25,8 @@ const postTestFn = async ( test.describe('DBAccordion', () => { testDefault({ test, - title: 'multiple', - description: 'should open two items while both remain unfolded (next)', + title: 'default', + description: 'should open first item (next)', url: './#/04/accordion?page=behaviour', async testFn(voiceOver, nvda) { const screenReader = voiceOver ?? nvda; @@ -35,35 +35,7 @@ test.describe('DBAccordion', () => { await screenReader?.act(); // Interact: "item 1" await screenReader?.next(); // Focus: "content 1" await screenReader?.next(); // Focus: "item 2" - await screenReader?.act(); // Interact: "item 2" - await screenReader?.next(); // Focus: "content 2" - await screenReader?.previous(); // Focus: "item 2" - await screenReader?.previous(); // Focus: "content 1" - await screenReader?.previous(); // Focus: "item 1" - }, - postTestFn - }); - testDefault({ - test, - title: 'single', - description: - 'one item should open, then the next, whereby the first should then close automatically (next)', - url: './#/04/accordion?page=behaviour', - async testFn(voiceOver, nvda) { - const screenReader = voiceOver ?? nvda; - await screenReader?.next(); - await screenReader?.next(); - await screenReader?.next(); - await screenReader?.next(); - await screenReader?.clearSpokenPhraseLog(); - await screenReader?.next(); // Focus example "Single","Item 1" - await screenReader?.act(); // Interact: "item 1" - await screenReader?.next(); // Focus: "content 1" - await screenReader?.next(); // Focus: "item 2" - await screenReader?.act(); // Interact: "item 2" - await screenReader?.next(); // Focus: "content 2" - await screenReader?.previous(); // Focus: "item 2" - await screenReader?.previous(); // Focus: "item 1" + await screenReader?.next(); // Focus: "item 3" }, postTestFn }); From 2ecd8e8332b5203386b73b647e99e338dfe25c68 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Wed, 14 Aug 2024 06:44:18 +0200 Subject: [PATCH 019/137] refactor: updated snapshots --- .../__snapshots__/macos/webkit/DBCheckbox-default-1.txt | 2 +- .../__snapshots__/windows/chromium/DBCheckbox-default-1.txt | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) create mode 100644 showcases/screen-reader/__snapshots__/windows/chromium/DBCheckbox-default-1.txt diff --git a/showcases/screen-reader/__snapshots__/macos/webkit/DBCheckbox-default-1.txt b/showcases/screen-reader/__snapshots__/macos/webkit/DBCheckbox-default-1.txt index 316b245830f..55b7fc57d8f 100644 --- a/showcases/screen-reader/__snapshots__/macos/webkit/DBCheckbox-default-1.txt +++ b/showcases/screen-reader/__snapshots__/macos/webkit/DBCheckbox-default-1.txt @@ -1 +1 @@ -["Required * required unticked tickbox","Required *","Required - Indeterminate mixed tickbox","Required *","Required * required unticked tickbox","required ticked Required * TODO: Add a validMessage tickbox","Required *","TODO: Add a validMessage","Required - Indeterminate mixed tickbox","TODO: Add a validMessage","Required *","Required * TODO: Add a validMessage required ticked tickbox","required unticked Required * Select this checkbox tickbox","Required *","Select this checkbox","Required - Indeterminate mixed tickbox"] \ No newline at end of file +["Required * required unchecked checkbox","Required *","Required - Indeterminate mixed checkbox","Required *","Required *","Required *","Required - Indeterminate mixed checkbox","Required - Indeterminate","end of Requirement group","Required - Indeterminate","Required - Indeterminate mixed checkbox","Required *","","Required - Indeterminate mixed checkbox","Required - Indeterminate","end of Requirement group"] \ No newline at end of file diff --git a/showcases/screen-reader/__snapshots__/windows/chromium/DBCheckbox-default-1.txt b/showcases/screen-reader/__snapshots__/windows/chromium/DBCheckbox-default-1.txt new file mode 100644 index 00000000000..61b11d45326 --- /dev/null +++ b/showcases/screen-reader/__snapshots__/windows/chromium/DBCheckbox-default-1.txt @@ -0,0 +1 @@ +["check box, half checked, Required Indeterminate","check box, half checked, Required Indeterminate","check box, half checked, Required Indeterminate","star","check box, not checked, required, Required star","TODO: Add a valid Message. checked","Required","star","TODO: Add a valid Message","star","Required","check box, checked, required, Required star","Please check this box if you want to proceed.. not checked","Required","star","Please check this box if you want to proceed."] \ No newline at end of file From 78468f5b615c34bab68539e5c9a59870d59058d5 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Wed, 14 Aug 2024 07:33:35 +0200 Subject: [PATCH 020/137] feat: added missing snapshot --- .../__snapshots__/windows/chromium/DBAccordion-default-1.txt | 1 + 1 file changed, 1 insertion(+) create mode 100644 showcases/screen-reader/__snapshots__/windows/chromium/DBAccordion-default-1.txt diff --git a/showcases/screen-reader/__snapshots__/windows/chromium/DBAccordion-default-1.txt b/showcases/screen-reader/__snapshots__/windows/chromium/DBAccordion-default-1.txt new file mode 100644 index 00000000000..42eb5ff038e --- /dev/null +++ b/showcases/screen-reader/__snapshots__/windows/chromium/DBAccordion-default-1.txt @@ -0,0 +1 @@ +["button, collapsed, Item 1","expanded","Content 1","button, collapsed, Item 2","button, collapsed, Item 3"] \ No newline at end of file From 49aeda5faad067e79503a633e2855f8fa5d03b4f Mon Sep 17 00:00:00 2001 From: brunoschadeck Date: Thu, 15 Aug 2024 12:02:08 +0200 Subject: [PATCH 021/137] chore: manually merged --- showcases/screen-reader/translations.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/showcases/screen-reader/translations.ts b/showcases/screen-reader/translations.ts index 4c3ab2b5c0e..6e8439815f1 100644 --- a/showcases/screen-reader/translations.ts +++ b/showcases/screen-reader/translations.ts @@ -15,5 +15,7 @@ export const translations: Record = { '': ['. Nummernblock eingeschaltet'], unknown: ['Unbekannt'], dialog: ['Dialogfeld'], - document: ['Dokument'] + document: ['Dokument'], + 'check box': ['Kontrollfeld'], + 'half checked': ['teilweise aktiviert'] }; From 3a10d0f3cace2ce45d13fc68f76651dec8a5d85b Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Thu, 15 Aug 2024 13:25:40 +0200 Subject: [PATCH 022/137] refactor: adding empty alternative text this is even already getting announced by screen readers due to the standard required-attribute --- packages/components/src/styles/_form-components.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/styles/_form-components.scss b/packages/components/src/styles/_form-components.scss index 39a73547a53..b10c84832bd 100644 --- a/packages/components/src/styles/_form-components.scss +++ b/packages/components/src/styles/_form-components.scss @@ -265,7 +265,7 @@ $input-valid-types: "color", "date", "datetime-local", "email", "file", "hidden" &:is(label), label { &::after { - content: "*"; + content: "*" / ""; padding-inline-start: variables.$db-spacing-fixed-2xs; } } From 18187cdbad8856705d5b878f9a1092d1e6db131d Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Thu, 15 Aug 2024 13:26:33 +0200 Subject: [PATCH 023/137] refactor: updated snapshot --- .../__snapshots__/windows/chromium/DBCheckbox-default-1.txt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/showcases/screen-reader/__snapshots__/windows/chromium/DBCheckbox-default-1.txt b/showcases/screen-reader/__snapshots__/windows/chromium/DBCheckbox-default-1.txt index 61b11d45326..cb3e6ef0e09 100644 --- a/showcases/screen-reader/__snapshots__/windows/chromium/DBCheckbox-default-1.txt +++ b/showcases/screen-reader/__snapshots__/windows/chromium/DBCheckbox-default-1.txt @@ -1 +1 @@ -["check box, half checked, Required Indeterminate","check box, half checked, Required Indeterminate","check box, half checked, Required Indeterminate","star","check box, not checked, required, Required star","TODO: Add a valid Message. checked","Required","star","TODO: Add a valid Message","star","Required","check box, checked, required, Required star","Please check this box if you want to proceed.. not checked","Required","star","Please check this box if you want to proceed."] \ No newline at end of file +["check box, half checked, Required Indeterminate","check box, half checked, Required Indeterminate","check box, half checked, Required Indeterminate","check box, not checked, required, Required","TODO: Add a valid Message. checked","Required","TODO: Add a valid Message","Required","check box, checked, required, Required","Please check this box if you want to proceed.. not checked","Required","Please check this box if you want to proceed."] \ No newline at end of file From 8ae71cb85a5935c7a8168c8d5e01747c9a63636a Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Thu, 15 Aug 2024 13:46:48 +0200 Subject: [PATCH 024/137] refactor: updated snapshot --- .../__snapshots__/windows/chromium/DBInput-required-1.txt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/showcases/screen-reader/__snapshots__/windows/chromium/DBInput-required-1.txt b/showcases/screen-reader/__snapshots__/windows/chromium/DBInput-required-1.txt index 72bb6bae613..cde79e5eb05 100644 --- a/showcases/screen-reader/__snapshots__/windows/chromium/DBInput-required-1.txt +++ b/showcases/screen-reader/__snapshots__/windows/chromium/DBInput-required-1.txt @@ -1 +1 @@ -["Label star, edit, required, Required, blank","T. e. s. t. TODO: Add a valid Message","Test selected","blank. Please fill out this field.. unselected","T. e. s. t. TODO: Add a valid Message"] \ No newline at end of file +["Label, edit, required, Required, blank","T. e. s. t. TODO: Add a valid Message","Test selected","blank. Please fill out this field.. unselected","T. e. s. t. TODO: Add a valid Message"] \ No newline at end of file From 7a530a0032e1e8c0449af4ce25c9a17caeed54d8 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Thu, 15 Aug 2024 14:07:20 +0200 Subject: [PATCH 025/137] refactor: using the correct notation --- packages/components/src/styles/_form-components.scss | 3 ++- packages/foundations/scss/icons/_icon-helpers.scss | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/components/src/styles/_form-components.scss b/packages/components/src/styles/_form-components.scss index b10c84832bd..3d68f967a9f 100644 --- a/packages/components/src/styles/_form-components.scss +++ b/packages/components/src/styles/_form-components.scss @@ -265,7 +265,8 @@ $input-valid-types: "color", "date", "datetime-local", "email", "file", "hidden" &:is(label), label { &::after { - content: "*" / ""; + @include icons.icon-content("*"); + padding-inline-start: variables.$db-spacing-fixed-2xs; } } diff --git a/packages/foundations/scss/icons/_icon-helpers.scss b/packages/foundations/scss/icons/_icon-helpers.scss index 3fe10d15d4b..213ef352404 100644 --- a/packages/foundations/scss/icons/_icon-helpers.scss +++ b/packages/foundations/scss/icons/_icon-helpers.scss @@ -45,6 +45,7 @@ $default-icon-font-size: var(--db-icon-font-size, #{$default-icon-size-rem}); @mixin icon-content($icon) { content: $icon; // Hiding icon from screenreaders, https://www.w3.org/TR/css-content-3/#alt + // We couldn't just add the following code line and expect an forgiving behaviour of unsupporting browser to ignore this declaration, but need to wrap it into an @supports due to a bug in WebKit Safari: https://github.com/db-ui/core/pull/766 @supports (content: ""/"") { content: $icon / ""; } From 0194dc0eca3d4670559545cb552e4b6935d70a37 Mon Sep 17 00:00:00 2001 From: brunoschadeck Date: Thu, 15 Aug 2024 14:13:04 +0200 Subject: [PATCH 026/137] feat: alternative text empty for the asterisk --- packages/components/src/styles/_form-components.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/components/src/styles/_form-components.scss b/packages/components/src/styles/_form-components.scss index 39a73547a53..48bff81999e 100644 --- a/packages/components/src/styles/_form-components.scss +++ b/packages/components/src/styles/_form-components.scss @@ -266,6 +266,11 @@ $input-valid-types: "color", "date", "datetime-local", "email", "file", "hidden" label { &::after { content: "*"; + // Hiding asterisk from screenreaders, https://www.w3.org/TR/css-content-3/#alt + @supports (content: ""/"") { + content: "*" / ""; + } + padding-inline-start: variables.$db-spacing-fixed-2xs; } } From 40ba4b4ae755ff7f0bdd1b4fa065a5cb1eb0e311 Mon Sep 17 00:00:00 2001 From: brunoschadeck Date: Thu, 15 Aug 2024 14:14:35 +0200 Subject: [PATCH 027/137] test: repeated test --- .../__snapshots__/macos/webkit/DBCheckbox-default-1.txt | 2 +- showcases/screen-reader/tests/checkbox.spec.ts | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/showcases/screen-reader/__snapshots__/macos/webkit/DBCheckbox-default-1.txt b/showcases/screen-reader/__snapshots__/macos/webkit/DBCheckbox-default-1.txt index 55b7fc57d8f..a2dc8b61601 100644 --- a/showcases/screen-reader/__snapshots__/macos/webkit/DBCheckbox-default-1.txt +++ b/showcases/screen-reader/__snapshots__/macos/webkit/DBCheckbox-default-1.txt @@ -1 +1 @@ -["Required * required unchecked checkbox","Required *","Required - Indeterminate mixed checkbox","Required *","Required *","Required *","Required - Indeterminate mixed checkbox","Required - Indeterminate","end of Requirement group","Required - Indeterminate","Required - Indeterminate mixed checkbox","Required *","","Required - Indeterminate mixed checkbox","Required - Indeterminate","end of Requirement group"] \ No newline at end of file +["Required required unticked tickbox","Required","Required - Indeterminate mixed tickbox","Required","Required required unticked tickbox","TODO: Add a validMessage","Required","TODO: Add a validMessage","Required - Indeterminate mixed tickbox","TODO: Add a validMessage","Required","Required TODO: Add a validMessage required ticked tickbox","Select this checkbox","Required","Select this checkbox","Required - Indeterminate mixed tickbox"] \ No newline at end of file diff --git a/showcases/screen-reader/tests/checkbox.spec.ts b/showcases/screen-reader/tests/checkbox.spec.ts index 6ea9bfc580c..8ef39eeab69 100644 --- a/showcases/screen-reader/tests/checkbox.spec.ts +++ b/showcases/screen-reader/tests/checkbox.spec.ts @@ -14,6 +14,7 @@ test.describe('DBCheckbox', () => { await screenReader?.next(); // Focus checkbox 1 await screenReader?.next(); // Focus checkbox 1 label await screenReader?.clearSpokenPhraseLog(); + await screenReader?.next(); // Focus checkbox 2 await screenReader?.next(); // Focus checkbox 2 label await screenReader?.next(); // Focus checkbox 3 From 68ca18eb0c91cc2b3eceee8270b7a9a65b2562b9 Mon Sep 17 00:00:00 2001 From: brunoschadeck Date: Thu, 15 Aug 2024 17:27:30 +0200 Subject: [PATCH 028/137] test: adds guidepup test for navigation --- .../macos/webkit/DBNavigation-default-1.txt | 1 + .../screen-reader/tests/navigation.spec.ts | 35 +++++++++++++++++++ 2 files changed, 36 insertions(+) create mode 100644 showcases/screen-reader/__snapshots__/macos/webkit/DBNavigation-default-1.txt create mode 100644 showcases/screen-reader/tests/navigation.spec.ts diff --git a/showcases/screen-reader/__snapshots__/macos/webkit/DBNavigation-default-1.txt b/showcases/screen-reader/__snapshots__/macos/webkit/DBNavigation-default-1.txt new file mode 100644 index 00000000000..78322865565 --- /dev/null +++ b/showcases/screen-reader/__snapshots__/macos/webkit/DBNavigation-default-1.txt @@ -0,0 +1 @@ +["Functional navigation","list 3 items","Navi-Item 1 menu pop up current page button 1 of 3","list 2 items level 2","Sub-Navi-Item 1 menu pop up current page button 1 of 2","list 2 items level 3","current page link Sub-Sub-Navi-Item 1 1 of 2","current page link Sub-Sub-Navi-Item 2 2 of 2","end of list","current page link Sub-Navi-Item 2 2 of 2","end of list","link Navi-Item 2 2 of 3","dimmed link Navi-Item 3 3 of 3. This item is dimmed.","end of list"] \ No newline at end of file diff --git a/showcases/screen-reader/tests/navigation.spec.ts b/showcases/screen-reader/tests/navigation.spec.ts new file mode 100644 index 00000000000..b562864c077 --- /dev/null +++ b/showcases/screen-reader/tests/navigation.spec.ts @@ -0,0 +1,35 @@ +import { getTest, testDefault } from '../default'; + +const test = getTest(); + +test.describe('DBNavigation', () => { + testDefault({ + test, + title: 'default', + description: + 'should have texts inline or as data-label attributes (next())', + url: './#/05/navigation?page=density', + async testFn(voiceOver, nvda) { + if (nvda) { + await nvda?.next(); + } + + const screenReader = voiceOver ?? nvda; + await screenReader?.clearSpokenPhraseLog(); + await screenReader?.next(); // Navigation "Functional" + await screenReader?.next(); // List A with 3 items + await screenReader?.next(); // Menu "Navi-Item 1" - current page + await screenReader?.next(); // List B with 2 items + await screenReader?.next(); // Menu "Sub-Navi-Item 1" - current page + await screenReader?.next(); // List C with 2 items + await screenReader?.next(); // Link "Sub-Sub-Navi-Item 1" - current page + await screenReader?.next(); // Link "Sub-Sub-Navi-Item 2" + await screenReader?.next(); // List C end + await screenReader?.next(); // Link "Sub-Navi-Item 2" + await screenReader?.next(); // List B end + await screenReader?.next(); // Link "Navi-Item 2" + await screenReader?.next(); // Link "Navi-Item 3" - dimmed + await screenReader?.next(); // List A end + } + }); +}); From 0be107ef9a28f475ab1fd7bc98cb02032c405a2a Mon Sep 17 00:00:00 2001 From: Nicolas Merget Date: Mon, 19 Aug 2024 08:23:01 +0200 Subject: [PATCH 029/137] chore: update test for checkbox --- .../windows/chromium/DBCheckbox-default-1.txt | 2 +- .../screen-reader/tests/checkbox.spec.ts | 50 +++++++++++-------- showcases/screen-reader/translations.ts | 5 +- 3 files changed, 34 insertions(+), 23 deletions(-) diff --git a/showcases/screen-reader/__snapshots__/windows/chromium/DBCheckbox-default-1.txt b/showcases/screen-reader/__snapshots__/windows/chromium/DBCheckbox-default-1.txt index cb3e6ef0e09..aa051460faf 100644 --- a/showcases/screen-reader/__snapshots__/windows/chromium/DBCheckbox-default-1.txt +++ b/showcases/screen-reader/__snapshots__/windows/chromium/DBCheckbox-default-1.txt @@ -1 +1 @@ -["check box, half checked, Required Indeterminate","check box, half checked, Required Indeterminate","check box, half checked, Required Indeterminate","check box, not checked, required, Required","TODO: Add a valid Message. checked","Required","TODO: Add a valid Message","Required","check box, checked, required, Required","Please check this box if you want to proceed.. not checked","Required","Please check this box if you want to proceed."] \ No newline at end of file +["check box, not checked, required, Required","TODO: Add a valid Message. checked","Required","check box, checked, required, Required","Please check this box if you want to proceed.. not checked","Required","Please check this box if you want to proceed.",check box, half checked, Required Indeterminate"] \ No newline at end of file diff --git a/showcases/screen-reader/tests/checkbox.spec.ts b/showcases/screen-reader/tests/checkbox.spec.ts index 8ef39eeab69..890c6902d0e 100644 --- a/showcases/screen-reader/tests/checkbox.spec.ts +++ b/showcases/screen-reader/tests/checkbox.spec.ts @@ -10,27 +10,37 @@ test.describe('DBCheckbox', () => { 'should tick and untick checkbox, feedback messages must appear', url: './#/03/checkbox?page=requirement', async testFn(voiceOver, nvda) { - const screenReader = voiceOver ?? nvda; - await screenReader?.next(); // Focus checkbox 1 - await screenReader?.next(); // Focus checkbox 1 label - await screenReader?.clearSpokenPhraseLog(); + if (nvda) { + await nvda?.next(); // Focus checkbox 3 + await nvda?.act(); // Tick checkbox 2 + await nvda?.next(); // Focus checkbox 2 message + await nvda?.previous(); // Focus checkbox 2 + await nvda?.act(); // Tick checkbox 2 + await nvda?.next(); // Focus checkbox 2 message + await nvda?.next(); // Focus checkbox 3 + await nvda?.next(); // Focus checkbox 3 + } else if (voiceOver) { + await voiceOver?.next(); // Focus checkbox 1 + await voiceOver?.next(); // Focus checkbox 1 label + await voiceOver?.clearSpokenPhraseLog(); - await screenReader?.next(); // Focus checkbox 2 - await screenReader?.next(); // Focus checkbox 2 label - await screenReader?.next(); // Focus checkbox 3 - await screenReader?.previous(); // Focus checkbox 2 label - await screenReader?.previous(); // Focus checkbox 2 - await screenReader?.act(); // Tick checkbox 2 - await screenReader?.next(); // Focus checkbox 2 label - await screenReader?.next(); // Focus checkbox 2 message - await screenReader?.next(); // Focus checkbox 3 - await screenReader?.previous(); // Focus checkbox 2 message - await screenReader?.previous(); // Focus checkbox 2 label - await screenReader?.previous(); // Focus checkbox 2 - await screenReader?.act(); // Tick checkbox 2 - await screenReader?.next(); // Focus checkbox 2 label - await screenReader?.next(); // Focus checkbox 2 message - await screenReader?.next(); // Focus checkbox 3 + await voiceOver?.next(); // Focus checkbox 2 + await voiceOver?.next(); // Focus checkbox 2 label + await voiceOver?.next(); // Focus checkbox 3 + await voiceOver?.previous(); // Focus checkbox 2 label + await voiceOver?.previous(); // Focus checkbox 2 + await voiceOver?.act(); // Tick checkbox 2 + await voiceOver?.next(); // Focus checkbox 2 label + await voiceOver?.next(); // Focus checkbox 2 message + await voiceOver?.next(); // Focus checkbox 3 + await voiceOver?.previous(); // Focus checkbox 2 message + await voiceOver?.previous(); // Focus checkbox 2 label + await voiceOver?.previous(); // Focus checkbox 2 + await voiceOver?.act(); // Tick checkbox 2 + await voiceOver?.next(); // Focus checkbox 2 label + await voiceOver?.next(); // Focus checkbox 2 message + await voiceOver?.next(); // Focus checkbox 3 + } } }); }); diff --git a/showcases/screen-reader/translations.ts b/showcases/screen-reader/translations.ts index 6e8439815f1..3de629ff9c7 100644 --- a/showcases/screen-reader/translations.ts +++ b/showcases/screen-reader/translations.ts @@ -4,6 +4,8 @@ export const translations: Record = { edit: ['Eingabefeld'], 'radio button': ['Auswahlschalter'], blank: ['Leer'], + not: ['Nicht'], + 'half checked': ['teilweise aktiviert'], checked: ['aktiviert'], ' of ': [' von '], clickable: ['anklickbar'], @@ -16,6 +18,5 @@ export const translations: Record = { unknown: ['Unbekannt'], dialog: ['Dialogfeld'], document: ['Dokument'], - 'check box': ['Kontrollfeld'], - 'half checked': ['teilweise aktiviert'] + 'check box': ['Kontrollfeld'] }; From 948e9a4aa1ef8ff9268a6164931339edb370a044 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke <787658+mfranzke@users.noreply.github.com> Date: Mon, 19 Aug 2024 08:36:40 +0200 Subject: [PATCH 030/137] Discard changes to packages/foundations/scss/icons/_icon-helpers.scss --- packages/foundations/scss/icons/_icon-helpers.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/foundations/scss/icons/_icon-helpers.scss b/packages/foundations/scss/icons/_icon-helpers.scss index 213ef352404..3fe10d15d4b 100644 --- a/packages/foundations/scss/icons/_icon-helpers.scss +++ b/packages/foundations/scss/icons/_icon-helpers.scss @@ -45,7 +45,6 @@ $default-icon-font-size: var(--db-icon-font-size, #{$default-icon-size-rem}); @mixin icon-content($icon) { content: $icon; // Hiding icon from screenreaders, https://www.w3.org/TR/css-content-3/#alt - // We couldn't just add the following code line and expect an forgiving behaviour of unsupporting browser to ignore this declaration, but need to wrap it into an @supports due to a bug in WebKit Safari: https://github.com/db-ui/core/pull/766 @supports (content: ""/"") { content: $icon / ""; } From 9af381403f23dc2527391a58acae7a24725ae8c2 Mon Sep 17 00:00:00 2001 From: Nicolas Merget Date: Mon, 19 Aug 2024 08:48:20 +0200 Subject: [PATCH 031/137] chore: update sr test for checkbox --- .../__snapshots__/windows/chromium/DBCheckbox-default-1.txt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/showcases/screen-reader/__snapshots__/windows/chromium/DBCheckbox-default-1.txt b/showcases/screen-reader/__snapshots__/windows/chromium/DBCheckbox-default-1.txt index aa051460faf..6dc9fa17679 100644 --- a/showcases/screen-reader/__snapshots__/windows/chromium/DBCheckbox-default-1.txt +++ b/showcases/screen-reader/__snapshots__/windows/chromium/DBCheckbox-default-1.txt @@ -1 +1 @@ -["check box, not checked, required, Required","TODO: Add a valid Message. checked","Required","check box, checked, required, Required","Please check this box if you want to proceed.. not checked","Required","Please check this box if you want to proceed.",check box, half checked, Required Indeterminate"] \ No newline at end of file +["check box, not checked, required, Required","TODO: Add a valid Message. checked","Required","check box, checked, required, Required","Please check this box if you want to proceed.. not checked","Required","Please check this box if you want to proceed.","check box, half checked, Required Indeterminate"] \ No newline at end of file From 239b7f84550fc2a9a71f6d1048a14e25b42455aa Mon Sep 17 00:00:00 2001 From: Nicolas Merget Date: Mon, 19 Aug 2024 10:34:41 +0200 Subject: [PATCH 032/137] chore: update comments for checkbox st test --- showcases/screen-reader/tests/checkbox.spec.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/showcases/screen-reader/tests/checkbox.spec.ts b/showcases/screen-reader/tests/checkbox.spec.ts index 890c6902d0e..d9518177a53 100644 --- a/showcases/screen-reader/tests/checkbox.spec.ts +++ b/showcases/screen-reader/tests/checkbox.spec.ts @@ -11,14 +11,14 @@ test.describe('DBCheckbox', () => { url: './#/03/checkbox?page=requirement', async testFn(voiceOver, nvda) { if (nvda) { - await nvda?.next(); // Focus checkbox 3 + await nvda?.next(); // Focus checkbox 2 await nvda?.act(); // Tick checkbox 2 await nvda?.next(); // Focus checkbox 2 message await nvda?.previous(); // Focus checkbox 2 await nvda?.act(); // Tick checkbox 2 + await nvda?.next(); // Focus checkbox 2 label await nvda?.next(); // Focus checkbox 2 message await nvda?.next(); // Focus checkbox 3 - await nvda?.next(); // Focus checkbox 3 } else if (voiceOver) { await voiceOver?.next(); // Focus checkbox 1 await voiceOver?.next(); // Focus checkbox 1 label From fdb48a30d33f5583e6fb760cc86f2e5b4604e236 Mon Sep 17 00:00:00 2001 From: Nicolas Merget Date: Mon, 19 Aug 2024 11:40:25 +0200 Subject: [PATCH 033/137] chore: update snapshots --- .../__snapshots__/macos/webkit/DBCheckbox-default-1.txt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/showcases/screen-reader/__snapshots__/macos/webkit/DBCheckbox-default-1.txt b/showcases/screen-reader/__snapshots__/macos/webkit/DBCheckbox-default-1.txt index a2dc8b61601..66f49017740 100644 --- a/showcases/screen-reader/__snapshots__/macos/webkit/DBCheckbox-default-1.txt +++ b/showcases/screen-reader/__snapshots__/macos/webkit/DBCheckbox-default-1.txt @@ -1 +1 @@ -["Required required unticked tickbox","Required","Required - Indeterminate mixed tickbox","Required","Required required unticked tickbox","TODO: Add a validMessage","Required","TODO: Add a validMessage","Required - Indeterminate mixed tickbox","TODO: Add a validMessage","Required","Required TODO: Add a validMessage required ticked tickbox","Select this checkbox","Required","Select this checkbox","Required - Indeterminate mixed tickbox"] \ No newline at end of file +["Required required unchecked checkbox","Required","Required - Indeterminate mixed checkbox","Required","Required required unchecked checkbox","TODO: Add a validMessage","Required","TODO: Add a validMessage","Required - Indeterminate mixed checkbox","TODO: Add a validMessage","Required","Required TODO: Add a validMessage required checked checkbox","Select this checkbox","Required","Select this checkbox","Required - Indeterminate mixed checkbox"] \ No newline at end of file From 7a38edafb0aba6095a3e3a0dafa746f7d99b4ce1 Mon Sep 17 00:00:00 2001 From: Nicolas Merget Date: Mon, 19 Aug 2024 14:27:30 +0200 Subject: [PATCH 034/137] chore: update sr test for nvda navigation --- .../screen-reader/tests/navigation.spec.ts | 42 +++++++++++-------- 1 file changed, 24 insertions(+), 18 deletions(-) diff --git a/showcases/screen-reader/tests/navigation.spec.ts b/showcases/screen-reader/tests/navigation.spec.ts index b562864c077..99305aeb90c 100644 --- a/showcases/screen-reader/tests/navigation.spec.ts +++ b/showcases/screen-reader/tests/navigation.spec.ts @@ -11,25 +11,31 @@ test.describe('DBNavigation', () => { url: './#/05/navigation?page=density', async testFn(voiceOver, nvda) { if (nvda) { - await nvda?.next(); + await nvda?.next(); // Navigation Item 1 + await nvda?.act(); // Open menu + await nvda?.next(); // Sub-Navigation Item 1 + await nvda?.act(); // Open menu + await nvda?.next(); // Sub-Sub-Navigation Item 1 + await nvda?.next(); // Sub-Sub-Navigation Item 2 + await nvda?.next(); // Sub-Navigation Item 2 + await nvda?.next(); // Navigation Item 2 + await nvda?.next(); // Navigation Item 3 + } else if (voiceOver) { + await voiceOver?.next(); // Navigation "Functional" + await voiceOver?.next(); // List A with 3 items + await voiceOver?.next(); // Menu "Navi-Item 1" - current page + await voiceOver?.next(); // List B with 2 items + await voiceOver?.next(); // Menu "Sub-Navi-Item 1" - current page + await voiceOver?.next(); // List C with 2 items + await voiceOver?.next(); // Link "Sub-Sub-Navi-Item 1" - current page + await voiceOver?.next(); // Link "Sub-Sub-Navi-Item 2" + await voiceOver?.next(); // List C end + await voiceOver?.next(); // Link "Sub-Navi-Item 2" + await voiceOver?.next(); // List B end + await voiceOver?.next(); // Link "Navi-Item 2" + await voiceOver?.next(); // Link "Navi-Item 3" - dimmed + await voiceOver?.next(); // List A end } - - const screenReader = voiceOver ?? nvda; - await screenReader?.clearSpokenPhraseLog(); - await screenReader?.next(); // Navigation "Functional" - await screenReader?.next(); // List A with 3 items - await screenReader?.next(); // Menu "Navi-Item 1" - current page - await screenReader?.next(); // List B with 2 items - await screenReader?.next(); // Menu "Sub-Navi-Item 1" - current page - await screenReader?.next(); // List C with 2 items - await screenReader?.next(); // Link "Sub-Sub-Navi-Item 1" - current page - await screenReader?.next(); // Link "Sub-Sub-Navi-Item 2" - await screenReader?.next(); // List C end - await screenReader?.next(); // Link "Sub-Navi-Item 2" - await screenReader?.next(); // List B end - await screenReader?.next(); // Link "Navi-Item 2" - await screenReader?.next(); // Link "Navi-Item 3" - dimmed - await screenReader?.next(); // List A end } }); }); From fbd11724e001ae3d05449d8f6815e07afc055c13 Mon Sep 17 00:00:00 2001 From: Nicolas Merget Date: Mon, 19 Aug 2024 14:58:59 +0200 Subject: [PATCH 035/137] chore: update snapshots --- .../__snapshots__/windows/chromium/DBNavigation-default-1.txt | 1 + 1 file changed, 1 insertion(+) create mode 100644 showcases/screen-reader/__snapshots__/windows/chromium/DBNavigation-default-1.txt diff --git a/showcases/screen-reader/__snapshots__/windows/chromium/DBNavigation-default-1.txt b/showcases/screen-reader/__snapshots__/windows/chromium/DBNavigation-default-1.txt new file mode 100644 index 00000000000..91c1ff1f88c --- /dev/null +++ b/showcases/screen-reader/__snapshots__/windows/chromium/DBNavigation-default-1.txt @@ -0,0 +1 @@ +["Functional, navigation landmark, list, with 3 items, current page, menu button, collapsed, sub Menu, Navi Item 1","expanded","list, with 2 items, current page, menu button, collapsed, sub Menu, Sub Navi Item 1","expanded","list, with 2 items, current page, link, Sub Sub Navi Item 1","link, Sub Sub Navi Item 2","out of list, link, Sub Navi Item 2","out of list, link, Navi Item 2","unavailable, link, Navi Item 3"] \ No newline at end of file From fdc7db14dd2850e2cc848846da438ef2b7291503 Mon Sep 17 00:00:00 2001 From: brunoschadeck Date: Tue, 20 Aug 2024 11:29:29 +0200 Subject: [PATCH 036/137] fix: removes active prop from parent-active nav items --- .../components/navigation/nav-item.tsx | 30 +++++++++++-------- .../src/components/navigation/index.tsx | 2 -- .../src/navigation/nav-item.tsx | 10 +++---- showcases/shared/navigation.json | 6 ---- 4 files changed, 23 insertions(+), 25 deletions(-) diff --git a/showcases/patternhub/components/navigation/nav-item.tsx b/showcases/patternhub/components/navigation/nav-item.tsx index f97ea834fc2..9864dede4fc 100644 --- a/showcases/patternhub/components/navigation/nav-item.tsx +++ b/showcases/patternhub/components/navigation/nav-item.tsx @@ -1,23 +1,29 @@ -import { useRouter } from 'next/router'; +import { type Router, useRouter } from 'next/router'; import Link from 'next/link'; import { DBNavigationItem } from '../../../../output/react/src'; import type { NavigationItem } from '../../data/routes'; -const isRouteActive = (pathname: string, navItem: NavigationItem): boolean => - navItem.path === '/' - ? pathname === '/' - : pathname.includes(`${navItem.path}/`) || - pathname === navItem.path || - Boolean( - navItem.subNavigation?.find((subItem) => { - return pathname.includes(`${subItem.path}/`); - }) - ); +const isRouteActive = ( + pathname: string, + navItem: NavigationItem, + router: Router +): boolean => { + // Route is defined by a file within subdirectory of "pages" + if (!router.query.slug) { + return navItem.path === router.pathname; + } + + // Dynamic route is defined by /pages/components/[[...slug]].tsx + const { slug } = router.query; + const sanitizedSlug = Array.isArray(slug) ? slug : [slug]; + + return navItem.path === `/components/${sanitizedSlug.join('/')}`; +}; const NavItem = ({ navItem }: { navItem: NavigationItem }) => { const router = useRouter(); - const isActive = isRouteActive(router.pathname, navItem); + const isActive = isRouteActive(router.pathname, navItem, router); return ( { diff --git a/showcases/react-showcase/src/navigation/nav-item.tsx b/showcases/react-showcase/src/navigation/nav-item.tsx index 7e5f2bd4cba..a802e0c5927 100644 --- a/showcases/react-showcase/src/navigation/nav-item.tsx +++ b/showcases/react-showcase/src/navigation/nav-item.tsx @@ -18,11 +18,11 @@ const NavItem = ({ navItem }: { navItem: NavigationItem }) => { return; } - setIsActive( - navItem.path === '' - ? pathname === '/' - : pathname.includes(navItem.path) - ); + const standardizedItemPath = navItem.path.startsWith('/') + ? navItem.path + : `/${navItem.path}`; + + setIsActive(standardizedItemPath === pathname); }, [pathname]); return ( diff --git a/showcases/shared/navigation.json b/showcases/shared/navigation.json index 5623ca1bef1..675c541b740 100644 --- a/showcases/shared/navigation.json +++ b/showcases/shared/navigation.json @@ -5,17 +5,11 @@ { "name": "navigation-item", "content": "Navi-Item 1", - "props": { - "active": true - }, "children": [ { "name": "navigation-item", "content": "Sub-Navi-Item 1", "slot": "sub-navigation", - "props": { - "active": true - }, "children": [ { "name": "navigation-item", From bc801dbd6523012009128223f6becc11ad118112 Mon Sep 17 00:00:00 2001 From: brunoschadeck Date: Thu, 22 Aug 2024 15:11:14 +0200 Subject: [PATCH 037/137] feat: removes prop active from nav-item --- .../components/src/components/navigation-item/model.ts | 5 ----- .../components/navigation-item/navigation-item.lite.tsx | 1 - showcases/patternhub/components/navigation/nav-item.tsx | 8 ++++---- .../react-showcase/src/components/navigation/index.tsx | 6 ++++-- showcases/shared/navigation.json | 6 ++---- 5 files changed, 10 insertions(+), 16 deletions(-) diff --git a/packages/components/src/components/navigation-item/model.ts b/packages/components/src/components/navigation-item/model.ts index 2c9fbc04124..50e9bc7d574 100644 --- a/packages/components/src/components/navigation-item/model.ts +++ b/packages/components/src/components/navigation-item/model.ts @@ -12,11 +12,6 @@ import { import { NavigationItemSafeTriangle } from '../../utils/navigation'; export interface DBNavigationItemDefaultProps { - /** - * Indicator for active navigation item (bold font). - */ - active?: boolean; - /** * The disabled attribute can be set to [keep a user from clicking on the item](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled). */ diff --git a/packages/components/src/components/navigation-item/navigation-item.lite.tsx b/packages/components/src/components/navigation-item/navigation-item.lite.tsx index 2b52cb514d8..b8d83c28489 100644 --- a/packages/components/src/components/navigation-item/navigation-item.lite.tsx +++ b/packages/components/src/components/navigation-item/navigation-item.lite.tsx @@ -99,7 +99,6 @@ export default function DBNavigationItem(props: DBNavigationItemProps) { class={cls('db-navigation-item', props.className)} data-width={props.width} data-icon={props.icon} - aria-current={props.active ? 'page' : undefined} aria-disabled={props.disabled}> {props.children} diff --git a/showcases/patternhub/components/navigation/nav-item.tsx b/showcases/patternhub/components/navigation/nav-item.tsx index 9864dede4fc..6d66479b929 100644 --- a/showcases/patternhub/components/navigation/nav-item.tsx +++ b/showcases/patternhub/components/navigation/nav-item.tsx @@ -1,4 +1,4 @@ -import { type Router, useRouter } from 'next/router'; +import { type NextRouter, type Router, useRouter } from 'next/router'; import Link from 'next/link'; import { DBNavigationItem } from '../../../../output/react/src'; import type { NavigationItem } from '../../data/routes'; @@ -6,7 +6,7 @@ import type { NavigationItem } from '../../data/routes'; const isRouteActive = ( pathname: string, navItem: NavigationItem, - router: Router + router: NextRouter ): boolean => { // Route is defined by a file within subdirectory of "pages" if (!router.query.slug) { @@ -27,7 +27,6 @@ const NavItem = ({ navItem }: { navItem: NavigationItem }) => { return ( { ) : ( + href={navItem.path ?? ''} + aria-current={isActive ? 'page' : undefined}> {navItem.label} )} diff --git a/showcases/react-showcase/src/components/navigation/index.tsx b/showcases/react-showcase/src/components/navigation/index.tsx index a8edd67e533..510059438fb 100644 --- a/showcases/react-showcase/src/components/navigation/index.tsx +++ b/showcases/react-showcase/src/components/navigation/index.tsx @@ -27,8 +27,10 @@ const getNavigation = ({ children }: DBNavigationProps) => { - - Sub-Sub-Navi-Item 1 + + + Sub-Sub-Navi-Item 1 + Sub-Sub-Navi-Item 2 diff --git a/showcases/shared/navigation.json b/showcases/shared/navigation.json index 675c541b740..e45bccd78a5 100644 --- a/showcases/shared/navigation.json +++ b/showcases/shared/navigation.json @@ -14,16 +14,14 @@ { "name": "navigation-item", "slot": "sub-navigation", - "props": { - "active": true - }, "children": [ { "name": "a", "native": true, "content": "Sub-Sub-Navi-Item 1", "props": { - "href": "#" + "href": "#", + "aria-current": "page" } } ] From 42e764a6974d9ca69589267916f594fe31301b85 Mon Sep 17 00:00:00 2001 From: brunoschadeck Date: Thu, 22 Aug 2024 15:17:12 +0200 Subject: [PATCH 038/137] docs: aria current should be set on anchor within nav-item --- .../navigation/docs/Accessibility.md | 10 +++++++++ .../src/components/navigation/docs/Angular.md | 19 +++++++---------- .../src/components/navigation/docs/HTML.md | 10 +++++---- .../src/components/navigation/docs/React.md | 8 +++---- .../src/components/navigation/docs/Vue.md | 21 +++++++------------ .../patternhub/scripts/get-how-to-file.js | 2 +- 6 files changed, 36 insertions(+), 34 deletions(-) create mode 100644 packages/components/src/components/navigation/docs/Accessibility.md diff --git a/packages/components/src/components/navigation/docs/Accessibility.md b/packages/components/src/components/navigation/docs/Accessibility.md new file mode 100644 index 00000000000..2b6f96c1528 --- /dev/null +++ b/packages/components/src/components/navigation/docs/Accessibility.md @@ -0,0 +1,10 @@ +## Accessibility + +### Active item / current page + +To implicitly set a `NavigationItem` to **active**, the attribute `aria-current="page"` is applied to the anchor it contains. Some frameworks (vue, angular) offer internal, automatic solutions for this. These should preferably be used. + +This leads to: + +- the `NavigationItem` and all parent `NavigationItems` are displayed as **active** via `css` (bold, if necessary with DB pulse) +- accessibility is granted correctly. see: [MDN aria-current](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current) diff --git a/packages/components/src/components/navigation/docs/Angular.md b/packages/components/src/components/navigation/docs/Angular.md index 9e1d9977527..90f10aa9707 100644 --- a/packages/components/src/components/navigation/docs/Angular.md +++ b/packages/components/src/components/navigation/docs/Angular.md @@ -22,16 +22,18 @@ import { DBNavigation } from '@db-ui/ngx-components'; - + - + Sub-Navi-Item 1 - + - Sub-Sub-Navi-Item 1 + Sub-Sub-Navi-Item 1 @@ -64,14 +66,7 @@ import { DBNavigation } from '@db-ui/ngx-components'; ### Angular Router and active state handling -You can set the property `active` to a boolean value as in the example above. -It will cause the navigation item to render in active style and implicitly -set `aria-current="page"` to the list element. - -The component will also check for child element set to `aria-current="page"`. -Such elements are also displayed in active state. -This makes the component [integration with the Angular Router](https://angular.dev/best-practices/a11y#active-links-identification) way more elegant -compared to the first variant. +We recommend using the automatic [integration with the Angular Router](https://angular.dev/best-practices/a11y#active-links-identification). This is way more elegant than setting the aria attribute to the anchor yourself. The component first needs to import the `RouterLink` and `RouterLinkActive` directives. diff --git a/packages/components/src/components/navigation/docs/HTML.md b/packages/components/src/components/navigation/docs/HTML.md index fa8ae53e262..ec1b0c494ba 100644 --- a/packages/components/src/components/navigation/docs/HTML.md +++ b/packages/components/src/components/navigation/docs/HTML.md @@ -10,7 +10,7 @@ For general installation and configuration look at the [components](https://www.