Add id to the outer div

Author: Pavitra Khatri

package-lock.json

@@ -256,8 +256,8 @@ describe("File Upload", () => {
   test('labels and inputs are linked with for and id attribute', async () => {
     let { renderResponse } = await helper(field);
     const input = await renderResponse.container.getElementsByClassName('cmp-adaptiveform-fileinput__widget');
-    const label = await renderResponse.queryByText(field.label.value);
-    expect(input[0]?.getAttribute('id')).toEqual(label?.getAttribute('for'));
+    const label = await renderResponse.container.getElementsByClassName('cmp-adaptiveform-fileinput__widgetlabel');
+    expect(input[0]?.getAttribute('id')).toEqual(label[0]?.getAttribute('for'));
   });
 
   test('Drag and drop files', async () => {

packages/react-vanilla-components/__tests__/components/FileUpload.test.tsx

@@ -51,6 +51,7 @@ const Accordion = (props: PROPS_PANEL) => {
     <div
       className={`cmp-accordion ${appliedCssClassNames || ''}`}
       data-cmp-is="adaptiveFormAccordion"
+      id={id}
       data-cmp-single-expansion="true"
       data-placeholder-text="false"
       data-cmp-visible={visible}

packages/react-vanilla-components/src/components/Accordion/Accordion.tsx

@@ -30,7 +30,7 @@ const Button = (props: PROPS) => {
   }, [props.dispatchClick]);
 
   return (
-    <div className={`cmp-adaptiveform-button ${appliedCssClassNames || ''}`}>
+    <div className={`cmp-adaptiveform-button ${appliedCssClassNames || ''}`} id={id}>
       <FieldWrapper
         bemBlock='cmp-adaptiveform-checkbox'
         label={label}

packages/react-vanilla-components/src/components/Button.tsx

@@ -34,6 +34,7 @@ const CheckBox = (props: PROPS) => {
     <div
       className={`cmp-adaptiveform-checkbox cmp-adaptiveform-checkbox--${selectedValue === value ? 'filled' : 'empty'} ${appliedCssClassNames || ''}`}
       data-cmp-is="adaptiveFormCheckBox"
+      id={id}
       data-cmp-visible={visible}
       data-cmp-enabled={enabled}
       data-cmp-required={required}

packages/react-vanilla-components/src/components/CheckBox.tsx

@@ -57,6 +57,7 @@ const CheckBoxGroup = (props: PROPS) => {
     <div
       className={`cmp-adaptiveform-checkboxgroup cmp-adaptiveform-checkboxgroup--${newVal.length ? 'filled' : 'empty'} ${appliedCssClassNames || ''}`}
       data-cmp-is="adaptiveFormCheckBoxGroup"
+      id={id}
       data-cmp-visible={visible}
       data-cmp-enabled={enabled}
       data-cmp-required={required}

packages/react-vanilla-components/src/components/CheckBoxGroup.tsx

@@ -44,6 +44,7 @@ const DateInput = (props: PROPS) => {
     <div
       className={`cmp-adaptiveform-datepicker cmp-adaptiveform-datepicker--${value ? 'filled' : 'empty'} ${appliedCssClassNames || ''}`}
       data-cmp-is="adaptiveFormDatePicker"
+      id={id}
       data-cmp-visible={visible}
       data-cmp-enabled={enabled}
       data-cmp-required={required}

packages/react-vanilla-components/src/components/DateInput.tsx

@@ -36,6 +36,7 @@ const DropDown = (props: PROPS) => {
     <div
       className={`cmp-adaptiveform-dropdown cmp-adaptiveform-dropdown--${value ? 'filled' : 'empty'} ${appliedCssClassNames || ''}`}
       data-cmp-is="adaptiveFormDropDown"
+      id={id}
       data-cmp-visible={visible}
       data-cmp-enabled={enabled}
       data-cmp-required={required}

packages/react-vanilla-components/src/components/DropDown.tsx

@@ -104,6 +104,7 @@ const FileUpload = (props: PROPS) => {
       className={`cmp-adaptiveform-fileinput cmp-adaptiveform-fileinput--${
         isFilled ? 'filled' : 'empty'
       } ${appliedCssClassNames || ''}`}
+      id={id}
       data-cmp-is="adaptiveFormFileInput"
       data-cmp-visible={visible}
       data-cmp-enabled={enabled}
@@ -133,15 +134,15 @@ const FileUpload = (props: PROPS) => {
               {properties?.dragDropText}
             </div>
             <label
-              htmlFor={id}
+              htmlFor={`${id}_widget`}
               className="cmp-adaptiveform-fileinput__widgetlabel"
             >
               Attach
             </label>
             <input
               ref={fileInputField}
               className="cmp-adaptiveform-fileinput__widget"
-              id={id}
+              id={`${id}_widget`}
               type="file"
               name={name}
               onChange={fileUploadHandler}

packages/react-vanilla-components/src/components/FileUpload.tsx

@@ -37,6 +37,7 @@ const HCaptchaComponent = (props: PROPS) => {
     <div
       className={`${bemClass} ${bemClass}--${value ? 'filled' : 'empty'} ${appliedCssClassNames || ''}`}
       data-cmp-is="adaptiveFormHCaptcha"
+      id={props.id}
       data-cmp-visible={visible}
       data-cmp-enabled={enabled}
       data-cmp-required={required}