fix(components): link label and input control in a more accessible way

webex · Mar 7, 2022 · 1e9e2da · 1e9e2da
1 parent 05eca3b
commit 1e9e2da
Show file tree

Hide file tree

Showing 13 changed files with 554 additions and 371 deletions.
diff --git a/src/components/WebexActivity/__snapshots__/WebexActivity.stories.storyshot b/src/components/WebexActivity/__snapshots__/WebexActivity.stories.storyshot
diff --git 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/...eetingGuestAuthentication/__snapshots__/WebexMeetingGuestAuthentication.stories.storyshot b/...eetingGuestAuthentication/__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/...xMeetingHostAuthentication/__snapshots__/WebexMeetingHostAuthentication.stories.storyshot b/...xMeetingHostAuthentication/__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
@@ -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>