From 1e9e2da710c4755e3a361196f05b0fbbbec30f2a Mon Sep 17 00:00:00 2001
From: Daniel Coroain <danielcoroian15@gmail.com>
Date: Mon, 28 Feb 2022 15:43:13 +0200
Subject: [PATCH] fix(components): link label and input control in a more
 accessible way

---
 .../WebexActivity.stories.storyshot           | 211 ++++++----
 .../WebexMeetingControl.stories.storyshot     |  10 +-
 ...etingGuestAuthentication.stories.storyshot |  32 +-
 ...eetingHostAuthentication.stories.storyshot |  16 +-
 .../WebexSettings.stories.storyshot           |  20 +-
 .../__snapshots__/Actions.stories.storyshot   |  50 ++-
 .../__snapshots__/Inputs.stories.storyshot    | 378 ++++++++++--------
 .../InputChoiceSet/InputChoiceSet.jsx         | 108 ++---
 .../generic/InputField/InputField.jsx         |   9 +
 src/components/inputs/Dropdown/Dropdown.jsx   |  26 +-
 src/components/inputs/Label/Label.jsx         |  45 +--
 src/components/inputs/Label/Label.scss        |   1 +
 src/components/inputs/Textbox/Textbox.jsx     |  19 +-
 13 files changed, 554 insertions(+), 371 deletions(-)

diff --git a/src/components/WebexActivity/__snapshots__/WebexActivity.stories.storyshot b/src/components/WebexActivity/__snapshots__/WebexActivity.stories.storyshot
index a415de247..50f30ebc5 100644
--- a/src/components/WebexActivity/__snapshots__/WebexActivity.stories.storyshot
+++ b/src/components/WebexActivity/__snapshots__/WebexActivity.stories.storyshot
@@ -113,20 +113,24 @@ Array [
                 }
               }
             />
-            <label
+            <div
               className="wxc wxc-label wxc wxc-input-field wxc wxc-text-input wxc wxc-adaptive-cards-input-text wxc wxc-ac wxc-ac-is-visible--true wxc-ac-input-style--text wxc-ac-height--auto wxc-input-field--has-right-icon"
               style={Object {}}
             >
-              <div
+              <label
                 className="wxc-label__label-text"
+                htmlFor="wxc-0-control"
+                id="wxc-0-label"
               >
-                First Name
+                <span>
+                  First Name
+                </span>
                 <span
                   className="wxc-label__required"
                 >
                    *
                 </span>
-              </div>
+              </label>
               <div
                 className="wxc-label__control"
               >
