From f70d40cfe869688db7b8c9a23af16bcf66cad9b2 Mon Sep 17 00:00:00 2001 From: brunoschadeck Date: Wed, 7 Aug 2024 15:14:42 +0200 Subject: [PATCH 01/19] 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 f89690a52a892781a53a24a3ee6e3327ccdb6050 Mon Sep 17 00:00:00 2001 From: Nicolas Merget Date: Thu, 8 Aug 2024 14:40:59 +0200 Subject: [PATCH 02/19] 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 3147fb708e4c4efb61c2b1e9d362b5b51848a1a3 Mon Sep 17 00:00:00 2001 From: brunoschadeck Date: Mon, 12 Aug 2024 11:51:47 +0200 Subject: [PATCH 03/19] 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 2ecd8e8332b5203386b73b647e99e338dfe25c68 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Wed, 14 Aug 2024 06:44:18 +0200 Subject: [PATCH 04/19] 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 49aeda5faad067e79503a633e2855f8fa5d03b4f Mon Sep 17 00:00:00 2001 From: brunoschadeck Date: Thu, 15 Aug 2024 12:02:08 +0200 Subject: [PATCH 05/19] 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 06/19] 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 07/19] 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 08/19] 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 09/19] 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 10/19] 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 11/19] 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 0be107ef9a28f475ab1fd7bc98cb02032c405a2a Mon Sep 17 00:00:00 2001 From: Nicolas Merget Date: Mon, 19 Aug 2024 08:23:01 +0200 Subject: [PATCH 12/19] 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 13/19] 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 14/19] 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 15/19] 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 16/19] 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 ffce54ee476a9f86c6b5ad4be23d4ad036573b52 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Wed, 4 Sep 2024 14:04:09 +0200 Subject: [PATCH 17/19] chore: formatting --- showcases/screen-reader/translations.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/showcases/screen-reader/translations.ts b/showcases/screen-reader/translations.ts index 1a26ee06514..fb47392ac2d 100644 --- a/showcases/screen-reader/translations.ts +++ b/showcases/screen-reader/translations.ts @@ -20,6 +20,6 @@ export const translations: Record = { document: ['Dokument'], unavailable: ['nicht verfügbar'], 'check box': ['Kontrollfeld'], - collapsed: ['reduziert'], + collapsed: ['reduziert'], expanded: ['erweitert'] }; From c866ea1b45ddb87bbc120347872a52796b77669a Mon Sep 17 00:00:00 2001 From: Maximilian Franzke <787658+mfranzke@users.noreply.github.com> Date: Tue, 10 Sep 2024 14:11:49 +0200 Subject: [PATCH 18/19] Update checkbox.spec.ts --- showcases/screen-reader/tests/checkbox.spec.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/showcases/screen-reader/tests/checkbox.spec.ts b/showcases/screen-reader/tests/checkbox.spec.ts index d9518177a53..0b594ad5ae4 100644 --- a/showcases/screen-reader/tests/checkbox.spec.ts +++ b/showcases/screen-reader/tests/checkbox.spec.ts @@ -13,7 +13,9 @@ test.describe('DBCheckbox', () => { if (nvda) { await nvda?.next(); // 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?.previous(); // Focus checkbox 2 label await nvda?.previous(); // Focus checkbox 2 await nvda?.act(); // Tick checkbox 2 await nvda?.next(); // Focus checkbox 2 label From f3eb57033486bc9dad06b6a366870abc9090ce06 Mon Sep 17 00:00:00 2001 From: Nicolas Merget Date: Wed, 11 Sep 2024 09:22:15 +0200 Subject: [PATCH 19/19] chore: update snapshots --- .../windows/chromium/DBCheckbox-default-1.txt | 2 +- showcases/screen-reader/default.ts | 23 ++++++++++++++----- 2 files changed, 18 insertions(+), 7 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 6dc9fa17679..55773001ab6 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","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.","check box, half checked, Required Indeterminate"] \ No newline at end of file diff --git a/showcases/screen-reader/default.ts b/showcases/screen-reader/default.ts index ceeac5ff3aa..4250b51fd14 100644 --- a/showcases/screen-reader/default.ts +++ b/showcases/screen-reader/default.ts @@ -32,18 +32,29 @@ const standardPhrases = [ 'To expand' ]; +const flakyExpressions: Record = { + 'pop-up': 'pop up', + 'checked. checked': 'checked', + 'selected. selected': 'selected' +}; + const cleanSpeakInstructions = (phraseLog: string[]): string[] => - phraseLog.map((phrase) => - phrase + phraseLog.map((phrase) => { + let result = phrase .split('. ') .filter( (sPhrase) => !standardPhrases.some((string) => sPhrase.includes(string)) ) - .join('. ') - // We need to replace specific phrases, as they are being reported differently on localhost and within CI/CD - .replaceAll('pop-up', 'pop up') - ); + .join('. '); + + // We need to replace specific phrases, as they are being reported differently on localhost and within CI/CD + for (const [key, value] of Object.entries(flakyExpressions)) { + result = result.replaceAll(key, value); + } + + return result; + }); export const generateSnapshot = async ( screenReader?: VoiceOverPlaywright | NVDAPlaywright,