fix(Textarea): remove duplicate label content for better accessibility

Author: domihustinova

packages/orbit-components/src/Textarea/__tests__/index.test.tsx

@@ -49,8 +49,8 @@ describe("Textarea", () => {
     expect(textarea).toHaveAttribute("name", name);
     expect(textarea).toHaveAttribute("data-sample", "Sample");
     expect(textarea).not.toBeInvalid();
-    expect(textarea.parentElement).toHaveStyle({ marginBottom: "12px" });
     expect(textarea).toHaveStyle({ padding: "12px" });
+    expect(document.querySelector(".orbit-textarea")).toHaveStyle({ marginBottom: "12px" });
   });
 
   it("should trigger event handlers", async () => {

packages/orbit-components/src/Textarea/index.tsx

@@ -57,69 +57,73 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, Props>((props, ref) => {
   const shown = tooltipShown || tooltipShownHover;
 
   return (
-    <label
+    <div
       className={cx(
+        "orbit-textarea",
         "font-base relative flex w-full flex-col",
         fullHeight && "h-full flex-1",
         spaceAfter && getSpaceAfterClasses(spaceAfter),
       )}
-      ref={labelRef}
     >
-      {label && (
-        <FormLabel
-          error={!!error}
-          help={!!help}
-          required={required}
-          iconRef={iconRef}
-          onMouseEnter={() => setTooltipShownHover(true)}
-          onMouseLeave={() => setTooltipShownHover(false)}
-        >
-          {label}
-        </FormLabel>
-      )}
-
-      <textarea
-        className={cx(
-          "w-full appearance-none",
-          "font-base text-normal p-300 leading-normal",
-          "rounded-100 relative box-border block overflow-auto",
-          "min-h-form-box-normal",
-          "duration-fast transition-shadow ease-in-out",
-          "border border-transparent",
-          // TODO: remove when will be migrated from tmp-folder
-          resize === RESIZE_OPTIONS.VERTICAL ? "resize-y" : "resize-none",
-          error ? "shadow-form-element-error" : "shadow-form-element",
-          disabled ? "cursor-not-allowed" : "cursor-text",
-          fullHeight && "h-full flex-1",
-          disabled || readOnly
-            ? "bg-form-element-disabled-background"
-            : [
-                "bg-form-element-background",
-                error ? "hover:shadow-form-element-error-hover" : "hover:shadow-form-element-hover",
-              ],
-          "[&::placeholder]:text-form-element-foreground",
+      <label ref={labelRef}>
+        {label && (
+          <FormLabel
+            error={!!error}
+            help={!!help}
+            required={required}
+            iconRef={iconRef}
+            onMouseEnter={() => setTooltipShownHover(true)}
+            onMouseLeave={() => setTooltipShownHover(false)}
+          >
+            {label}
+          </FormLabel>
         )}
-        data-state={getFieldDataState(!!error)}
-        data-test={dataTest}
-        aria-required={!!required}
-        id={inputId}
-        name={name}
-        value={value}
-        defaultValue={defaultValue}
-        disabled={disabled}
-        placeholder={String(placeholder)}
-        maxLength={maxLength}
-        onChange={onChange}
-        rows={rows}
-        onFocus={handleFocus}
-        onBlur={onBlur}
-        tabIndex={tabIndex ? Number(tabIndex) : undefined}
-        readOnly={readOnly}
-        ref={ref}
-        aria-describedby={shown ? `${inputId}-feedback` : undefined}
-        aria-invalid={error ? true : undefined}
-        {...dataAttrs}
-      />
+
+        <textarea
+          className={cx(
+            "w-full appearance-none",
+            "font-base text-normal p-300 leading-normal",
+            "rounded-100 relative box-border block overflow-auto",
+            "min-h-form-box-normal",
+            "duration-fast transition-shadow ease-in-out",
+            "border border-transparent",
+            // TODO: remove when will be migrated from tmp-folder
+            resize === RESIZE_OPTIONS.VERTICAL ? "resize-y" : "resize-none",
+            error ? "shadow-form-element-error" : "shadow-form-element",
+            disabled ? "cursor-not-allowed" : "cursor-text",
+            fullHeight && "h-full flex-1",
+            disabled || readOnly
+              ? "bg-form-element-disabled-background"
+              : [
+                  "bg-form-element-background",
+                  error
+                    ? "hover:shadow-form-element-error-hover"
+                    : "hover:shadow-form-element-hover",
+                ],
+            "[&::placeholder]:text-form-element-foreground",
+          )}
+          data-state={getFieldDataState(!!error)}
+          data-test={dataTest}
+          aria-required={!!required}
+          id={inputId}
+          name={name}
+          value={value}
+          defaultValue={defaultValue}
+          disabled={disabled}
+          placeholder={String(placeholder)}
+          maxLength={maxLength}
+          onChange={onChange}
+          rows={rows}
+          onFocus={handleFocus}
+          onBlur={onBlur}
+          tabIndex={tabIndex ? Number(tabIndex) : undefined}
+          readOnly={readOnly}
+          ref={ref}
+          aria-describedby={shown ? `${inputId}-feedback` : undefined}
+          aria-invalid={error ? true : undefined}
+          {...dataAttrs}
+        />
+      </label>
       {hasTooltip && (
         <ErrorFormTooltip
           id={`${inputId}-feedback`}
@@ -131,7 +135,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, Props>((props, ref) => {
           referenceElement={labelRef}
         />
       )}
-    </label>
+    </div>
   );
 });