fix: Remove 'label' attribute from <label> tag (#7101)

* Remove 'label' attribute from <label> tag * fix: Remove 'label' attribute from <label> tag * Reverted Simple.js
grommet · Feb 1, 2024 · 9aee303 · 9aee303
1 parent c37df9c
commit 9aee303
Show file tree

Hide file tree

Showing 11 changed files with 2 additions and 102 deletions.
diff --git a/src/js/components/CheckBox/CheckBox.js b/src/js/components/CheckBox/CheckBox.js
@@ -215,7 +215,7 @@ const CheckBox = forwardRef(
         reverse={reverse}
         {...removeUndefined({ htmlFor: id, disabled })}
         checked={checked}
-        label={label}
+        labelProp={label}
         onClick={stopLabelClick}
         pad={pad}
         onMouseEnter={(event) => onMouseEnter?.(event)}

diff --git a/src/js/components/CheckBox/StyledCheckBox.js b/src/js/components/CheckBox/StyledCheckBox.js
@@ -54,7 +54,7 @@ const StyledCheckBoxContainer = styled.label`
   display: flex;
   flex-direction: row;
   align-items: ${(props) =>
-    typeof props.label === 'string'
+    typeof props.labelProp === 'string'
       ? props.theme.checkBox.label.align
       : undefined};
   user-select: none;

diff --git a/src/js/components/CheckBox/__tests__/__snapshots__/CheckBox-test.tsx.snap b/src/js/components/CheckBox/__tests__/__snapshots__/CheckBox-test.tsx.snap
@@ -281,7 +281,6 @@ exports[`CheckBox controlled 1`] = `
 >
   <label
     class="c1"
-    label="test-label"
   >
     <div
       class="c2 c3"
@@ -319,7 +318,6 @@ exports[`CheckBox controlled 2`] = `
 >
   <label
     class="StyledCheckBox__StyledCheckBoxContainer-sc-1dbk5ju-1 gVeQxx"
-    label="test-label"
   >
     <div
       class="StyledBox-sc-13pk1d4-0 vOYHH StyledCheckBox-sc-1dbk5ju-6 bjeWAX"
@@ -479,7 +477,6 @@ exports[`CheckBox custom theme 1`] = `
 >
   <label
     class="c1"
-    label="test-label"
   >
     <div
       class="c2 c3"
@@ -1060,7 +1057,6 @@ exports[`CheckBox indeterminate renders 1`] = `
   </label>
   <label
     class="c7"
-    label="test label"
   >
     <div
       class="c8 c3"
@@ -1238,7 +1234,6 @@ exports[`CheckBox label renders 1`] = `
 >
   <label
     class="c1"
-    label="test label"
   >
     <div
       class="c2 c3"
@@ -1257,7 +1252,6 @@ exports[`CheckBox label renders 1`] = `
   </label>
   <label
     class="c6"
-    label="[object Object]"
   >
     <div
       class="c2 c3"
@@ -1401,7 +1395,6 @@ exports[`CheckBox label should not have accessibility violations 1`] = `
 >
   <label
     class="c1"
-    label="test"
   >
     <div
       class="c2 c3"
@@ -1838,7 +1831,6 @@ exports[`CheckBox renders custom checked icon 1`] = `
 >
   <label
     class="c1"
-    label="test-label"
   >
     <div
       class="c2 c3"
@@ -1987,7 +1979,6 @@ exports[`CheckBox reverse renders 1`] = `
 >
   <label
     class="c1"
-    label="test label"
   >
     <span>
       test label
@@ -2161,7 +2152,6 @@ exports[`CheckBox reverse toggle fill 1`] = `
 >
   <label
     class="c1"
-    label="test label"
   >
     <span>
       test label
@@ -2184,7 +2174,6 @@ exports[`CheckBox reverse toggle fill 1`] = `
   </label>
   <label
     class="c1"
-    label="test label"
   >
     <div
       class="c7 c3"
@@ -2540,7 +2529,6 @@ exports[`CheckBox toggle renders 1`] = `
   </label>
   <label
     class="c7"
-    label="test label"
   >
     <div
       class="c8 c3"

diff --git a/src/js/components/CheckBoxGroup/__tests__/__snapshots__/CheckBoxGroup-test.tsx.snap b/src/js/components/CheckBoxGroup/__tests__/__snapshots__/CheckBoxGroup-test.tsx.snap
@@ -10,7 +10,6 @@ exports[`CheckBoxGroup custom theme 1`] = `
   >
     <label
       class="StyledCheckBox__StyledCheckBoxContainer-sc-1dbk5ju-1 gVeQxx"
-      label="first-label"
     >
       <div
         class="StyledBox-sc-13pk1d4-0 vOYHH StyledCheckBox-sc-1dbk5ju-6 bjeWAX"
@@ -32,7 +31,6 @@ exports[`CheckBoxGroup custom theme 1`] = `
     />
     <label
       class="StyledCheckBox__StyledCheckBoxContainer-sc-1dbk5ju-1 gVeQxx"
-      label="second-label"
     >
       <div
         class="StyledBox-sc-13pk1d4-0 vOYHH StyledCheckBox-sc-1dbk5ju-6 bjeWAX"
@@ -64,7 +62,6 @@ exports[`CheckBoxGroup defaultValue renders 1`] = `
     >
       <label
         class="StyledCheckBox__StyledCheckBoxContainer-sc-1dbk5ju-1 gVeQxx"
-        label="First"
       >
         <div
           class="StyledBox-sc-13pk1d4-0 vOYHH StyledCheckBox-sc-1dbk5ju-6 bjeWAX"
@@ -98,7 +95,6 @@ exports[`CheckBoxGroup defaultValue renders 1`] = `
       />
       <label
         class="StyledCheckBox__StyledCheckBoxContainer-sc-1dbk5ju-1 gVeQxx"
-        label="Second"
       >
         <div
           class="StyledBox-sc-13pk1d4-0 vOYHH StyledCheckBox-sc-1dbk5ju-6 bjeWAX"
@@ -131,7 +127,6 @@ exports[`CheckBoxGroup disabled renders 1`] = `
     <label
       class="StyledCheckBox__StyledCheckBoxContainer-sc-1dbk5ju-1 dvTzMc"
       disabled=""
-      label="First"
     >
       <div
         class="StyledBox-sc-13pk1d4-0 vOYHH StyledCheckBox-sc-1dbk5ju-6 bjeWAX"
@@ -157,7 +152,6 @@ exports[`CheckBoxGroup disabled renders 1`] = `
     <label
       class="StyledCheckBox__StyledCheckBoxContainer-sc-1dbk5ju-1 dvTzMc"
       disabled=""
-      label="Second"
     >
       <div
         class="StyledBox-sc-13pk1d4-0 vOYHH StyledCheckBox-sc-1dbk5ju-6 bjeWAX"
@@ -185,7 +179,6 @@ exports[`CheckBoxGroup disabled renders 1`] = `
     <label
       class="StyledCheckBox__StyledCheckBoxContainer-sc-1dbk5ju-1 dvTzMc"
       disabled=""
-      label="First"
     >
       <div
         class="StyledBox-sc-13pk1d4-0 vOYHH StyledCheckBox-sc-1dbk5ju-6 bjeWAX"
@@ -213,7 +206,6 @@ exports[`CheckBoxGroup disabled renders 1`] = `
     <label
       class="StyledCheckBox__StyledCheckBoxContainer-sc-1dbk5ju-1 dvTzMc"
       disabled=""
-      label="First"
     >
       <div
         class="StyledBox-sc-13pk1d4-0 vOYHH StyledCheckBox-sc-1dbk5ju-6 bjeWAX"
@@ -247,7 +239,6 @@ exports[`CheckBoxGroup initial value renders 1`] = `
   >
     <label
       class="StyledCheckBox__StyledCheckBoxContainer-sc-1dbk5ju-1 gVeQxx"
-      label="Maui"
     >
       <div
         class="StyledBox-sc-13pk1d4-0 vOYHH StyledCheckBox-sc-1dbk5ju-6 bjeWAX"
@@ -269,7 +260,6 @@ exports[`CheckBoxGroup initial value renders 1`] = `
     />
     <label
       class="StyledCheckBox__StyledCheckBoxContainer-sc-1dbk5ju-1 gVeQxx"
-      label="Jerusalem"
     >
       <div
         class="StyledBox-sc-13pk1d4-0 vOYHH StyledCheckBox-sc-1dbk5ju-6 bjeWAX"
@@ -303,7 +293,6 @@ exports[`CheckBoxGroup initial value renders 1`] = `
     />
     <label
       class="StyledCheckBox__StyledCheckBoxContainer-sc-1dbk5ju-1 gVeQxx"
-      label="Wuhan"
     >
       <div
         class="StyledBox-sc-13pk1d4-0 vOYHH StyledCheckBox-sc-1dbk5ju-6 bjeWAX"
@@ -346,7 +335,6 @@ exports[`CheckBoxGroup labelKey 1`] = `
   >
     <label
       class="StyledCheckBox__StyledCheckBoxContainer-sc-1dbk5ju-1 gVeQxx"
-      label="first-label"
     >
       <div
         class="StyledBox-sc-13pk1d4-0 vOYHH StyledCheckBox-sc-1dbk5ju-6 bjeWAX"
@@ -368,7 +356,6 @@ exports[`CheckBoxGroup labelKey 1`] = `
     />
     <label
       class="StyledCheckBox__StyledCheckBoxContainer-sc-1dbk5ju-1 gVeQxx"
-      label="second-label"
     >
       <div
         class="StyledBox-sc-13pk1d4-0 vOYHH StyledCheckBox-sc-1dbk5ju-6 bjeWAX"
@@ -399,7 +386,6 @@ exports[`CheckBoxGroup onChange 1`] = `
   >
     <label
       class="StyledCheckBox__StyledCheckBoxContainer-sc-1dbk5ju-1 gVeQxx"
-      label="first-label"
     >
       <div
         class="StyledBox-sc-13pk1d4-0 vOYHH StyledCheckBox-sc-1dbk5ju-6 bjeWAX"
@@ -432,7 +418,6 @@ exports[`CheckBoxGroup onChange 1`] = `
     />
     <label
       class="StyledCheckBox__StyledCheckBoxContainer-sc-1dbk5ju-1 gVeQxx"
-      label="second-label"
     >
       <div
         class="StyledBox-sc-13pk1d4-0 vOYHH StyledCheckBox-sc-1dbk5ju-6 bjeWAX"
@@ -464,7 +449,6 @@ exports[`CheckBoxGroup onClick for check and uncheck a CheckBox 1`] = `
   >
     <label
       class="StyledCheckBox__StyledCheckBoxContainer-sc-1dbk5ju-1 gVeQxx"
-      label="first-label"
     >
       <div
         class="StyledBox-sc-13pk1d4-0 vOYHH StyledCheckBox-sc-1dbk5ju-6 bjeWAX"
@@ -497,7 +481,6 @@ exports[`CheckBoxGroup onClick for check and uncheck a CheckBox 1`] = `
     />
     <label
       class="StyledCheckBox__StyledCheckBoxContainer-sc-1dbk5ju-1 gVeQxx"
-      label="second-label"
     >
       <div
         class="StyledBox-sc-13pk1d4-0 vOYHH StyledCheckBox-sc-1dbk5ju-6 bjeWAX"
@@ -529,7 +512,6 @@ exports[`CheckBoxGroup onClick for check and uncheck a CheckBox 2`] = `
   >
     <label
       class="StyledCheckBox__StyledCheckBoxContainer-sc-1dbk5ju-1 gVeQxx"
-      label="first-label"
     >
       <div
         class="StyledBox-sc-13pk1d4-0 vOYHH StyledCheckBox-sc-1dbk5ju-6 bjeWAX"
@@ -551,7 +533,6 @@ exports[`CheckBoxGroup onClick for check and uncheck a CheckBox 2`] = `
     />
     <label
       class="StyledCheckBox__StyledCheckBoxContainer-sc-1dbk5ju-1 gVeQxx"
-      label="second-label"
     >
       <div
         class="StyledBox-sc-13pk1d4-0 vOYHH StyledCheckBox-sc-1dbk5ju-6 bjeWAX"
@@ -582,7 +563,6 @@ exports[`CheckBoxGroup options renders 1`] = `
   >
     <label
       class="StyledCheckBox__StyledCheckBoxContainer-sc-1dbk5ju-1 gVeQxx"
-      label="First"
     >
       <div
         class="StyledBox-sc-13pk1d4-0 vOYHH StyledCheckBox-sc-1dbk5ju-6 bjeWAX"
@@ -604,7 +584,6 @@ exports[`CheckBoxGroup options renders 1`] = `
     />
     <label
       class="StyledCheckBox__StyledCheckBoxContainer-sc-1dbk5ju-1 gVeQxx"
-      label="Second"
     >
       <div
         class="StyledBox-sc-13pk1d4-0 vOYHH StyledCheckBox-sc-1dbk5ju-6 bjeWAX"
@@ -635,7 +614,6 @@ exports[`CheckBoxGroup value renders 1`] = `
   >
     <label
       class="StyledCheckBox__StyledCheckBoxContainer-sc-1dbk5ju-1 gVeQxx"
-      label="First"
     >
       <div
         class="StyledBox-sc-13pk1d4-0 vOYHH StyledCheckBox-sc-1dbk5ju-6 bjeWAX"
@@ -669,7 +647,6 @@ exports[`CheckBoxGroup value renders 1`] = `
     />
     <label
       class="StyledCheckBox__StyledCheckBoxContainer-sc-1dbk5ju-1 gVeQxx"
-      label="Second"
     >
       <div
         class="StyledBox-sc-13pk1d4-0 vOYHH StyledCheckBox-sc-1dbk5ju-6 bjeWAX"
@@ -700,7 +677,6 @@ exports[`CheckBoxGroup valueKey 1`] = `
   >
     <label
       class="StyledCheckBox__StyledCheckBoxContainer-sc-1dbk5ju-1 gVeQxx"
-      label="first-label"
     >
       <div
         class="StyledBox-sc-13pk1d4-0 vOYHH StyledCheckBox-sc-1dbk5ju-6 bjeWAX"
@@ -722,7 +698,6 @@ exports[`CheckBoxGroup valueKey 1`] = `
     />
     <label
       class="StyledCheckBox__StyledCheckBoxContainer-sc-1dbk5ju-1 gVeQxx"
-      label="second-label"
     >
       <div
         class="StyledBox-sc-13pk1d4-0 vOYHH StyledCheckBox-sc-1dbk5ju-6 bjeWAX"