feat(inputs): add aria-errormessage and aria-invalid on inputs

webex · Mar 18, 2022 · 380c5d1 · 380c5d1
1 parent d536cc0
commit 380c5d1
Show file tree

Hide file tree

Showing 11 changed files with 47 additions and 0 deletions.
diff --git a/src/components/WebexActivity/__snapshots__/WebexActivity.stories.storyshot b/src/components/WebexActivity/__snapshots__/WebexActivity.stories.storyshot
@@ -160,6 +160,7 @@ Array [
                       className="wxc-input-field__form-control"
                     >
                       <input
+                        aria-invalid="false"
                         aria-labelledby="wxc-0-label"
                         autoFocus={false}
                         className="wxc-input-field__input"
@@ -230,6 +231,7 @@ Array [
                       className="wxc-input-field__form-control"
                     >
                       <input
+                        aria-invalid="false"
                         aria-labelledby="wxc-0-label"
                         autoFocus={false}
                         className="wxc-input-field__input"
@@ -285,6 +287,7 @@ Array [
                   className="wxc-input-field__form-control"
                 >
                   <input
+                    aria-invalid="false"
                     aria-labelledby="wxc-0-label"
                     autoFocus={false}
                     className="wxc-input-field__input"
@@ -339,6 +342,7 @@ Array [
               <div
                 aria-controls="wxc-0-options"
                 aria-haspopup="listbox"
+                aria-invalid="false"
                 aria-labelledby="wxc-0-label"
                 className="wxc-dropdown__selected-option "
                 id="wxc-0-control"
@@ -403,6 +407,7 @@ Array [
               className="wxc-input-field__form-control"
             >
               <input
+                aria-invalid="false"
                 aria-labelledby="wxc-0-label"
                 autoFocus={false}
                 className="wxc-input-field__input"
@@ -580,6 +585,7 @@ Array [
                   className="wxc-input-field__form-control"
                 >
                   <input
+                    aria-invalid="false"
                     aria-labelledby="wxc-0-label"
                     autoFocus={false}
                     className="wxc-input-field__input"
@@ -646,6 +652,7 @@ Array [
                   className="wxc-input-field__form-control"
                 >
                   <input
+                    aria-invalid="false"
                     aria-labelledby="wxc-0-label"
                     autoFocus={false}
                     className="wxc-input-field__input"
@@ -697,6 +704,7 @@ Array [
               className="wxc-input-field__form-control"
             >
               <input
+                aria-invalid="false"
                 aria-labelledby="wxc-0-label"
                 autoFocus={false}
                 className="wxc-input-field__input"
@@ -743,6 +751,7 @@ Array [
             className="wxc-label__control"
           >
             <div
+              aria-invalid="false"
               aria-labelledby="wxc-0-label"
               role="radiogroup"
             >

diff --git a/src/components/WebexMeetingControl/__snapshots__/WebexMeetingControl.stories.storyshot b/src/components/WebexMeetingControl/__snapshots__/WebexMeetingControl.stories.storyshot
@@ -200,6 +200,7 @@ Array [
           <div
             aria-controls="wxc-0-options"
             aria-haspopup="listbox"
+            aria-invalid="false"
             aria-label="Use arrow keys to navigate between camera options and hit \\"Enter\\" to select."
             aria-labelledby="wxc-0-label"
             className="wxc-dropdown__selected-option "

diff --git a/...eetingGuestAuthentication/__snapshots__/WebexMeetingGuestAuthentication.stories.storyshot b/...eetingGuestAuthentication/__snapshots__/WebexMeetingGuestAuthentication.stories.storyshot
@@ -49,6 +49,7 @@ Array [
             className="wxc-input-field__form-control"
           >
             <input
+              aria-invalid="false"
               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}
@@ -85,6 +86,8 @@ Array [
             className="wxc-input-field__form-control"
           >
             <input
+              aria-errormessage=""
+              aria-invalid="false"
               aria-label="The password is provided in the invitation for a scheduled  meeting, or from the host."
               aria-labelledby="wxc-0-label"
               autoFocus={false}

diff --git a/...xMeetingHostAuthentication/__snapshots__/WebexMeetingHostAuthentication.stories.storyshot b/...xMeetingHostAuthentication/__snapshots__/WebexMeetingHostAuthentication.stories.storyshot
@@ -50,6 +50,8 @@ Array [
             className="wxc-input-field__form-control"
           >
             <input
+              aria-errormessage=""
+              aria-invalid="false"
               aria-label="The host key is generated when a meeting is scheduled."
               aria-labelledby="wxc-0-label"
               autoFocus={true}

diff --git a/src/components/WebexSettings/__snapshots__/WebexSettings.stories.storyshot b/src/components/WebexSettings/__snapshots__/WebexSettings.stories.storyshot
@@ -77,6 +77,7 @@ Array [
                   <div
                     aria-controls="wxc-0-options"
                     aria-haspopup="listbox"
+                    aria-invalid="false"
                     aria-label="Use arrow keys to navigate between speaker options and hit \\"Enter\\" to select."
                     aria-labelledby="wxc-0-label"
                     className="wxc-dropdown__selected-option "
@@ -132,6 +133,7 @@ Array [
                   <div
                     aria-controls="wxc-0-options"
                     aria-haspopup="listbox"
+                    aria-invalid="false"
                     aria-label="Use arrow keys to navigate between microphone options and hit \\"Enter\\" to select."
                     aria-labelledby="wxc-0-label"
                     className="wxc-dropdown__selected-option "

diff --git a/.../adaptive-cards/AdaptiveCard/AdaptiveCard.stories/__snapshots__/Actions.stories.storyshot b/.../adaptive-cards/AdaptiveCard/AdaptiveCard.stories/__snapshots__/Actions.stories.storyshot
@@ -72,6 +72,7 @@ Array [
             className="wxc-input-field__form-control"
           >
             <input
+              aria-invalid="false"
               aria-labelledby="wxc-0-label"
               autoFocus={false}
               className="wxc-input-field__input"
@@ -120,6 +121,7 @@ Array [
             className="wxc-input-field__form-control"
           >
             <input
+              aria-invalid="false"
               aria-labelledby="wxc-0-label"
               autoFocus={false}
               className="wxc-input-field__input"
@@ -519,6 +521,7 @@ Array [
             className="wxc-input-field__form-control"
           >
             <input
+              aria-invalid="false"
               aria-labelledby="wxc-0-label"
               autoFocus={false}
               className="wxc-input-field__input"
@@ -557,6 +560,7 @@ Array [
             className="wxc-input-field__form-control"
           >
             <input
+              aria-invalid="false"
               aria-labelledby="wxc-0-label"
               autoFocus={false}
               className="wxc-input-field__input"
@@ -592,6 +596,7 @@ Array [
           className="wxc-input-field__form-control"
         >
           <input
+            aria-invalid="false"
             aria-labelledby="wxc-0-label"
             autoFocus={false}
             className="wxc-input-field__input"

diff --git a/...s/adaptive-cards/AdaptiveCard/AdaptiveCard.stories/__snapshots__/Inputs.stories.storyshot b/...s/adaptive-cards/AdaptiveCard/AdaptiveCard.stories/__snapshots__/Inputs.stories.storyshot
@@ -39,6 +39,7 @@ Array [
           <div
             aria-controls="wxc-0-options"
             aria-haspopup="listbox"
+            aria-invalid="false"
             aria-labelledby="wxc-0-label"
             className="wxc-dropdown__selected-option "
             id="wxc-0-control"
@@ -106,6 +107,7 @@ Array [
           <div
             aria-controls="wxc-0-options"
             aria-haspopup="listbox"
+            aria-invalid="false"
             aria-labelledby="wxc-0-label"
             className="wxc-dropdown__selected-option "
             id="wxc-0-control"
@@ -162,6 +164,7 @@ Array [
         className="wxc-label__control"
       >
         <div
+          aria-invalid="false"
           aria-labelledby="wxc-0-label"
           role="radiogroup"
         >
@@ -240,6 +243,7 @@ Array [
         className="wxc-label__control"
       >
         <div
+          aria-invalid="false"
           aria-labelledby="wxc-0-label"
           role="radiogroup"
         >
@@ -309,6 +313,7 @@ Array [
         className="wxc-label__control"
       >
         <div
+          aria-invalid="false"
           aria-labelledby="wxc-0-label"
           role="group"
         >
@@ -383,6 +388,7 @@ Array [
         className="wxc-label__control"
       >
         <div
+          aria-invalid="false"
           aria-labelledby="wxc-0-label"
           role="group"
         >
@@ -575,6 +581,7 @@ Array [
           className="wxc-input-field__form-control"
         >
           <input
+            aria-invalid="false"
             aria-labelledby="wxc-0-label"
             autoFocus={false}
             className="wxc-input-field__input"
@@ -681,6 +688,7 @@ Array [
           className="wxc-input-field__form-control"
         >
           <input
+            aria-invalid="false"
             aria-labelledby="wxc-0-label"
             autoFocus={false}
             className="wxc-input-field__input"
@@ -905,6 +913,7 @@ Array [
             className="wxc-input-field__form-control"
           >
             <input
+              aria-invalid="false"
               aria-labelledby="wxc-0-label"
               autoFocus={false}
               className="wxc-input-field__input"
@@ -976,6 +985,7 @@ Array [
             className="wxc-input-field__form-control"
           >
             <input
+              aria-invalid="false"
               aria-labelledby="wxc-0-label"
               autoFocus={false}
               className="wxc-input-field__input"
@@ -1024,6 +1034,7 @@ Array [
             className="wxc-input-field__form-control"
           >
             <input
+              aria-invalid="false"
               aria-labelledby="wxc-0-label"
               autoFocus={false}
               className="wxc-input-field__input"
@@ -1072,6 +1083,7 @@ Array [
             className="wxc-input-field__form-control"
           >
             <input
+              aria-invalid="false"
               aria-labelledby="wxc-0-label"
               autoFocus={false}
               className="wxc-input-field__input"
@@ -1120,6 +1132,7 @@ Array [
             className="wxc-input-field__form-control"
           >
             <input
+              aria-invalid="false"
               aria-labelledby="wxc-0-label"
               autoFocus={false}
               className="wxc-input-field__input"
@@ -1343,6 +1356,7 @@ Array [
           className="wxc-input-field__form-control"
         >
           <input
+            aria-invalid="false"
             aria-labelledby="wxc-0-label"
             autoFocus={false}
             className="wxc-input-field__input"
@@ -1392,6 +1406,7 @@ Array [
           className="wxc-input-field__form-control"
         >
           <input
+            aria-invalid="false"
             aria-labelledby="wxc-0-label"
             autoFocus={false}
             className="wxc-input-field__input"
@@ -1436,6 +1451,7 @@ Array [
           className="wxc-input-field__form-control"
         >
           <input
+            aria-invalid="false"
             aria-labelledby="wxc-0-label"
             autoFocus={false}
             className="wxc-input-field__input"

diff --git a/src/components/generic/InputField/InputField.jsx b/src/components/generic/InputField/InputField.jsx
@@ -79,6 +79,8 @@ export default function InputField({
     >
       <div className={sc('form-control')}>
         <input
+          aria-errormessage={error && `${id}-error`}
+          aria-invalid={error ? 'true' : 'false'}
           aria-label={ariaLabel}
           aria-labelledby={`${id}-label`}
           // disabling no-autofocus because otherwise this element cannot be autofocused depending on the autoFocus prop

diff --git a/src/components/inputs/CheckboxSet/CheckboxSet.jsx b/src/components/inputs/CheckboxSet/CheckboxSet.jsx
@@ -45,7 +45,10 @@ export default function CheckboxSet({
       required={required}
       style={style}
     >
+      {/* eslint-disable-next-line jsx-a11y/role-supports-aria-props */}
       <div
+        aria-describedby={error && `${id}-error`}
+        aria-invalid={error ? 'true' : 'false'}
         aria-labelledby={`${id}-label`}
         role="group"
       >

diff --git a/src/components/inputs/Dropdown/Dropdown.jsx b/src/components/inputs/Dropdown/Dropdown.jsx
@@ -127,6 +127,8 @@ 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-errormessage={error && `${id}-error`}
+          aria-invalid={error ? 'true' : 'false'}
           aria-controls={`${id}-options`}
           aria-expanded={expanded}
           aria-haspopup="listbox"

diff --git a/src/components/inputs/RadioSet/RadioSet.jsx b/src/components/inputs/RadioSet/RadioSet.jsx
@@ -46,6 +46,8 @@ export default function RadioSet({
       style={style}
     >
       <div
+        aria-describedby={error && `${id}-error`}
+        aria-invalid={error ? 'true' : 'false'}
         aria-labelledby={`${id}-label`}
         role="radiogroup"
       >