Merge pull request #648 from danskernesdigitalebibliotek/feature/DDFL…

…SBP-631-tilgaengelighed-webform-form-element-til-tekst-input-overholder-ikke-krav-til-kontrast Enhance accessibility of input and textarea fields [DDFLSBP-631]
danskernesdigitalebibliotek · Jun 5, 2024 · 5dd22df · 5dd22df
2 parents 2d4330e + bdd8ad0
commit 5dd22df
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 7 deletions.
diff --git a/src/stories/Library/Forms/input/Input.stories.tsx b/src/stories/Library/Forms/input/Input.stories.tsx
@@ -9,15 +9,24 @@ export default {
   argTypes: {
     label: {
       defaultValue: "Navn",
+      control: { type: "text" },
     },
     type: {
       defaultValue: "text",
+      control: { type: "select", options: ["text", "password"] },
     },
     id: {
       defaultValue: "id",
+      control: { type: "text" },
+    },
+    description: {
+      defaultValue: "Dit fulde navn",
+      control: { type: "text" },
+    },
+    validation: {
+      defaultValue: "Fejlbesked lorem ipsum dolor",
+      control: { type: "text" },
     },
-    description: { defaultValue: "Dit fulde navn" },
-    validation: { defaultValue: "Fejlbesked lorem ipsum dolor" },
   },
   parameters: {
     design: {

diff --git a/src/stories/Library/Forms/input/Input.tsx b/src/stories/Library/Forms/input/Input.tsx
@@ -15,9 +15,9 @@ const Input = (props: InputProps) => {
   const invalid = validation ? "true" : "false";
   return (
     <div
-      className={clsx("dpl-input", classNames, [
-        { "dpl-input--invalid": !!validation },
-      ])}
+      className={clsx("dpl-input", classNames, {
+        "dpl-input--invalid": !!validation,
+      })}
     >
       <Label id={id}>{label}</Label>
       <input

diff --git a/src/stories/Library/Forms/input/input.scss b/src/stories/Library/Forms/input/input.scss
@@ -11,7 +11,7 @@
   input {
     background-color: transparent;
     border: none;
-    border-bottom: 1px solid $color__global-tertiary-1;
+    border-bottom: 1px solid $color__global-tertiary-2;
     height: 40px;
 
     &:focus {

diff --git a/src/stories/Library/Forms/textarea/textarea.scss b/src/stories/Library/Forms/textarea/textarea.scss
@@ -6,7 +6,7 @@
 
     textarea {
       @include typography($typo__body-placeholder);
-      border: solid 1px $color__global-tertiary-1;
+      border: solid 1px $color__global-tertiary-2;
       width: 100%;
       padding: $s-md;
       resize: none;