Remove invisible InputGroup and Radio labels from code since pare…

…nt `<fieldset>`s still have accessible `<legend>`
react-ui-org · Sep 25, 2023 · da83d3e · da83d3e
1 parent f90231c
commit da83d3e
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 31 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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');
         }