From c60d3e69ca0edf7e2cba2aa6fd60c5cab19b18a3 Mon Sep 17 00:00:00 2001
From: Adam Kudrna <adam@adamkudrna.cz>
Date: Mon, 25 Sep 2023 16:25:59 +0200
Subject: [PATCH] Remove invisible `InputGroup` and `Radio` labels from code
 since parent `<fieldset>`s still have accessible `<legend>`

---
 src/components/InputGroup/InputGroup.jsx  | 19 +++++++++----------
 src/components/InputGroup/InputGroup.scss |  5 -----
 src/components/Radio/Radio.jsx            | 19 +++++++++----------
 src/components/Radio/Radio.scss           |  5 -----
 tests/propTests/isLabelVisibleTest.js     |  2 +-
 5 files changed, 19 insertions(+), 31 deletions(-)

diff --git a/src/components/InputGroup/InputGroup.jsx b/src/components/InputGroup/InputGroup.jsx
index ef5e7b9f..2b9cc9d5 100644
--- a/src/components/InputGroup/InputGroup.jsx
+++ b/src/components/InputGroup/InputGroup.jsx
@@ -69,16 +69,15 @@ export const InputGroup = ({
       >
         {label}
       </legend>
-      <div
-        aria-hidden
-        className={classNames(
-          styles.label,
-          !isLabelVisible && styles.isLabelHidden,
-        )}
-        id={id && `${id}__displayLabel`}
-      >
-        {label}
-      </div>
+      {isLabelVisible && (
+        <div
+          aria-hidden
+          className={styles.label}
+          id={id && `${id}__displayLabel`}
+        >
+          {label}
+        </div>
+      )}
       <div className={styles.field}>
         <div
           className={styles.inputGroup}
diff --git a/src/components/InputGroup/InputGroup.scss b/src/components/InputGroup/InputGroup.scss
index 698425d0..488d76ab 100644
--- a/src/components/InputGroup/InputGroup.scss
+++ b/src/components/InputGroup/InputGroup.scss
@@ -54,11 +54,6 @@
     @include variants.validation(warning);
 }
 
-// Invisible label
-.isLabelHidden {
-    @include accessibility.hide-text();
-}
-
 // Layouts
 .isRootLayoutVertical,
 .isRootLayoutHorizontal {
diff --git a/src/components/Radio/Radio.jsx b/src/components/Radio/Radio.jsx
index 379021d4..d77a064a 100644
--- a/src/components/Radio/Radio.jsx
+++ b/src/components/Radio/Radio.jsx
@@ -46,16 +46,15 @@ export const Radio = ({
       >
         {label}
       </legend>
-      <div
-        aria-hidden
-        className={classNames(
-          styles.label,
-          !isLabelVisible && styles.isLabelHidden,
-        )}
-        id={id && `${id}__displayLabel`}
-      >
-        {label}
-      </div>
+      {isLabelVisible && (
+        <div
+          aria-hidden
+          className={styles.label}
+          id={id && `${id}__displayLabel`}
+        >
+          {label}
+        </div>
+      )}
       <div className={styles.field}>
         <div className={styles.options}>
           {
diff --git a/src/components/Radio/Radio.scss b/src/components/Radio/Radio.scss
index b36b3a09..d102dfec 100644
--- a/src/components/Radio/Radio.scss
+++ b/src/components/Radio/Radio.scss
@@ -64,11 +64,6 @@
     @include variants.validation(warning);
 }
 
-// Invisible label
-.isLabelHidden {
-    @include accessibility.hide-text();
-}
-
 // Layouts
 .isRootLayoutVertical,
 .isRootLayoutHorizontal {
diff --git a/tests/propTests/isLabelVisibleTest.js b/tests/propTests/isLabelVisibleTest.js
index 91afe220..ade8a8a1 100644
--- a/tests/propTests/isLabelVisibleTest.js
+++ b/tests/propTests/isLabelVisibleTest.js
@@ -22,7 +22,7 @@ export const isLabelVisibleTest = (HtmlTag = 'label') => (
       },
       (rootElement) => {
         if (HtmlTag === 'legend') {
-          expect(within(rootElement).getByTestId('id__displayLabel')).toHaveClass('isLabelHidden');
+          expect(within(rootElement).queryByTestId('id__displayLabel')).not.toBeInTheDocument();
         } else {
           expect(within(rootElement).getByText('label')).toHaveClass('isLabelHidden');
         }