refactor: overwrite star for screenreader output (#3065)

* refactor: updated snapshot * feat: alternative text empty for the asterisk * refactor: updated snapshot --------- Co-authored-by: brunoschadeck <[email protected]>
db-ui · Aug 19, 2024 · 123e46e · 123e46e
1 parent b506452
commit 123e46e
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 1 deletion.
diff --git a/packages/components/src/styles/_form-components.scss b/packages/components/src/styles/_form-components.scss
@@ -266,6 +266,8 @@ $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
+				content: "*" / "";
 				padding-inline-start: variables.$db-spacing-fixed-2xs;
 			}
 		}

diff --git 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"]
+["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"]