diff --git a/packages/components/src/styles/_form-components.scss b/packages/components/src/styles/_form-components.scss index d0ddaa2eee0..6dd2f4ed3d1 100644 --- a/packages/components/src/styles/_form-components.scss +++ b/packages/components/src/styles/_form-components.scss @@ -265,9 +265,8 @@ $input-valid-types: "color", "date", "datetime-local", "email", "file", "hidden" &:is(label), label { &::after { - content: "*"; - // Hiding asterisk from screenreaders, https://www.w3.org/TR/css-content-3/#alt - content: "*" / ""; + @include icons.icon-content("*"); + padding-inline-start: variables.$db-spacing-fixed-2xs; } } diff --git a/showcases/screen-reader/__snapshots__/macos/webkit/DBCheckbox-default-1.txt b/showcases/screen-reader/__snapshots__/macos/webkit/DBCheckbox-default-1.txt new file mode 100644 index 00000000000..66f49017740 --- /dev/null +++ b/showcases/screen-reader/__snapshots__/macos/webkit/DBCheckbox-default-1.txt @@ -0,0 +1 @@ +["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 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..55773001ab6 --- /dev/null +++ b/showcases/screen-reader/__snapshots__/windows/chromium/DBCheckbox-default-1.txt @@ -0,0 +1 @@ +["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, diff --git a/showcases/screen-reader/tests/checkbox.spec.ts b/showcases/screen-reader/tests/checkbox.spec.ts new file mode 100644 index 00000000000..0b594ad5ae4 --- /dev/null +++ b/showcases/screen-reader/tests/checkbox.spec.ts @@ -0,0 +1,48 @@ +import { getTest, testDefault } from '../default'; + +const test = getTest(); + +test.describe('DBCheckbox', () => { + testDefault({ + test, + title: 'default', + description: + 'should tick and untick checkbox, feedback messages must appear', + url: './#/03/checkbox?page=requirement', + async testFn(voiceOver, nvda) { + 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 + await nvda?.next(); // Focus checkbox 2 message + 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 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 a044b101dc9..fb47392ac2d 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'], @@ -17,6 +19,7 @@ export const translations: Record = { dialog: ['Dialogfeld'], document: ['Dokument'], unavailable: ['nicht verfügbar'], + 'check box': ['Kontrollfeld'], collapsed: ['reduziert'], expanded: ['erweitert'] };