fix: handle required disabled field hints (#1990)

- update snapshots and tests
chanzuckerberg · Jun 12, 2024 · 11c0883 · 11c0883
1 parent 300af06
commit 11c0883
Show file tree

Hide file tree

Showing 5 changed files with 97 additions and 19 deletions.
diff --git a/src/components/InputField/InputField-v2.stories.tsx b/src/components/InputField/InputField-v2.stories.tsx
@@ -122,6 +122,19 @@ export const Required: Story = {
   },
 };
 
+/**
+ * Fields can be marked as required.
+ */
+export const RequiredDisabled: Story = {
+  args: {
+    label: 'Input field with fieldNote',
+    showHint: true,
+    required: true,
+    disabled: true,
+    fieldNote: 'This is a fieldnote for a required input field.',
+  },
+};
+
 /**
  * When not using a visible label with `InputField`, you must apply some time of ARIA label to the component, like `aria-label`.
  */

diff --git a/src/components/InputField/InputField-v2.tsx b/src/components/InputField/InputField-v2.tsx
@@ -249,6 +249,7 @@ export const InputField: InputFieldType = forwardRef(
             )}
             {required && showHint && (
               <Text
+                aria-disabled={disabled ?? undefined}
                 as="span"
                 className={requiredTextClassName}
                 preset="body-sm"
@@ -258,6 +259,7 @@ export const InputField: InputFieldType = forwardRef(
             )}
             {!required && showHint && (
               <Text
+                aria-disabled={disabled ?? undefined}
                 as="span"
                 className={requiredTextClassName}
                 preset="body-sm"

diff --git a/src/components/InputField/__snapshots__/InputField-v2.test.tsx.snap b/src/components/InputField/__snapshots__/InputField-v2.test.tsx.snap
@@ -145,7 +145,7 @@ exports[`<InputField /> InputWithin story renders snapshot 1`] = `
     >
       <label
         class="label label--lg input-field__label"
-        for=":ro:"
+        for=":rq:"
       >
         Input field with button inside
       </label>
@@ -156,7 +156,7 @@ exports[`<InputField /> InputWithin story renders snapshot 1`] = `
       <input
         aria-invalid="false"
         class="input input-field__input--input-within"
-        id=":ro:"
+        id=":rq:"
         type="text"
       />
       <div
@@ -264,18 +264,18 @@ exports[`<InputField /> NoVisibleLabel story renders snapshot 1`] = `
       class="input-field__body input-field--has-fieldNote"
     >
       <input
-        aria-describedby=":rj:"
+        aria-describedby=":rl:"
         aria-invalid="false"
         aria-label="Input for no visible label"
         class="input"
-        id=":ri:"
+        id=":rk:"
         required=""
         type="text"
       />
     </div>
     <div
       class="field-note"
-      id=":rj:"
+      id=":rl:"
     >
       This input field has no visible label
     </div>
@@ -295,7 +295,7 @@ exports[`<InputField /> Password story renders snapshot 1`] = `
     >
       <label
         class="label label--lg input-field__label"
-        for=":rk:"
+        for=":rm:"
       >
         Password
       </label>
@@ -306,7 +306,7 @@ exports[`<InputField /> Password story renders snapshot 1`] = `
       <input
         aria-invalid="false"
         class="input"
-        id=":rk:"
+        id=":rm:"
         type="password"
       />
     </div>
@@ -398,6 +398,54 @@ exports[`<InputField /> Required story renders snapshot 1`] = `
 </div>
 `;
 
+exports[`<InputField /> RequiredDisabled story renders snapshot 1`] = `
+<div
+  class="p-8"
+>
+  <div
+    class="w-96"
+  >
+    <div
+      class="input-field__overline"
+    >
+      <label
+        aria-disabled="true"
+        class="label label--lg label--disabled input-field__label input-field__label--disabled"
+        for=":ri:"
+      >
+        Input field with fieldNote
+      </label>
+      <span
+        aria-disabled="true"
+        class="text text--body-sm input-field__required-text input-field__required-text--disabled"
+      >
+        (Required)
+      </span>
+    </div>
+    <div
+      class="input-field__body input-field--has-fieldNote"
+    >
+      <input
+        aria-describedby=":rj:"
+        aria-invalid="false"
+        class="input"
+        disabled=""
+        id=":ri:"
+        required=""
+        type="text"
+      />
+    </div>
+    <div
+      aria-disabled="true"
+      class="field-note field-note--disabled"
+      id=":rj:"
+    >
+      This is a fieldnote for a required input field.
+    </div>
+  </div>
+</div>
+`;
+
 exports[`<InputField /> ShowHint story renders snapshot 1`] = `
 <div
   class="p-8"
@@ -410,7 +458,7 @@ exports[`<InputField /> ShowHint story renders snapshot 1`] = `
     >
       <label
         class="label label--lg input-field__label"
-        for=":rm:"
+        for=":ro:"
       >
         Field with Optional Hint
       </label>
@@ -426,7 +474,7 @@ exports[`<InputField /> ShowHint story renders snapshot 1`] = `
       <input
         aria-invalid="false"
         class="input"
-        id=":rm:"
+        id=":ro:"
         type="text"
       />
     </div>
@@ -565,7 +613,7 @@ exports[`<InputField /> WithAMaxLength story renders snapshot 1`] = `
     >
       <label
         class="label label--lg input-field__label"
-        for=":rq:"
+        for=":rs:"
       >
         test label
       </label>
@@ -588,7 +636,7 @@ exports[`<InputField /> WithAMaxLength story renders snapshot 1`] = `
       <input
         aria-invalid="false"
         class="input error"
-        id=":rq:"
+        id=":rs:"
         maxlength="15"
         required=""
         type="text"
@@ -614,7 +662,7 @@ exports[`<InputField /> WithARecommendedLength story renders snapshot 1`] = `
     >
       <label
         class="label label--lg input-field__label"
-        for=":rs:"
+        for=":ru:"
       >
         Shortened Length Field
       </label>
@@ -637,7 +685,7 @@ exports[`<InputField /> WithARecommendedLength story renders snapshot 1`] = `
       <input
         aria-invalid="false"
         class="input error"
-        id=":rs:"
+        id=":ru:"
         required=""
         type="text"
         value="Some initial text"
@@ -662,7 +710,7 @@ exports[`<InputField /> WithBothMaxAndRecommendedLength story renders snapshot 1
     >
       <label
         class="label label--lg input-field__label"
-        for=":ru:"
+        for=":r10:"
       >
         test label
       </label>
@@ -683,10 +731,10 @@ exports[`<InputField /> WithBothMaxAndRecommendedLength story renders snapshot 1
       class="input-field__body input-field--has-fieldNote"
     >
       <input
-        aria-describedby=":rv:"
+        aria-describedby=":r11:"
         aria-invalid="false"
         class="input error"
-        id=":ru:"
+        id=":r10:"
         maxlength="20"
         required=""
         type="text"
@@ -698,7 +746,7 @@ exports[`<InputField /> WithBothMaxAndRecommendedLength story renders snapshot 1
     >
       <div
         class="field-note field-note--error"
-        id=":rv:"
+        id=":r11:"
       >
         <svg
           class="icon field-note__icon"

diff --git a/src/components/Select/Select-v2.module.css b/src/components/Select/Select-v2.module.css
@@ -103,6 +103,7 @@
   margin-bottom: 0.25rem;
 }
 
+
 /**
  * Label on top of the select trigger button to label the select field.
  */
@@ -164,4 +165,8 @@
     border-color: var(--eds-theme-color-border-utility-warning);
     outline: calc(var(--eds-border-width-sm) * 1px) solid var(--eds-theme-color-border-utility-warning);
   }
+}
+
+.select__required-text--disabled {
+  color: var(--eds-theme-color-text-utility-disabled-primary);
 }
diff --git a/src/components/Select/Select-v2.tsx b/src/components/Select/Select-v2.tsx
@@ -348,12 +348,22 @@ const SelectLabel = ({
         {label}
       </Listbox.Label>
       {required && showHint && (
-        <Text as="span" className={requiredTextClassName} preset="body-sm">
+        <Text
+          aria-disabled={disabled ?? undefined}
+          as="span"
+          className={requiredTextClassName}
+          preset="body-sm"
+        >
           (Required)
         </Text>
       )}
       {!required && showHint && (
-        <Text as="span" className={requiredTextClassName} preset="body-sm">
+        <Text
+          aria-disabled={disabled ?? undefined}
+          as="span"
+          className={requiredTextClassName}
+          preset="body-sm"
+        >
           (Optional)
         </Text>
       )}