fix: do not display empty <label></label> (#275)

codegouvfr · Jul 11, 2024 · c7cc7df · c7cc7df
1 parent 5507541
commit c7cc7df
Show file tree

Hide file tree

Showing 9 changed files with 82 additions and 62 deletions.
diff --git a/src/Input.tsx b/src/Input.tsx
@@ -127,13 +127,15 @@ export const Input = memo(
                 id={id}
                 {...rest}
             >
-                <label
-                    className={cx(fr.cx("fr-label", hideLabel && "fr-sr-only"), classes.label)}
-                    htmlFor={inputId}
-                >
-                    {label}
-                    {hintText !== undefined && <span className="fr-hint-text">{hintText}</span>}
-                </label>
+                {Boolean(label || hintText) && (
+                    <label
+                        className={cx(fr.cx("fr-label", hideLabel && "fr-sr-only"), classes.label)}
+                        htmlFor={inputId}
+                    >
+                        {label}
+                        {hintText !== undefined && <span className="fr-hint-text">{hintText}</span>}
+                    </label>
+                )}
                 {(() => {
                     const nativeInputOrTextArea = (
                         <NativeInputOrTextArea

diff --git a/src/Range.tsx b/src/Range.tsx
@@ -129,14 +129,16 @@ export const Range = memo(
                 id={`${id}-group`}
                 {...rest}
             >
-                <label className={cx(fr.cx("fr-label"), classes.label)} id={labelId}>
-                    {label}
-                    {hintText !== undefined && (
-                        <span className={cx(fr.cx("fr-hint-text"), classes.hintText)}>
-                            {hintText}
-                        </span>
-                    )}
-                </label>
+                {Boolean(label || hintText) && (
+                    <label className={cx(fr.cx("fr-label"), classes.label)} id={labelId}>
+                        {label}
+                        {hintText !== undefined && (
+                            <span className={cx(fr.cx("fr-hint-text"), classes.hintText)}>
+                                {hintText}
+                            </span>
+                        )}
+                    </label>
+                )}
                 <div
                     className={cx(
                         fr.cx(

diff --git a/src/SegmentedControl.tsx b/src/SegmentedControl.tsx
@@ -172,18 +172,20 @@ export const SegmentedControl = memo(
                                     name={segmentedName}
                                     type="radio"
                                 />
-                                <label
-                                    className={cx(
-                                        fr.cx(
-                                            segment.iconId !== undefined && segment.iconId,
-                                            "fr-label"
-                                        ),
-                                        classes["element-each__label"]
-                                    )}
-                                    htmlFor={segmentId}
-                                >
-                                    {segment.label}
-                                </label>
+                                {segment.label && (
+                                    <label
+                                        className={cx(
+                                            fr.cx(
+                                                segment.iconId !== undefined && segment.iconId,
+                                                "fr-label"
+                                            ),
+                                            classes["element-each__label"]
+                                        )}
+                                        htmlFor={segmentId}
+                                    >
+                                        {segment.label}
+                                    </label>
+                                )}
                             </div>
                         );
                     })}

diff --git a/src/Select.tsx b/src/Select.tsx
@@ -90,10 +90,14 @@ export const Select = memo(
                 style={style}
                 {...rest}
             >
-                <label className={fr.cx("fr-label")} htmlFor={selectId}>
-                    {label}
-                    {hint !== undefined && <span className={fr.cx("fr-hint-text")}>{hint}</span>}
-                </label>
+                {Boolean(label || hint) && (
+                    <label className={fr.cx("fr-label")} htmlFor={selectId}>
+                        {label}
+                        {hint !== undefined && (
+                            <span className={fr.cx("fr-hint-text")}>{hint}</span>
+                        )}
+                    </label>
+                )}
                 <select
                     className={cx(fr.cx("fr-select"), nativeSelectProps.className)}
                     id={selectId}

diff --git a/src/SelectNext.tsx b/src/SelectNext.tsx
@@ -140,10 +140,12 @@ function NonMemoizedNonForwardedSelect<T extends SelectProps.Option[]>(
             style={style}
             {...rest}
         >
-            <label className={fr.cx("fr-label")} htmlFor={selectId}>
-                {label}
-                {hint !== undefined && <span className={fr.cx("fr-hint-text")}>{hint}</span>}
-            </label>
+            {Boolean(label || hint) && (
+                <label className={fr.cx("fr-label")} htmlFor={selectId}>
+                    {label}
+                    {hint !== undefined && <span className={fr.cx("fr-hint-text")}>{hint}</span>}
+                </label>
+            )}
             <select
                 className={cx(fr.cx("fr-select"), nativeSelectProps?.className)}
                 id={selectId}

diff --git a/src/ToggleSwitch.tsx b/src/ToggleSwitch.tsx
@@ -120,16 +120,18 @@ export const ToggleSwitch = memo(
                     checked={props_checked ?? checked}
                     name={name}
                 />
-                <label
-                    className={cx(fr.cx("fr-toggle__label"), classes.label)}
-                    htmlFor={inputId}
-                    {...(showCheckedHint && {
-                        "data-fr-checked-label": t("checked"),
-                        "data-fr-unchecked-label": t("unchecked")
-                    })}
-                >
-                    {label}
-                </label>
+                {label && (
+                    <label
+                        className={cx(fr.cx("fr-toggle__label"), classes.label)}
+                        htmlFor={inputId}
+                        {...(showCheckedHint && {
+                            "data-fr-checked-label": t("checked"),
+                            "data-fr-unchecked-label": t("unchecked")
+                        })}
+                    >
+                        {label}
+                    </label>
+                )}
                 {helperText && (
                     <p className={cx(fr.cx("fr-hint-text"), classes.hint)} id={hintId}>
                         {helperText}

diff --git a/src/Upload.tsx b/src/Upload.tsx
@@ -72,10 +72,12 @@ export const Upload = memo(
                 )}
                 ref={ref}
             >
-                <label className={fr.cx("fr-label")} aria-disabled={disabled} htmlFor={inputId}>
-                    {label}
-                    <span className={fr.cx("fr-hint-text")}>{hint}</span>
-                </label>
+                {Boolean(label || hint) && (
+                    <label className={fr.cx("fr-label")} aria-disabled={disabled} htmlFor={inputId}>
+                        {label}
+                        <span className={fr.cx("fr-hint-text")}>{hint}</span>
+                    </label>
+                )}
                 <input
                     aria-describedby={messageId}
                     aria-disabled={disabled}

diff --git a/src/blocks/PasswordInput.tsx b/src/blocks/PasswordInput.tsx
@@ -101,13 +101,15 @@ export const PasswordInput = memo(
                 ref={ref}
                 {...rest}
             >
-                <label
-                    className={cx(fr.cx("fr-label", hideLabel && "fr-sr-only"), classes.label)}
-                    htmlFor={inputId}
-                >
-                    {label}
-                    {hintText !== undefined && <span className="fr-hint-text">{hintText}</span>}
-                </label>
+                {Boolean(label || hintText) && (
+                    <label
+                        className={cx(fr.cx("fr-label", hideLabel && "fr-sr-only"), classes.label)}
+                        htmlFor={inputId}
+                    >
+                        {label}
+                        {hintText !== undefined && <span className="fr-hint-text">{hintText}</span>}
+                    </label>
+                )}
                 <div className={fr.cx("fr-input-wrap")}>
                     <input
                         {...nativeInputProps}

diff --git a/src/shared/Fieldset.tsx b/src/shared/Fieldset.tsx
@@ -167,12 +167,14 @@ export const Fieldset = memo(
                                 name={radioName}
                                 {...nativeInputProps}
                             />
-                            <label className={fr.cx("fr-label")} htmlFor={getInputId(i)}>
-                                {label}
-                                {hintText !== undefined && (
-                                    <span className={fr.cx("fr-hint-text")}>{hintText}</span>
-                                )}
-                            </label>
+                            {Boolean(label || hintText) && (
+                                <label className={fr.cx("fr-label")} htmlFor={getInputId(i)}>
+                                    {label}
+                                    {hintText !== undefined && (
+                                        <span className={fr.cx("fr-hint-text")}>{hintText}</span>
+                                    )}
+                                </label>
+                            )}
                             {"illustration" in rest && (
                                 <div className={fr.cx("fr-radio-rich__img")}>
                                     {rest.illustration}