@@ -134,9 +138,11 @@ Array [
                   className="wxc-input-field__form-control"
                 >
                   <input
+                    aria-labelledby="wxc-0-label"
                     autoFocus={false}
                     className="wxc-input-field__input"
                     disabled={false}
+                    id="wxc-0-control"
                     onChange={[Function]}
                     required={true}
                     tabIndex={0}
@@ -145,7 +151,7 @@ Array [
                   />
                 </div>
               </div>
-            </label>
+            </div>
             <div
               className="wxc wxc-ac-spacer wxc-ac-spacer--spacing--default"
               style={
@@ -154,20 +160,24 @@ Array [
                 }
               }
             />
-            <label
+            <div
               className="wxc wxc-label wxc wxc-input-field wxc wxc-text-input wxc wxc-adaptive-cards-input-text wxc wxc-ac wxc-ac-is-visible--true wxc-ac-input-style--text wxc-ac-height--auto wxc-input-field--has-right-icon"
               style={Object {}}
             >
-              <div
+              <label
                 className="wxc-label__label-text"
+                htmlFor="wxc-0-control"
+                id="wxc-0-label"
               >
-                Last Name
+                <span>
+                  Last Name
+                </span>
                 <span
                   className="wxc-label__required"
                 >
                    *
                 </span>
-              </div>
+              </label>
               <div
                 className="wxc-label__control"
               >
@@ -175,9 +185,11 @@ Array [
                   className="wxc-input-field__form-control"
                 >
                   <input
+                    aria-labelledby="wxc-0-label"
                     autoFocus={false}
                     className="wxc-input-field__input"
                     disabled={false}
+                    id="wxc-0-control"
                     onChange={[Function]}
                     required={true}
                     tabIndex={0}
@@ -186,7 +198,7 @@ Array [
                   />
                 </div>
               </div>
-            </label>
+            </div>
           </div>
           <div
             className="wxc wxc-ac-spacer wxc-ac-spacer--spacing--default"
@@ -196,20 +208,24 @@ Array [
               }
             }
           />
-          <label
+          <div
             className="wxc wxc-label wxc wxc-input-field wxc wxc-text-input wxc wxc-adaptive-cards-input-text wxc wxc-ac wxc-ac-is-visible--true wxc-ac-input-style--email wxc-ac-height--auto wxc-input-field--has-right-icon"
             style={Object {}}
           >
-            <div
+            <label
               className="wxc-label__label-text"
+              htmlFor="wxc-0-control"
+              id="wxc-0-label"
             >
-              Email
+              <span>
+                Email
+              </span>
               <span
                 className="wxc-label__required"
               >
                  *
               </span>
-            </div>
+            </label>
             <div
               className="wxc-label__control"
             >
@@ -217,9 +233,11 @@ Array [
                 className="wxc-input-field__form-control"
               >
                 <input
+                  aria-labelledby="wxc-0-label"
                   autoFocus={false}
                   className="wxc-input-field__input"
                   disabled={false}
+                  id="wxc-0-control"
                   onChange={[Function]}
                   required={true}
                   tabIndex={0}
@@ -228,7 +246,7 @@ Array [
                 />
               </div>
             </div>
-          </label>
+          </div>
         </div>
         <div
           className="wxc wxc-ac-spacer wxc-ac-spacer--spacing--default"
@@ -238,68 +256,63 @@ Array [
             }
           }
         />
-        <label
-          className="wxc wxc-label wxc wxc-adaptive-cards-input-choice-set wxc wxc-ac wxc-ac-is-visible--true wxc-ac-container--vertical"
-          style={Object {}}
+        <div
+          className="wxc wxc-label wxc wxc-dropdown wxc wxc-adaptive-cards-input-choice-set wxc wxc-ac wxc-ac-is-visible--true wxc-ac-container--vertical"
         >
-          <div
+          <label
             className="wxc-label__label-text"
+            htmlFor="wxc-0-control"
+            id="wxc-0-label"
           >
-            Room type
+            <span>
+              Room type
+            </span>
             <span
               className="wxc-label__required"
             >
                *
             </span>
-          </div>
+          </label>
           <div
             className="wxc-label__control"
           >
-            <label
-              className="wxc wxc-label wxc wxc-dropdown"
-              id="wxc-0"
+            <div
+              className="wxc-dropdown__control"
+              disabled={false}
+              onKeyDown={[Function]}
             >
               <div
-                className="wxc-label__control"
+                aria-controls="wxc-0-options"
+                aria-haspopup="listbox"
+                aria-labelledby="wxc-0-label"
+                className="wxc-dropdown__selected-option "
+                id="wxc-0-control"
+                onClick={[Function]}
+                onKeyDown={[Function]}
+                role="combobox"
+                tabIndex={0}
               >
-                <div
-                  className="wxc-dropdown__control"
-                  disabled={false}
-                  onKeyDown={[Function]}
+                <span
+                  className="wxc-dropdown__label"
                 >
-                  <div
-                    aria-controls="wxc-0"
-                    aria-haspopup="listbox"
-                    aria-labelledby="wxc-0"
-                    className="wxc-dropdown__selected-option "
-                    onClick={[Function]}
-                    onKeyDown={[Function]}
-                    role="combobox"
-                    tabIndex={0}
-                  >
-                    <span
-                      className="wxc-dropdown__label"
-                    >
-                      Please select the room type
-                    </span>
-                    <svg
-                      className="wxc-icon "
-                      height={13}
-                      style={Object {}}
-                      viewBox="0 0 26 14"
-                      width={13}
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M25.7075 0.293202C25.52 0.105701 25.2656 0.000366211 25.0004 0.000366211C24.7353 0.000366211 24.4809 0.105701 24.2934 0.293202L13 11.5862L1.70699 0.293202C1.51851 0.110381 1.26568 0.00902984 1.0031 0.0110359C0.740528 0.013042 0.489278 0.118244 0.303611 0.303925C0.117943 0.489605 0.0127584 0.740862 0.0107709 1.00344C0.00878336 1.26601 0.110153 1.51883 0.292988 1.7073L12.293 13.7073C12.4805 13.8948 12.7348 14.0001 13 14.0001C13.2652 14.0001 13.5195 13.8948 13.707 13.7073L25.707 1.7073C25.8946 1.51984 26 1.26555 26.0001 1.00036C26.0002 0.735168 25.8949 0.4808 25.7075 0.293202Z"
-                      />
-                    </svg>
-                  </div>
-                </div>
+                  Please select the room type
+                </span>
+                <svg
+                  className="wxc-icon "
+                  height={13}
+                  style={Object {}}
+                  viewBox="0 0 26 14"
+                  width={13}
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M25.7075 0.293202C25.52 0.105701 25.2656 0.000366211 25.0004 0.000366211C24.7353 0.000366211 24.4809 0.105701 24.2934 0.293202L13 11.5862L1.70699 0.293202C1.51851 0.110381 1.26568 0.00902984 1.0031 0.0110359C0.740528 0.013042 0.489278 0.118244 0.303611 0.303925C0.117943 0.489605 0.0127584 0.740862 0.0107709 1.00344C0.00878336 1.26601 0.110153 1.51883 0.292988 1.7073L12.293 13.7073C12.4805 13.8948 12.7348 14.0001 13 14.0001C13.2652 14.0001 13.5195 13.8948 13.707 13.7073L25.707 1.7073C25.8946 1.51984 26 1.26555 26.0001 1.00036C26.0002 0.735168 25.8949 0.4808 25.7075 0.293202Z"
+                  />
+                </svg>
               </div>
-            </label>
+            </div>
           </div>
-        </label>
+        </div>
         <div
           className="wxc wxc-ac-spacer wxc-ac-spacer--spacing--default"
           style={
@@ -308,20 +321,24 @@ Array [
             }
           }
         />
-        <label
+        <div
           className="wxc wxc-label wxc wxc-input-field wxc wxc-number-input wxc wxc-adaptive-cards-input-number wxc wxc-ac wxc-ac-is-visible--true wxc-input-field--has-right-icon wxc-input-field--has-right-controls"
           style={Object {}}
         >
-          <div
+          <label
             className="wxc-label__label-text"
+            htmlFor="wxc-0-control"
+            id="wxc-0-label"
           >
-            Number of Guests
+            <span>
+              Number of Guests
+            </span>
             <span
               className="wxc-label__required"
             >
                *
             </span>
-          </div>
+          </label>
           <div
             className="wxc-label__control"
           >
@@ -329,9 +346,11 @@ Array [
               className="wxc-input-field__form-control"
             >
               <input
+                aria-labelledby="wxc-0-label"
                 autoFocus={false}
                 className="wxc-input-field__input"
                 disabled={false}
+                id="wxc-0-control"
                 max={10}
                 min={1}
                 onChange={[Function]}
@@ -437,7 +456,7 @@ Array [
               </div>
             </div>
           </div>
-        </label>
+        </div>
         <div
           className="wxc wxc-ac-spacer wxc-ac-spacer--spacing--default"
           style={
@@ -458,20 +477,24 @@ Array [
               }
             }
           />
-          <label
+          <div
             className="wxc wxc-label wxc wxc-input-field wxc wxc-date-input wxc wxc-adaptive-cards-input-date wxc wxc-ac wxc-ac-is-visible--true wxc-ac-height--auto"
             style={Object {}}
           >
-            <div
+            <label
               className="wxc-label__label-text"
+              htmlFor="wxc-0-control"
+              id="wxc-0-label"
             >
-              Arrival Date
+              <span>
+                Arrival Date
+              </span>
               <span
                 className="wxc-label__required"
               >
                  *
               </span>
-            </div>
+            </label>
             <div
               className="wxc-label__control"
             >
@@ -479,9 +502,11 @@ Array [
                 className="wxc-input-field__form-control"
               >
                 <input
+                  aria-labelledby="wxc-0-label"
                   autoFocus={false}
                   className="wxc-input-field__input"
                   disabled={false}
+                  id="wxc-0-control"
                   onChange={[Function]}
                   required={true}
                   tabIndex={0}
@@ -490,7 +515,7 @@ Array [
                 />
               </div>
             </div>
-          </label>
+          </div>
           <div
             className="wxc wxc-ac-spacer wxc-ac-spacer--spacing--default"
             style={
@@ -499,20 +524,24 @@ Array [
               }
             }
           />
-          <label
+          <div
             className="wxc wxc-label wxc wxc-input-field wxc wxc-time-input wxc wxc-adaptive-cards-input-time wxc wxc-ac wxc-ac-is-visible--true"
             style={Object {}}
           >
-            <div
+            <label
               className="wxc-label__label-text"
+              htmlFor="wxc-0-control"
+              id="wxc-0-label"
             >
-              Arrival Time
+              <span>
+                Arrival Time
+              </span>
               <span
                 className="wxc-label__required"
               >
                  *
               </span>
-            </div>
+            </label>
             <div
               className="wxc-label__control"
             >
@@ -520,9 +549,11 @@ Array [
                 className="wxc-input-field__form-control"
               >
                 <input
+                  aria-labelledby="wxc-0-label"
                   autoFocus={false}
                   className="wxc-input-field__input"
                   disabled={false}
+                  id="wxc-0-control"
                   onChange={[Function]}
                   required={true}
                   tabIndex={0}
@@ -531,7 +562,7 @@ Array [
                 />
               </div>
             </div>
-          </label>
+          </div>
         </div>
         <div
           className="wxc wxc-ac-spacer wxc-ac-spacer--spacing--default"
@@ -541,20 +572,24 @@ Array [
             }
           }
         />
-        <label
+        <div
           className="wxc wxc-label wxc wxc-input-field wxc wxc-date-input wxc wxc-adaptive-cards-input-date wxc wxc-ac wxc-ac-is-visible--true wxc-ac-height--auto"
           style={Object {}}
         >
-          <div
+          <label
             className="wxc-label__label-text"
+            htmlFor="wxc-0-control"
+            id="wxc-0-label"
           >
-            Departure Date
+            <span>
+              Departure Date
+            </span>
             <span
               className="wxc-label__required"
             >
                *
             </span>
-          </div>
+          </label>
           <div
             className="wxc-label__control"
           >
@@ -562,9 +597,11 @@ Array [
               className="wxc-input-field__form-control"
             >
               <input
+                aria-labelledby="wxc-0-label"
                 autoFocus={false}
                 className="wxc-input-field__input"
                 disabled={false}
+                id="wxc-0-control"
                 onChange={[Function]}
                 required={true}
                 tabIndex={0}
@@ -573,7 +610,7 @@ Array [
               />
             </div>
           </div>
-        </label>
+        </div>
         <div
           className="wxc wxc-ac-spacer wxc-ac-spacer--spacing--medium"
           style={
@@ -582,20 +619,24 @@ Array [
             }
           }
         />
-        <label
+        <div
           className="wxc wxc-label wxc wxc-adaptive-cards-input-choice-set wxc wxc-ac wxc-ac-is-visible--true wxc-ac-container--vertical"
           style={Object {}}
         >
-          <div
+          <label
             className="wxc-label__label-text"
+            htmlFor="wxc-0-control"
+            id="wxc-0-label"
           >
-            Free pickup?
+            <span>
+              Free pickup?
+            </span>
             <span
               className="wxc-label__required"
             >
                *
             </span>
-          </div>
+          </label>
           <div
             className="wxc-label__control"
           >
@@ -638,7 +679,7 @@ Array [
               </span>
             </div>
           </div>
-        </label>
+        </div>
         <div
           className="wxc wxc-ac-spacer wxc-ac-spacer--spacing--default"
           style={
diff --git a/src/components/WebexMeetingControl/__snapshots__/WebexMeetingControl.stories.storyshot b/src/components/WebexMeetingControl/__snapshots__/WebexMeetingControl.stories.storyshot
index edd2f4adb..fbcbbb556 100644
--- a/src/components/WebexMeetingControl/__snapshots__/WebexMeetingControl.stories.storyshot
+++ b/src/components/WebexMeetingControl/__snapshots__/WebexMeetingControl.stories.storyshot
@@ -186,9 +186,8 @@ Array [
   <div
     className="wxc wxc-meeting-control"
   >
-    <label
+    <div
       className="wxc wxc-label wxc wxc-dropdown wxc-meeting-control__control-select wxc-dropdown--disabled"
-      id="wxc-0"
     >
       <div
         className="wxc-label__control"
@@ -199,11 +198,12 @@ Array [
           onKeyDown={[Function]}
         >
           <div
-            aria-controls="wxc-0"
+            aria-controls="wxc-0-options"
             aria-haspopup="listbox"
             aria-label="Use arrow keys to navigate between camera options and hit \\"Enter\\" to select."
-            aria-labelledby="wxc-0"
+            aria-labelledby="wxc-0-label"
             className="wxc-dropdown__selected-option "
+            id="wxc-0-control"
             onClick={[Function]}
             onKeyDown={[Function]}
             role="combobox"
@@ -230,7 +230,7 @@ Array [
           </div>
         </div>
       </div>
-    </label>
+    </div>
   </div>,
   <video
     autoPlay={true}
diff --git a/src/components/WebexMeetingGuestAuthentication/__snapshots__/WebexMeetingGuestAuthentication.stories.storyshot b/src/components/WebexMeetingGuestAuthentication/__snapshots__/WebexMeetingGuestAuthentication.stories.storyshot
index 2bda77000..24cda02a9 100644
--- a/src/components/WebexMeetingGuestAuthentication/__snapshots__/WebexMeetingGuestAuthentication.stories.storyshot
+++ b/src/components/WebexMeetingGuestAuthentication/__snapshots__/WebexMeetingGuestAuthentication.stories.storyshot
@@ -28,14 +28,18 @@ Array [
     <form
       className="wxc-meeting-guest-authentication__form-content"
     >
-      <label
+      <div
         className="wxc wxc-label wxc wxc-input-field wxc wxc-text-input wxc-meeting-guest-authentication__input wxc-input-field--has-right-icon"
       >
-        <div
+        <label
           className="wxc-label__label-text"
+          htmlFor="wxc-0-control"
+          id="wxc-0-label"
         >
-          Your name
-        </div>
+          <span>
+            Your name
+          </span>
+        </label>
         <div
           className="wxc-label__control"
         >
@@ -44,9 +48,11 @@ Array [
           >
             <input
               aria-label="Your name appears in the participant list. Skip this optional field to use the name provided by the system."
+              aria-labelledby="wxc-0-label"
               autoFocus={true}
               className="wxc-input-field__input"
               disabled={false}
+              id="wxc-0-control"
               name="name"
               onChange={[Function]}
               required={false}
@@ -55,15 +61,19 @@ Array [
             />
           </div>
         </div>
-      </label>
-      <label
+      </div>
+      <div
         className="wxc wxc-label wxc wxc-input-field wxc wxc-password-input wxc-meeting-guest-authentication__input wxc-input-field--has-right-icon"
       >
-        <div
+        <label
           className="wxc-label__label-text"
+          htmlFor="wxc-0-control"
+          id="wxc-0-label"
         >
-          Meeting password (required)
-        </div>
+          <span>
+            Meeting password (required)
+          </span>
+        </label>
         <div
           className="wxc-label__control"
         >
@@ -72,9 +82,11 @@ Array [
           >
             <input
               aria-label="The password is provided in the invitation for a scheduled  meeting, or from the host."
+              aria-labelledby="wxc-0-label"
               autoFocus={false}
               className="wxc-input-field__input"
               disabled={false}
+              id="wxc-0-control"
               name="password"
               onChange={[Function]}
               required={false}
@@ -85,7 +97,7 @@ Array [
           </div>
         </div>
         
-      </label>
+      </div>
       <button
         aria-label="Start meeting. Start the meeting after entering the required information."
         autoFocus={false}
diff --git a/src/components/WebexMeetingHostAuthentication/__snapshots__/WebexMeetingHostAuthentication.stories.storyshot b/src/components/WebexMeetingHostAuthentication/__snapshots__/WebexMeetingHostAuthentication.stories.storyshot
index daf6cd194..86ece3fc8 100644
--- a/src/components/WebexMeetingHostAuthentication/__snapshots__/WebexMeetingHostAuthentication.stories.storyshot
+++ b/src/components/WebexMeetingHostAuthentication/__snapshots__/WebexMeetingHostAuthentication.stories.storyshot
@@ -29,14 +29,18 @@ Array [
       className="wxc-meeting-host-authentication__form-content"
       onSubmit={[Function]}
     >
-      <label
+      <div
         className="wxc wxc-label wxc wxc-input-field wxc wxc-password-input wxc-meeting-host-authentication__input wxc-input-field--has-right-icon"
       >
-        <div
+        <label
           className="wxc-label__label-text"
+          htmlFor="wxc-0-control"
+          id="wxc-0-label"
         >
-          Host key (required)
-        </div>
+          <span>
+            Host key (required)
+          </span>
+        </label>
         <div
           className="wxc-label__control"
         >
@@ -45,9 +49,11 @@ Array [
           >
             <input
               aria-label="The host key is generated when a meeting is scheduled."
+              aria-labelledby="wxc-0-label"
               autoFocus={true}
               className="wxc-input-field__input"
               disabled={false}
+              id="wxc-0-control"
               name="password"
               onChange={[Function]}
               required={false}
@@ -58,7 +64,7 @@ Array [
           </div>
         </div>
         
-      </label>
+      </div>
       <button
         aria-label="Start meeting. Start the meeting for all participants after entering the required information."
         autoFocus={false}
diff --git a/src/components/WebexSettings/__snapshots__/WebexSettings.stories.storyshot b/src/components/WebexSettings/__snapshots__/WebexSettings.stories.storyshot
index c8c6b8af6..8d4551664 100644
--- a/src/components/WebexSettings/__snapshots__/WebexSettings.stories.storyshot
+++ b/src/components/WebexSettings/__snapshots__/WebexSettings.stories.storyshot
@@ -63,9 +63,8 @@ Array [
           <div
             className="wxc wxc-meeting-control"
           >
-            <label
+            <div
               className="wxc wxc-label wxc wxc-dropdown wxc-meeting-control__control-select"
-              id="wxc-0"
             >
               <div
                 className="wxc-label__control"
@@ -76,11 +75,12 @@ Array [
                   onKeyDown={[Function]}
                 >
                   <div
-                    aria-controls="wxc-0"
+                    aria-controls="wxc-0-options"
                     aria-haspopup="listbox"
                     aria-label="Use arrow keys to navigate between speaker options and hit \\"Enter\\" to select."
-                    aria-labelledby="wxc-0"
+                    aria-labelledby="wxc-0-label"
                     className="wxc-dropdown__selected-option "
+                    id="wxc-0-control"
                     onClick={[Function]}
                     onKeyDown={[Function]}
                     role="combobox"
@@ -107,7 +107,7 @@ Array [
                   </div>
                 </div>
               </div>
-            </label>
+            </div>
           </div>
           <h5
             className="wxc wxc-title wxc-title--subsection"
@@ -118,9 +118,8 @@ Array [
           <div
             className="wxc wxc-meeting-control"
           >
-            <label
+            <div
               className="wxc wxc-label wxc wxc-dropdown wxc-meeting-control__control-select wxc-dropdown--disabled"
-              id="wxc-0"
             >
               <div
                 className="wxc-label__control"
@@ -131,11 +130,12 @@ Array [
                   onKeyDown={[Function]}
                 >
                   <div
-                    aria-controls="wxc-0"
+                    aria-controls="wxc-0-options"
                     aria-haspopup="listbox"
                     aria-label="Use arrow keys to navigate between microphone options and hit \\"Enter\\" to select."
-                    aria-labelledby="wxc-0"
+                    aria-labelledby="wxc-0-label"
                     className="wxc-dropdown__selected-option "
+                    id="wxc-0-control"
                     onClick={[Function]}
                     onKeyDown={[Function]}
                     role="combobox"
@@ -162,7 +162,7 @@ Array [
                   </div>
                 </div>
               </div>
-            </label>
+            </div>
           </div>
         </div>
       </div>
diff --git a/src/components/adaptive-cards/AdaptiveCard/AdaptiveCard.stories/__snapshots__/Actions.stories.storyshot b/src/components/adaptive-cards/AdaptiveCard/AdaptiveCard.stories/__snapshots__/Actions.stories.storyshot
index f7dfcf6a9..4a3f296ff 100644
--- a/src/components/adaptive-cards/AdaptiveCard/AdaptiveCard.stories/__snapshots__/Actions.stories.storyshot
+++ b/src/components/adaptive-cards/AdaptiveCard/AdaptiveCard.stories/__snapshots__/Actions.stories.storyshot
@@ -47,15 +47,19 @@ Array [
         }
       }
     />
-    <label
+    <div
       className="wxc wxc-label wxc wxc-input-field wxc wxc-text-input wxc wxc-adaptive-cards-input-text wxc wxc-ac wxc-ac-is-visible--true wxc-input-field--has-right-icon"
       style={Object {}}
     >
-      <div
+      <label
         className="wxc-label__label-text"
+        htmlFor="wxc-0-control"
+        id="wxc-0-label"
       >
-        What is your first name?
-      </div>
+        <span>
+          What is your first name?
+        </span>
+      </label>
       <div
         className="wxc-label__control"
       >
@@ -63,9 +67,11 @@ Array [
           className="wxc-input-field__form-control"
         >
           <input
+            aria-labelledby="wxc-0-label"
             autoFocus={false}
             className="wxc-input-field__input"
             disabled={false}
+            id="wxc-0-control"
             onChange={[Function]}
             required={false}
             tabIndex={0}
@@ -74,7 +80,7 @@ Array [
           />
         </div>
       </div>
-    </label>
+    </div>
     <div
       className="wxc wxc-ac-spacer wxc-ac-spacer--spacing--default"
       style={
@@ -83,15 +89,19 @@ Array [
         }
       }
     />
-    <label
+    <div
       className="wxc wxc-label wxc wxc-input-field wxc wxc-text-input wxc wxc-adaptive-cards-input-text wxc wxc-ac wxc-ac-is-visible--true wxc-input-field--has-right-icon"
       style={Object {}}
     >
-      <div
+      <label
         className="wxc-label__label-text"
+        htmlFor="wxc-0-control"
+        id="wxc-0-label"
       >
-        What is your last name?
-      </div>
+        <span>
+          What is your last name?
+        </span>
+      </label>
       <div
         className="wxc-label__control"
       >
@@ -99,9 +109,11 @@ Array [
           className="wxc-input-field__form-control"
         >
           <input
+            aria-labelledby="wxc-0-label"
             autoFocus={false}
             className="wxc-input-field__input"
             disabled={false}
+            id="wxc-0-control"
             onChange={[Function]}
             required={false}
             tabIndex={0}
@@ -110,7 +122,7 @@ Array [
           />
         </div>
       </div>
-    </label>
+    </div>
     <div
       className="wxc wxc-ac-spacer wxc-ac-spacer--spacing--default"
       style={
@@ -481,7 +493,7 @@ Array [
         }
       }
     />
-    <label
+    <div
       className="wxc wxc-label wxc wxc-input-field wxc wxc-text-input wxc wxc-adaptive-cards-input-text wxc wxc-ac wxc-ac-is-visible--true wxc-input-field--has-right-icon"
       style={Object {}}
     >
@@ -492,9 +504,11 @@ Array [
           className="wxc-input-field__form-control"
         >
           <input
+            aria-labelledby="wxc-0-label"
             autoFocus={false}
             className="wxc-input-field__input"
             disabled={false}
+            id="wxc-0-control"
             onChange={[Function]}
             placeholder="What is your first name?"
             required={true}
@@ -504,7 +518,7 @@ Array [
           />
         </div>
       </div>
-    </label>
+    </div>
     <div
       className="wxc wxc-ac-spacer wxc-ac-spacer--spacing--default"
       style={
@@ -513,7 +527,7 @@ Array [
         }
       }
     />
-    <label
+    <div
       className="wxc wxc-label wxc wxc-input-field wxc wxc-text-input wxc wxc-adaptive-cards-input-text wxc wxc-ac wxc-ac-is-visible--true wxc-input-field--has-right-icon"
       style={Object {}}
     >
@@ -524,9 +538,11 @@ Array [
           className="wxc-input-field__form-control"
         >
           <input
+            aria-labelledby="wxc-0-label"
             autoFocus={false}
             className="wxc-input-field__input"
             disabled={false}
+            id="wxc-0-control"
             onChange={[Function]}
             placeholder="What is your last name?"
             required={false}
@@ -536,7 +552,7 @@ Array [
           />
         </div>
       </div>
-    </label>
+    </div>
     <div
       className="wxc wxc-ac-spacer wxc-ac-spacer--spacing--default"
       style={
@@ -545,7 +561,7 @@ Array [
         }
       }
     />
-    <label
+    <div
       className="wxc wxc-label wxc wxc-input-field wxc wxc-number-input wxc wxc-adaptive-cards-input-number wxc wxc-ac wxc-ac-is-visible--true wxc-input-field--has-right-icon wxc-input-field--has-right-controls"
       style={Object {}}
     >
@@ -556,9 +572,11 @@ Array [
           className="wxc-input-field__form-control"
         >
           <input
+            aria-labelledby="wxc-0-label"
             autoFocus={false}
             className="wxc-input-field__input"
             disabled={false}
+            id="wxc-0-control"
             max={10}
             min={1}
             onChange={[Function]}
@@ -664,7 +682,7 @@ Array [
           </div>
         </div>
       </div>
-    </label>
+    </div>
     <div
       className="wxc wxc-ac-spacer wxc-ac-spacer--spacing--default"
       style={
diff --git a/src/components/adaptive-cards/AdaptiveCard/AdaptiveCard.stories/__snapshots__/Inputs.stories.storyshot b/src/components/adaptive-cards/AdaptiveCard/AdaptiveCard.stories/__snapshots__/Inputs.stories.storyshot
index 72d384b26..2e857e147 100644
--- a/src/components/adaptive-cards/AdaptiveCard/AdaptiveCard.stories/__snapshots__/Inputs.stories.storyshot
+++ b/src/components/adaptive-cards/AdaptiveCard/AdaptiveCard.stories/__snapshots__/Inputs.stories.storyshot
@@ -14,63 +14,58 @@ Array [
         }
       }
     />
-    <label
-      className="wxc wxc-label wxc wxc-adaptive-cards-input-choice-set wxc wxc-ac wxc-ac-is-visible--true wxc-ac-container--vertical"
-      style={Object {}}
+    <div
+      className="wxc wxc-label wxc wxc-dropdown wxc wxc-adaptive-cards-input-choice-set wxc wxc-ac wxc-ac-is-visible--true wxc-ac-container--vertical"
     >
-      <div
+      <label
         className="wxc-label__label-text"
+        htmlFor="wxc-0-control"
+        id="wxc-0-label"
       >
-        Default Input.ChoiceSet label (compact)
-      </div>
+        <span>
+          Default Input.ChoiceSet label (compact)
+        </span>
+      </label>
       <div
         className="wxc-label__control"
       >
-        <label
-          className="wxc wxc-label wxc wxc-dropdown"
-          id="wxc-0"
+        <div
+          className="wxc-dropdown__control"
+          disabled={false}
+          onKeyDown={[Function]}
         >
           <div
-            className="wxc-label__control"
+            aria-controls="wxc-0-options"
+            aria-haspopup="listbox"
+            aria-labelledby="wxc-0-label"
+            className="wxc-dropdown__selected-option "
+            id="wxc-0-control"
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            role="combobox"
+            tabIndex={0}
           >
-            <div
-              className="wxc-dropdown__control"
-              disabled={false}
-              onKeyDown={[Function]}
+            <span
+              className="wxc-dropdown__label"
             >
-              <div
-                aria-controls="wxc-0"
-                aria-haspopup="listbox"
-                aria-labelledby="wxc-0"
-                className="wxc-dropdown__selected-option "
-                onClick={[Function]}
-                onKeyDown={[Function]}
-                role="combobox"
-                tabIndex={0}
-              >
-                <span
-                  className="wxc-dropdown__label"
-                >
-                  Please make a selection
-                </span>
-                <svg
-                  className="wxc-icon "
-                  height={13}
-                  style={Object {}}
-                  viewBox="0 0 26 14"
-                  width={13}
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M25.7075 0.293202C25.52 0.105701 25.2656 0.000366211 25.0004 0.000366211C24.7353 0.000366211 24.4809 0.105701 24.2934 0.293202L13 11.5862L1.70699 0.293202C1.51851 0.110381 1.26568 0.00902984 1.0031 0.0110359C0.740528 0.013042 0.489278 0.118244 0.303611 0.303925C0.117943 0.489605 0.0127584 0.740862 0.0107709 1.00344C0.00878336 1.26601 0.110153 1.51883 0.292988 1.7073L12.293 13.7073C12.4805 13.8948 12.7348 14.0001 13 14.0001C13.2652 14.0001 13.5195 13.8948 13.707 13.7073L25.707 1.7073C25.8946 1.51984 26 1.26555 26.0001 1.00036C26.0002 0.735168 25.8949 0.4808 25.7075 0.293202Z"
-                  />
-                </svg>
-              </div>
-            </div>
+              Please make a selection
+            </span>
+            <svg
+              className="wxc-icon "
+              height={13}
+              style={Object {}}
+              viewBox="0 0 26 14"
+              width={13}
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M25.7075 0.293202C25.52 0.105701 25.2656 0.000366211 25.0004 0.000366211C24.7353 0.000366211 24.4809 0.105701 24.2934 0.293202L13 11.5862L1.70699 0.293202C1.51851 0.110381 1.26568 0.00902984 1.0031 0.0110359C0.740528 0.013042 0.489278 0.118244 0.303611 0.303925C0.117943 0.489605 0.0127584 0.740862 0.0107709 1.00344C0.00878336 1.26601 0.110153 1.51883 0.292988 1.7073L12.293 13.7073C12.4805 13.8948 12.7348 14.0001 13 14.0001C13.2652 14.0001 13.5195 13.8948 13.707 13.7073L25.707 1.7073C25.8946 1.51984 26 1.26555 26.0001 1.00036C26.0002 0.735168 25.8949 0.4808 25.7075 0.293202Z"
+              />
+            </svg>
           </div>
-        </label>
+        </div>
       </div>
-    </label>
+    </div>
     <div
       className="wxc wxc-ac-spacer wxc-ac-spacer--spacing--default"
       style={
@@ -79,68 +74,63 @@ Array [
         }
       }
     />
-    <label
-      className="wxc wxc-label wxc wxc-adaptive-cards-input-choice-set wxc wxc-ac wxc-ac-is-visible--true wxc-ac-container--vertical"
-      style={Object {}}
+    <div
+      className="wxc wxc-label wxc wxc-dropdown wxc wxc-adaptive-cards-input-choice-set wxc wxc-ac wxc-ac-is-visible--true wxc-ac-container--vertical"
     >
-      <div
+      <label
         className="wxc-label__label-text"
+        htmlFor="wxc-0-control"
+        id="wxc-0-label"
       >
-        Required Input.ChoiceSet label (compact)
+        <span>
+          Required Input.ChoiceSet label (compact)
+        </span>
         <span
           className="wxc-label__required"
         >
            *
         </span>
-      </div>
+      </label>
       <div
         className="wxc-label__control"
       >
-        <label
-          className="wxc wxc-label wxc wxc-dropdown"
-          id="wxc-0"
+        <div
+          className="wxc-dropdown__control"
+          disabled={false}
+          onKeyDown={[Function]}
         >
           <div
-            className="wxc-label__control"
+            aria-controls="wxc-0-options"
+            aria-haspopup="listbox"
+            aria-labelledby="wxc-0-label"
+            className="wxc-dropdown__selected-option "
+            id="wxc-0-control"
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            role="combobox"
+            tabIndex={0}
           >
-            <div
-              className="wxc-dropdown__control"
-              disabled={false}
-              onKeyDown={[Function]}
+            <span
+              className="wxc-dropdown__label"
             >
-              <div
-                aria-controls="wxc-0"
-                aria-haspopup="listbox"
-                aria-labelledby="wxc-0"
-                className="wxc-dropdown__selected-option "
-                onClick={[Function]}
-                onKeyDown={[Function]}
-                role="combobox"
-                tabIndex={0}
-              >
-                <span
-                  className="wxc-dropdown__label"
-                >
-                  Option 1
-                </span>
-                <svg
-                  className="wxc-icon "
-                  height={13}
-                  style={Object {}}
-                  viewBox="0 0 26 14"
-                  width={13}
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M25.7075 0.293202C25.52 0.105701 25.2656 0.000366211 25.0004 0.000366211C24.7353 0.000366211 24.4809 0.105701 24.2934 0.293202L13 11.5862L1.70699 0.293202C1.51851 0.110381 1.26568 0.00902984 1.0031 0.0110359C0.740528 0.013042 0.489278 0.118244 0.303611 0.303925C0.117943 0.489605 0.0127584 0.740862 0.0107709 1.00344C0.00878336 1.26601 0.110153 1.51883 0.292988 1.7073L12.293 13.7073C12.4805 13.8948 12.7348 14.0001 13 14.0001C13.2652 14.0001 13.5195 13.8948 13.707 13.7073L25.707 1.7073C25.8946 1.51984 26 1.26555 26.0001 1.00036C26.0002 0.735168 25.8949 0.4808 25.7075 0.293202Z"
-                  />
-                </svg>
-              </div>
-            </div>
+              Option 1
+            </span>
+            <svg
+              className="wxc-icon "
+              height={13}
+              style={Object {}}
+              viewBox="0 0 26 14"
+              width={13}
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M25.7075 0.293202C25.52 0.105701 25.2656 0.000366211 25.0004 0.000366211C24.7353 0.000366211 24.4809 0.105701 24.2934 0.293202L13 11.5862L1.70699 0.293202C1.51851 0.110381 1.26568 0.00902984 1.0031 0.0110359C0.740528 0.013042 0.489278 0.118244 0.303611 0.303925C0.117943 0.489605 0.0127584 0.740862 0.0107709 1.00344C0.00878336 1.26601 0.110153 1.51883 0.292988 1.7073L12.293 13.7073C12.4805 13.8948 12.7348 14.0001 13 14.0001C13.2652 14.0001 13.5195 13.8948 13.707 13.7073L25.707 1.7073C25.8946 1.51984 26 1.26555 26.0001 1.00036C26.0002 0.735168 25.8949 0.4808 25.7075 0.293202Z"
+              />
+            </svg>
           </div>
-        </label>
+        </div>
       </div>
-    </label>
+    </div>
     <div
       className="wxc wxc-ac-spacer wxc-ac-spacer--spacing--default"
       style={
@@ -149,15 +139,19 @@ Array [
         }
       }
     />
-    <label
+    <div
       className="wxc wxc-label wxc wxc-adaptive-cards-input-choice-set wxc wxc-ac wxc-ac-is-visible--true wxc-ac-container--vertical"
       style={Object {}}
     >
-      <div
+      <label
         className="wxc-label__label-text"
+        htmlFor="wxc-0-control"
+        id="wxc-0-label"
       >
-        Default Input.ChoiceSet label (expanded)
-      </div>
+        <span>
+          Default Input.ChoiceSet label (expanded)
+        </span>
+      </label>
       <div
         className="wxc-label__control"
       >
@@ -204,7 +198,7 @@ Array [
           </span>
         </div>
       </div>
-    </label>
+    </div>
     <div
       className="wxc wxc-ac-spacer wxc-ac-spacer--spacing--default"
       style={
@@ -213,20 +207,24 @@ Array [
         }
       }
     />
-    <label
+    <div
       className="wxc wxc-label wxc wxc-adaptive-cards-input-choice-set wxc wxc-ac wxc-ac-is-visible--true wxc-ac-container--vertical"
       style={Object {}}
     >
-      <div
+      <label
         className="wxc-label__label-text"
+        htmlFor="wxc-0-control"
+        id="wxc-0-label"
       >
-        Required Input.ChoiceSet label (expanded)
+        <span>
+          Required Input.ChoiceSet label (expanded)
+        </span>
         <span
           className="wxc-label__required"
         >
            *
         </span>
-      </div>
+      </label>
       <div
         className="wxc-label__control"
       >
@@ -269,7 +267,7 @@ Array [
           </span>
         </div>
       </div>
-    </label>
+    </div>
     <div
       className="wxc wxc-ac-spacer wxc-ac-spacer--spacing--default"
       style={
@@ -278,15 +276,19 @@ Array [
         }
       }
     />
-    <label
+    <div
       className="wxc wxc-label wxc wxc-adaptive-cards-input-choice-set wxc wxc-ac wxc-ac-is-visible--true wxc-ac-container--vertical"
       style={Object {}}
     >
-      <div
+      <label
         className="wxc-label__label-text"
+        htmlFor="wxc-0-control"
+        id="wxc-0-label"
       >
-        Default Input.ChoiceSet label (expanded, multiselect)
-      </div>
+        <span>
+          Default Input.ChoiceSet label (expanded, multiselect)
+        </span>
+      </label>
       <div
         className="wxc-label__control"
       >
@@ -327,7 +329,7 @@ Array [
           </span>
         </label>
       </div>
-    </label>
+    </div>
     <div
       className="wxc wxc-ac-spacer wxc-ac-spacer--spacing--default"
       style={
@@ -336,20 +338,24 @@ Array [
         }
       }
     />
-    <label
+    <div
       className="wxc wxc-label wxc wxc-adaptive-cards-input-choice-set wxc wxc-ac wxc-ac-is-visible--true wxc-ac-container--vertical"
       style={Object {}}
     >
-      <div
+      <label
         className="wxc-label__label-text"
+        htmlFor="wxc-0-control"
+        id="wxc-0-label"
       >
-        Required Input.ChoiceSet label (compact, multiselect)
+        <span>
+          Required Input.ChoiceSet label (compact, multiselect)
+        </span>
         <span
           className="wxc-label__required"
         >
            *
         </span>
-      </div>
+      </label>
       <div
         className="wxc-label__control"
       >
@@ -434,7 +440,7 @@ Array [
           </span>
         </label>
       </div>
-    </label>
+    </div>
     <div
       className="wxc wxc-ac-spacer wxc-ac-spacer--spacing--default"
       style={
@@ -530,7 +536,7 @@ Array [
         }
       }
     />
-    <label
+    <div
       className="wxc wxc-label wxc wxc-input-field wxc wxc-date-input wxc wxc-adaptive-cards-input-date wxc wxc-ac wxc-ac-is-visible--true"
       style={Object {}}
     >
@@ -541,9 +547,11 @@ Array [
           className="wxc-input-field__form-control"
         >
           <input
+            aria-labelledby="wxc-0-label"
             autoFocus={false}
             className="wxc-input-field__input"
             disabled={false}
+            id="wxc-0-control"
             onChange={[Function]}
             required={false}
             tabIndex={0}
@@ -552,7 +560,7 @@ Array [
           />
         </div>
       </div>
-    </label>
+    </div>
     <div
       className="wxc wxc-ac-spacer wxc-ac-spacer--spacing--default"
       style={
@@ -623,15 +631,19 @@ Array [
         }
       }
     />
-    <label
+    <div
       className="wxc wxc-label wxc wxc-input-field wxc wxc-number-input wxc wxc-adaptive-cards-input-number wxc wxc-ac wxc-ac-is-visible--true wxc-input-field--has-right-icon wxc-input-field--has-right-controls"
       style={Object {}}
     >
-      <div
+      <label
         className="wxc-label__label-text"
+        htmlFor="wxc-0-control"
+        id="wxc-0-label"
       >
-        Enter a number between 1 and 10
-      </div>
+        <span>
+          Enter a number between 1 and 10
+        </span>
+      </label>
       <div
         className="wxc-label__control"
       >
@@ -639,9 +651,11 @@ Array [
           className="wxc-input-field__form-control"
         >
           <input
+            aria-labelledby="wxc-0-label"
             autoFocus={false}
             className="wxc-input-field__input"
             disabled={false}
+            id="wxc-0-control"
             max={10}
             min={1}
             onChange={[Function]}
@@ -747,7 +761,7 @@ Array [
           </div>
         </div>
       </div>
-    </label>
+    </div>
     <div
       className="wxc wxc-ac-spacer wxc-ac-spacer--spacing--default"
       style={
@@ -844,7 +858,7 @@ Array [
         }
       }
     />
-    <label
+    <div
       className="wxc wxc-label wxc wxc-input-field wxc wxc-text-input wxc wxc-adaptive-cards-input-text wxc wxc-ac wxc-ac-is-visible--true wxc-ac-input-style--text wxc-ac-height--auto wxc-input-field--has-right-icon"
       style={Object {}}
     >
@@ -855,9 +869,11 @@ Array [
           className="wxc-input-field__form-control"
         >
           <input
+            aria-labelledby="wxc-0-label"
             autoFocus={false}
             className="wxc-input-field__input"
             disabled={false}
+            id="wxc-0-control"
             onChange={[Function]}
             required={true}
             tabIndex={0}
@@ -866,7 +882,7 @@ Array [
           />
         </div>
       </div>
-    </label>
+    </div>
     <div
       className="wxc wxc-ac-spacer wxc-ac-spacer--spacing--default"
       style={
@@ -875,15 +891,19 @@ Array [
         }
       }
     />
-    <label
+    <div
       className="wxc wxc-label wxc wxc-input-field wxc wxc-text-input wxc wxc-adaptive-cards-input-text wxc wxc-ac wxc-ac-is-visible--true wxc-ac-input-style--email wxc-input-field--has-right-icon"
       style={Object {}}
     >
-      <div
+      <label
         className="wxc-label__label-text"
+        htmlFor="wxc-0-control"
+        id="wxc-0-label"
       >
-        style: email
-      </div>
+        <span>
+          style: email
+        </span>
+      </label>
       <div
         className="wxc-label__control"
       >
@@ -891,9 +911,11 @@ Array [
           className="wxc-input-field__form-control"
         >
           <input
+            aria-labelledby="wxc-0-label"
             autoFocus={false}
             className="wxc-input-field__input"
             disabled={false}
+            id="wxc-0-control"
             onChange={[Function]}
             required={false}
             tabIndex={0}
@@ -902,7 +924,7 @@ Array [
           />
         </div>
       </div>
-    </label>
+    </div>
     <div
       className="wxc wxc-ac-spacer wxc-ac-spacer--spacing--default"
       style={
@@ -911,15 +933,19 @@ Array [
         }
       }
     />
-    <label
+    <div
       className="wxc wxc-label wxc wxc-input-field wxc wxc-text-input wxc wxc-adaptive-cards-input-text wxc wxc-ac wxc-ac-is-visible--true wxc-ac-input-style--tel wxc-ac-height--stretch wxc-input-field--has-right-icon"
       style={Object {}}
     >
-      <div
+      <label
         className="wxc-label__label-text"
+        htmlFor="wxc-0-control"
+        id="wxc-0-label"
       >
-        style: tel
-      </div>
+        <span>
+          style: tel
+        </span>
+      </label>
       <div
         className="wxc-label__control"
       >
@@ -927,9 +953,11 @@ Array [
           className="wxc-input-field__form-control"
         >
           <input
+            aria-labelledby="wxc-0-label"
             autoFocus={false}
             className="wxc-input-field__input"
             disabled={false}
+            id="wxc-0-control"
             onChange={[Function]}
             required={false}
             tabIndex={0}
@@ -938,7 +966,7 @@ Array [
           />
         </div>
       </div>
-    </label>
+    </div>
     <div
       className="wxc wxc-ac-spacer wxc-ac-spacer--spacing--default"
       style={
@@ -947,15 +975,19 @@ Array [
         }
       }
     />
-    <label
+    <div
       className="wxc wxc-label wxc wxc-input-field wxc wxc-text-input wxc wxc-adaptive-cards-input-text wxc wxc-ac wxc-ac-is-visible--true wxc-ac-input-style--url wxc-input-field--has-right-icon"
       style={Object {}}
     >
-      <div
+      <label
         className="wxc-label__label-text"
+        htmlFor="wxc-0-control"
+        id="wxc-0-label"
       >
-        style: url
-      </div>
+        <span>
+          style: url
+        </span>
+      </label>
       <div
         className="wxc-label__control"
       >
@@ -963,9 +995,11 @@ Array [
           className="wxc-input-field__form-control"
         >
           <input
+            aria-labelledby="wxc-0-label"
             autoFocus={false}
             className="wxc-input-field__input"
             disabled={false}
+            id="wxc-0-control"
             onChange={[Function]}
             required={false}
             tabIndex={0}
@@ -974,7 +1008,7 @@ Array [
           />
         </div>
       </div>
-    </label>
+    </div>
     <div
       className="wxc wxc-ac-spacer wxc-ac-spacer--spacing--default"
       style={
@@ -983,15 +1017,19 @@ Array [
         }
       }
     />
-    <label
+    <div
       className="wxc wxc-label wxc wxc-input-field wxc wxc-password-input wxc wxc-adaptive-cards-input-text wxc wxc-ac wxc-ac-is-visible--true wxc-ac-input-style--password wxc-input-field--has-right-icon"
       style={Object {}}
     >
-      <div
+      <label
         className="wxc-label__label-text"
+        htmlFor="wxc-0-control"
+        id="wxc-0-label"
       >
-        style: password
-      </div>
+        <span>
+          style: password
+        </span>
+      </label>
       <div
         className="wxc-label__control"
       >
@@ -999,9 +1037,11 @@ Array [
           className="wxc-input-field__form-control"
         >
           <input
+            aria-labelledby="wxc-0-label"
             autoFocus={false}
             className="wxc-input-field__input"
             disabled={false}
+            id="wxc-0-control"
             onChange={[Function]}
             required={false}
             tabIndex={0}
@@ -1010,7 +1050,7 @@ Array [
           />
         </div>
       </div>
-    </label>
+    </div>
     <div
       className="wxc wxc-ac-spacer wxc-ac-spacer--spacing--default"
       style={
@@ -1044,7 +1084,7 @@ Array [
         }
       }
     />
-    <label
+    <div
       className="wxc wxc-label wxc wxc-textbox wxc wxc-adaptive-cards-input-text wxc wxc-ac wxc-ac-is-visible--true"
       style={Object {}}
     >
@@ -1053,8 +1093,10 @@ Array [
       >
         <textarea
           aria-label=""
+          aria-labelledby="wxc-0-label"
           className="wxc-textbox__control"
           disabled={false}
+          id="wxc-0-control"
           maxLength={500}
           onChange={[Function]}
           placeholder="enter comment"
@@ -1062,7 +1104,7 @@ Array [
           value=""
         />
       </div>
-    </label>
+    </div>
     <div
       className="wxc wxc-ac-spacer wxc-ac-spacer--spacing--default"
       style={
@@ -1096,7 +1138,7 @@ Array [
         }
       }
     />
-    <label
+    <div
       className="wxc wxc-label wxc wxc-textbox wxc wxc-adaptive-cards-input-text wxc wxc-ac wxc-ac-is-visible--true"
       style={Object {}}
     >
@@ -1105,8 +1147,10 @@ Array [
       >
         <textarea
           aria-label=""
+          aria-labelledby="wxc-0-label"
           className="wxc-textbox__control"
           disabled={false}
+          id="wxc-0-control"
           maxLength={500}
           onChange={[Function]}
           placeholder="enter comment"
@@ -1114,7 +1158,7 @@ Array [
           value="This value was pre-filled"
         />
       </div>
-    </label>
+    </div>
     <div
       className="wxc wxc-ac-spacer wxc-ac-spacer--spacing--default"
       style={
@@ -1185,15 +1229,19 @@ Array [
         }
       }
     />
-    <label
+    <div
       className="wxc wxc-label wxc wxc-input-field wxc wxc-time-input wxc wxc-adaptive-cards-input-time wxc wxc-ac wxc-ac-is-visible--true"
       style={Object {}}
     >
-      <div
+      <label
         className="wxc-label__label-text"
+        htmlFor="wxc-0-control"
+        id="wxc-0-label"
       >
-        Start time
-      </div>
+        <span>
+          Start time
+        </span>
+      </label>
       <div
         className="wxc-label__control"
       >
@@ -1201,9 +1249,11 @@ Array [
           className="wxc-input-field__form-control"
         >
           <input
+            aria-labelledby="wxc-0-label"
             autoFocus={false}
             className="wxc-input-field__input"
             disabled={false}
+            id="wxc-0-control"
             onChange={[Function]}
             required={false}
             tabIndex={0}
@@ -1212,7 +1262,7 @@ Array [
           />
         </div>
       </div>
-    </label>
+    </div>
     <div
       className="wxc wxc-ac-spacer wxc-ac-spacer--spacing--default"
       style={
@@ -1221,20 +1271,24 @@ Array [
         }
       }
     />
-    <label
+    <div
       className="wxc wxc-label wxc wxc-input-field wxc wxc-time-input wxc wxc-adaptive-cards-input-time wxc wxc-ac wxc-ac-is-visible--true"
       style={Object {}}
     >
-      <div
+      <label
         className="wxc-label__label-text"
+        htmlFor="wxc-0-control"
+        id="wxc-0-label"
       >
-        End time
+        <span>
+          End time
+        </span>
         <span
           className="wxc-label__required"
         >
            *
         </span>
-      </div>
+      </label>
       <div
         className="wxc-label__control"
       >
@@ -1242,9 +1296,11 @@ Array [
           className="wxc-input-field__form-control"
         >
           <input
+            aria-labelledby="wxc-0-label"
             autoFocus={false}
             className="wxc-input-field__input"
             disabled={false}
+            id="wxc-0-control"
             onChange={[Function]}
             required={true}
             tabIndex={0}
@@ -1253,7 +1309,7 @@ Array [
           />
         </div>
       </div>
-    </label>
+    </div>
     <div
       className="wxc wxc-ac-spacer wxc-ac-spacer--spacing--default"
       style={
@@ -1262,15 +1318,19 @@ Array [
         }
       }
     />
-    <label
+    <div
       className="wxc wxc-label wxc wxc-input-field wxc wxc-time-input wxc wxc-adaptive-cards-input-time wxc wxc-ac wxc-ac-is-visible--true"
       style={Object {}}
     >
-      <div
+      <label
         className="wxc-label__label-text"
+        htmlFor="wxc-0-control"
+        id="wxc-0-label"
       >
-        Night time
-      </div>
+        <span>
+          Night time
+        </span>
+      </label>
       <div
         className="wxc-label__control"
       >
@@ -1278,9 +1338,11 @@ Array [
           className="wxc-input-field__form-control"
         >
           <input
+            aria-labelledby="wxc-0-label"
             autoFocus={false}
             className="wxc-input-field__input"
             disabled={false}
+            id="wxc-0-control"
             onChange={[Function]}
             required={false}
             tabIndex={0}
@@ -1289,7 +1351,7 @@ Array [
           />
         </div>
       </div>
-    </label>
+    </div>
     <div
       className="wxc wxc-ac-spacer wxc-ac-spacer--spacing--default"
       style={
diff --git a/src/components/adaptive-cards/InputChoiceSet/InputChoiceSet.jsx b/src/components/adaptive-cards/InputChoiceSet/InputChoiceSet.jsx
index 36bd512d2..2724e7622 100644
--- a/src/components/adaptive-cards/InputChoiceSet/InputChoiceSet.jsx
+++ b/src/components/adaptive-cards/InputChoiceSet/InputChoiceSet.jsx
@@ -8,6 +8,7 @@ import Checkbox from '../../inputs/Checkbox/Checkbox';
 import Label from '../../inputs/Label/Label';
 import RadioButton from '../../inputs/RadioButton/RadioButton';
 import {formatDateTime} from '../util';
+import {uniqueId} from '../../../util';
 
 /**
  * Adaptive Cards InputChoiceSet component
@@ -16,11 +17,12 @@ import {formatDateTime} from '../util';
  * @param {object} props  React props passed to the component
  * @param {object} props.data  Active cards definition
  * @param {string} [props.className]  Custom CSS class to apply
+ * @param {string} [props.id]  DOM id
  * @param {object} [props.style]  Custom style to apply
  * @returns {object} JSX of the component
  */
 export default function InputChoiceSet({
-  data, className, style,
+  data, className, id: domId, style,
 }) {
   const [cssClasses] = webexComponentClasses('adaptive-cards-input-choice-set', className);
   const {
@@ -28,7 +30,24 @@ export default function InputChoiceSet({
   } = useContext(AdaptiveCardContext);
   const value = getValue(data.id);
   const values = value ? Object.fromEntries(String(value).split(',').map((v) => [v, true])) : {};
+  const id = domId || uniqueId();
   let input;
+  let comp;
+
+  useEffect(() => {
+    setInput({
+      id: data.id,
+      value: data.value,
+      isRequired: data.isRequired,
+      errorMessage: data.errorMessage,
+    });
+  }, [
+    data.id,
+    data.value,
+    data.isRequired,
+    data.errorMessage,
+    setInput,
+  ]);
 
   const onSingleChange = (val) => {
     setValue(data.id, val);
@@ -39,71 +58,68 @@ export default function InputChoiceSet({
     setValue(data.id, data.choices.map((choice) => (values[choice.value] ? choice.value : undefined)).filter((v) => v !== undefined).join(','));
   };
 
-  if (data.isMultiSelect === true || data.choices.length === 1) {
-    input = data.choices.map((choice, index) => (
-      <Checkbox
-        key={index}
-        onChange={(isSelected) => onMultiChange(choice.value, isSelected)}
-        selected={values[choice.value]}
-        title={choice.title}
-      />
-    ));
-  } else if (String(data.style).toLowerCase() === 'compact') {
-    input = (
+  if (data.isMultiSelect === false && String(data.style).toLowerCase() === 'compact') {
+    comp = (
       <Dropdown
+        className={cssClasses}
+        error={getError(data.id)}
+        id={id}
+        label={formatDateTime(data.label)}
         onChange={(option) => onSingleChange(option)}
         options={data.choices.map((choice) => ({label: choice.title, value: choice.value}))}
         placeholder={data.placeholder}
+        required={data.isRequired}
         value={value}
       />
     );
   } else {
-    input = data.choices.map((choice, index) => (
-      <RadioButton
-        key={index}
-        onChange={() => onSingleChange(choice.value)}
-        selected={choice.value === value}
-        title={choice.title}
-      />
-    ));
-  }
+    if (data.isMultiSelect === true || data.choices.length === 1) {
+      input = data.choices.map((choice, index) => (
+        <Checkbox
+          key={index}
+          onChange={(isSelected) => onMultiChange(choice.value, isSelected)}
+          selected={values[choice.value]}
+          title={choice.title}
+        />
+      ));
+    } else {
+      input = data.choices.map((choice, index) => (
+        <RadioButton
+          key={index}
+          onChange={() => onSingleChange(choice.value)}
+          selected={choice.value === value}
+          title={choice.title}
+        />
+      ));
+    }
 
-  useEffect(() => {
-    setInput({
-      id: data.id,
-      value: data.value,
-      isRequired: data.isRequired,
-      errorMessage: data.errorMessage,
-    });
-  }, [
-    data.id,
-    data.value,
-    data.isRequired,
-    data.errorMessage,
-    setInput,
-  ]);
+    comp = (
+      <Label
+        className={cssClasses}
+        error={getError(data.id)}
+        id={id}
+        label={formatDateTime(data.label)}
+        required={data.isRequired}
+        style={style}
+      >
+        {input}
+      </Label>
+    );
+  }
 
-  return (
-    <Label
-      className={cssClasses}
-      error={getError(data.id)}
-      label={formatDateTime(data.label)}
-      required={data.isRequired}
-      style={style}
-    >
-      {input}
-    </Label>
-  );
+  return comp;
 }
 
 InputChoiceSet.propTypes = {
   data: PropTypes.shape().isRequired,
   className: PropTypes.string,
+  id: PropTypes.string,
   style: PropTypes.shape(),
 };
 
 InputChoiceSet.defaultProps = {
   className: '',
+  id: undefined,
   style: undefined,
 };
 
diff --git a/src/components/generic/InputField/InputField.jsx b/src/components/generic/InputField/InputField.jsx
index f0b1a1a89..86422ad20 100644
--- a/src/components/generic/InputField/InputField.jsx
+++ b/src/components/generic/InputField/InputField.jsx
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import webexComponentClasses from '../../helpers';
 import {useRef, useAutoFocus} from '../../hooks';
+import {uniqueId} from '../../../util';
 import Label from '../../inputs/Label/Label';
 
 /**
@@ -15,6 +16,7 @@ import Label from '../../inputs/Label/Label';
  * @param {string} [props.className]  Custom CSS class to apply
  * @param {boolean} [props.disabled=false]  Flag indicating input disabled
  * @param {string} [props.error]  Error text
+ * @param {string} [props.id]  DOM id
  * @param {string} [props.label]  Label text
  * @param {number} [props.max]  Maximum value for the input element
  * @param {number} [props.maxLength]  Maximum number of characters allowed
@@ -38,6 +40,7 @@ export default function InputField({
   className,
   disabled,
   error,
+  id: domId,
   label,
   max,
   maxLength,
@@ -61,6 +64,7 @@ export default function InputField({
   });
   const inputRef = useRef();
   const handleChange = (event) => onChange(event.target.value);
+  const id = domId || uniqueId();
 
   useAutoFocus(inputRef, autoFocus);
 
@@ -68,6 +72,7 @@ export default function InputField({
     <Label
       className={cssClasses}
       error={error}
+      id={id}
       label={label}
       required={required}
       style={style}
@@ -75,11 +80,13 @@ export default function InputField({
       <div className={sc('form-control')}>
         <input
           aria-label={ariaLabel}
+          aria-labelledby={`${id}-label`}
           // disabling no-autofocus because otherwise this element cannot be autofocused depending on the autoFocus prop
           // eslint-disable-next-line jsx-a11y/no-autofocus
           autoFocus={autoFocus}
           className={classNames(sc('input'), {[sc('error')]: error})}
           disabled={disabled}
+          id={`${id}-control`}
           max={max}
           maxLength={maxLength}
           min={min}
@@ -114,6 +121,7 @@ InputField.propTypes = {
   className: PropTypes.string,
   disabled: PropTypes.bool,
   error: PropTypes.string,
+  id: PropTypes.string,
   label: PropTypes.string,
   max: PropTypes.number,
   maxLength: PropTypes.number,
@@ -143,6 +151,7 @@ InputField.defaultProps = {
   className: undefined,
   disabled: false,
   error: undefined,
+  id: undefined,
   label: undefined,
   max: undefined,
   maxLength: undefined,
diff --git a/src/components/inputs/Dropdown/Dropdown.jsx b/src/components/inputs/Dropdown/Dropdown.jsx
index 33b3f8a15..d9c1318fc 100644
--- a/src/components/inputs/Dropdown/Dropdown.jsx
+++ b/src/components/inputs/Dropdown/Dropdown.jsx
@@ -16,6 +16,7 @@ import {uniqueId} from '../../../util';
  * @param {string} [props.className]  Custom CSS class to apply
  * @param {boolean} [props.disabled=false]  True when the control is disabled
  * @param {string} [props.error]  Error text
+ * @param {string} [props.id]  DOM id
  * @param {string} [props.label]  Label text
  * @param {Function} props.onChange  Action to perform on option selection
  * @param {object[]} [props.options]  Array of options
@@ -32,6 +33,7 @@ export default function Dropdown({
   className,
   disabled,
   error,
+  id: domId,
   label: controlLabel,
   onChange,
   options,
@@ -49,8 +51,7 @@ export default function Dropdown({
   const controlRef = useRef();
   const selectedOptionRef = useRef();
   const position = useElementPosition(controlRef);
-  const labelId = uniqueId();
-  const optionsId = uniqueId();
+  const id = domId || uniqueId();
 
   const collapse = () => setExpanded(undefined);
   const expand = (withKey) => setExpanded({withKey});
@@ -129,7 +130,7 @@ export default function Dropdown({
       className={cssClasses}
       style={style}
       error={error}
-      labelId={labelId}
+      id={id}
       label={controlLabel}
       required={required}
     >
@@ -137,17 +138,18 @@ export default function Dropdown({
       {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
       <div className={sc('control')} ref={controlRef} disabled={disabled} onKeyDown={handleKeyDown}>
         <div
-          aria-controls={optionsId}
+          aria-controls={`${id}-options`}
           aria-expanded={expanded}
           aria-haspopup="listbox"
           aria-label={ariaLabel}
-          aria-labelledby={labelId}
+          aria-labelledby={`${id}-label`}
           className={`${sc('selected-option')} ${expanded ? sc('expanded') : ''}`}
+          id={`${id}-control`}
           onClick={() => toggleExpanded(false)}
+          onKeyDown={handleSelectedOptionKeyDown}
           role="combobox"
           tabIndex={disabled ? -1 : tabIndex}
           title={tooltip}
-          onKeyDown={handleSelectedOptionKeyDown}
           ref={selectedOptionRef}
         >
           <span className={sc('label')}>{options === null ? 'Loading...' : (label || value || placeholder)}</span>
@@ -156,15 +158,15 @@ export default function Dropdown({
         {expanded && (
           <OptionsList
             className={sc('options-list')}
-            options={options}
+            id={`${id}-options`}
+            labelId={`${id}-label`}
+            onBlur={collapse}
             onSelect={handleOptionSelect}
-            withKey={expanded.withKey}
+            options={options}
             selected={value}
             style={layout}
             tabIndex={tabIndex}
-            onBlur={collapse}
-            id={optionsId}
-            labelId={labelId}
+            withKey={expanded.withKey}
           />
         )}
       </div>
@@ -177,6 +179,7 @@ Dropdown.propTypes = {
   className: PropTypes.string,
   disabled: PropTypes.bool,
   error: PropTypes.string,
+  id: PropTypes.string,
   label: PropTypes.string,
   onChange: PropTypes.func.isRequired,
   options: PropTypes.arrayOf(PropTypes.shape({
@@ -196,6 +199,7 @@ Dropdown.defaultProps = {
   className: undefined,
   disabled: false,
   error: undefined,
+  id: undefined,
   label: undefined,
   options: [],
   placeholder: undefined,
diff --git a/src/components/inputs/Label/Label.jsx b/src/components/inputs/Label/Label.jsx
index 1481160ed..7c10b1fea 100644
--- a/src/components/inputs/Label/Label.jsx
+++ b/src/components/inputs/Label/Label.jsx
@@ -7,67 +7,66 @@ import Icon from '../../generic/Icon/Icon';
  * Label wraps a form input and displays label text and error message
  *
  * @param {object} props  React props passed to the component
- * @param {string} [props.className]  Custom CSS class to apply
- * @param {object} [props.style]  Custom style to apply
  * @param {React.ReactNode[]}  props.children  List of children
- * @param {string} [props.label]  Label text
- * @param {string} [props.labelId]  Label id
+ * @param {string} [props.className]  Custom CSS class to apply
  * @param {string} [props.error]  Error text
+ * @param {string} props.id  Label id
+ * @param {string} [props.label]  Label text
  * @param {boolean} [props.required=false]  Flag indicating whether the control is required
+ * @param {object} [props.style]  Custom style to apply
  * @returns {object} JSX of the component
  */
 export default function Label({
-  className,
-  style,
   children,
-  label,
-  labelId,
+  className,
   error,
+  id,
+  label,
   required,
+  style,
 }) {
   const [cssClasses, sc] = webexComponentClasses('label', className);
 
   return (
-    // disabling label-has-associated-control as eslint does not see role attribute as a nested control
-    // eslint-disable-next-line jsx-a11y/label-has-associated-control
-    <label className={cssClasses} style={style} id={labelId}>
+    <div className={cssClasses} style={style}>
       {
         label && (
-          <div className={sc('label-text')}>
-            {label}
+          // disabling label-has-associated-control as eslint does not see role attribute as a nested control
+          // eslint-disable-next-line jsx-a11y/label-has-associated-control
+          <label className={sc('label-text')} htmlFor={`${id}-control`} id={`${id}-label`}>
+            <span>{label}</span>
             {required && <span className={sc('required')}> *</span>}
-          </div>
+          </label>
         )
       }
       <div className={sc('control')}>{children}</div>
       {
         error
         && (
-          <div className={sc('error')}>
+          <div className={sc('error')} id={`${id}-error`}>
             <Icon name="warning" size={16} className={sc('error-icon')} />
             <span className={sc('error-text')}>{error}</span>
           </div>
         )
       }
-    </label>
+    </div>
   );
 }
 
 Label.propTypes = {
-  className: PropTypes.string,
-  style: PropTypes.shape(),
   children: PropTypes.node.isRequired,
-  label: PropTypes.string,
-  labelId: PropTypes.string,
+  className: PropTypes.string,
   error: PropTypes.string,
+  id: PropTypes.string.isRequired,
+  label: PropTypes.string,
   required: PropTypes.bool,
+  style: PropTypes.shape(),
 };
 
 Label.defaultProps = {
   className: undefined,
-  style: undefined,
-  label: undefined,
-  labelId: undefined,
   error: undefined,
+  label: undefined,
   required: false,
+  style: undefined,
 };
diff --git a/src/components/inputs/Label/Label.scss b/src/components/inputs/Label/Label.scss
index 88c66f7f3..4e09230f7 100644
--- a/src/components/inputs/Label/Label.scss
+++ b/src/components/inputs/Label/Label.scss
@@ -5,6 +5,7 @@ $C: #{$WEBEX_COMPONENTS_CLASS_PREFIX}-label;
   flex-direction: column;
 
   &__label-text {
+    align-self: flex-start;
     color: var(--wxc-text-color);
     font-size: 0.875rem;
     margin: 0 0 0.25rem 0.8125rem;
diff --git a/src/components/inputs/Textbox/Textbox.jsx b/src/components/inputs/Textbox/Textbox.jsx
index f2fa38054..eb09451f0 100644
--- a/src/components/inputs/Textbox/Textbox.jsx
+++ b/src/components/inputs/Textbox/Textbox.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import webexComponentClasses from '../../helpers';
 import Label from '../Label/Label';
+import {uniqueId} from '../../../util';
 
 /**
  * Textbox component
@@ -11,6 +12,7 @@ import Label from '../Label/Label';
  * @param {string} [props.className]  Custom CSS class to apply
  * @param {boolean} [props.disabled=false]  Flag indicating whether textbox is disabled
  * @param {string} [props.error]  Error text
+ * @param {string} [props.id]  DOM id
  * @param {string} [props.label]  Label text
  * @param {number} [props.maxLength] Maximum number of characters allowed
  * @param {string} props.name  Textbox name
@@ -26,6 +28,7 @@ export default function Textbox({
   className,
   disabled,
   error,
+  id: domId,
   label,
   maxLength,
   name,
@@ -36,19 +39,29 @@ export default function Textbox({
   value,
 }) {
   const [cssClasses, sc] = webexComponentClasses('textbox', className);
+  const id = domId || uniqueId();
 
   return (
-    <Label className={cssClasses} error={error} label={label} required={required} style={style}>
+    <Label
+      className={cssClasses}
+      error={error}
+      id={id}
+      label={label}
+      required={required}
+      style={style}
+    >
       <textarea
         aria-label={ariaLabel}
+        aria-labelledby={`${id}-label`}
         className={sc('control')}
         disabled={disabled}
+        id={`${id}-control`}
         maxLength={maxLength}
         name={name}
         onChange={(event) => onChange(event.target.value)}
         placeholder={placeholder}
-        value={value}
         rows={5}
+        value={value}
       />
     </Label>
   );
@@ -59,6 +72,7 @@ Textbox.propTypes = {
   className: PropTypes.string,
   disabled: PropTypes.bool,
   error: PropTypes.string,
+  id: PropTypes.string,
   label: PropTypes.string,
   maxLength: PropTypes.number,
   name: PropTypes.string,
@@ -74,6 +88,7 @@ Textbox.defaultProps = {
   className: undefined,
   disabled: false,
   error: null,
+  id: undefined,
   label: undefined,
   maxLength: undefined,
   name: undefined,