feat(components/forms): support status indicator errors for input box (#633)

apps/code-examples/src/app/code-examples/datetime/timepicker/basic/timepicker-demo.component.html

@@ -7,19 +7,20 @@
         type="text"
         skyId
         [skyTimepickerInput]="timepicker"
+        [attr.aria-describedby]="timeError.id"
         #startTime="skyId"
       />
     </sky-timepicker>
-  </sky-input-box>
-
-  <p
-    *ngIf="timeControl.errors && (timeControl.dirty || timeControl.touched)"
-    class="sky-error-label"
-  >
-    <span [hidden]="timeControl.errors && !timeControl.invalid">
-      Select or enter a valid time.
+    <span class="sky-error-indicator" skyId #timeError="skyId">
+      <sky-status-indicator
+        *ngIf="timeControl.errors && (timeControl.dirty || timeControl.touched)"
+        indicatorType="danger"
+        descriptionType="error"
+      >
+        Select or enter a valid time.
+      </sky-status-indicator>
     </span>
-  </p>
+  </sky-input-box>
 </form>
 
 <button

apps/code-examples/src/app/code-examples/datetime/timepicker/basic/timepicker-demo.module.ts

@@ -4,6 +4,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { SkyIdModule } from '@skyux/core';
 import { SkyTimepickerModule } from '@skyux/datetime';
 import { SkyInputBoxModule } from '@skyux/forms';
+import { SkyStatusIndicatorModule } from '@skyux/indicators';
 
 import { TimepickerDemoComponent } from './timepicker-demo.component';
 
@@ -14,6 +15,7 @@ import { TimepickerDemoComponent } from './timepicker-demo.component';
     ReactiveFormsModule,
     SkyIdModule,
     SkyInputBoxModule,
+    SkyStatusIndicatorModule,
     SkyTimepickerModule,
   ],
   exports: [TimepickerDemoComponent],

apps/code-examples/src/app/code-examples/forms/character-count/character-count-demo.component.html

@@ -18,16 +18,20 @@
           skyId
           [skyCharacterCounterIndicator]="descriptionIndicator"
           [skyCharacterCounterLimit]="maxDescriptionCharacterCount"
+          [attr.aria-describedby]="characterCountError.id"
           #descriptionInput="skyId"
         />
 
-        <div
-          *ngIf="description.errors?.skyCharacterCounter"
-          class="sky-error-label"
-        >
-          Limit Transaction description to
-          {{ maxDescriptionCharacterCount }} characters.
-        </div>
+        <span class="sky-error-indicator" skyId #characterCountError="skyId">
+          <sky-status-indicator
+            *ngIf="description.errors?.skyCharacterCounter"
+            indicatorType="danger"
+            descriptionType="error"
+          >
+            Limit Transaction description to
+            {{ maxDescriptionCharacterCount }} characters.
+          </sky-status-indicator>
+        </span>
       </sky-input-box>
     </div>
   </form>

apps/code-examples/src/app/code-examples/forms/character-count/character-count-demo.module.ts

@@ -3,6 +3,7 @@ import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { SkyIdModule } from '@skyux/core';
 import { SkyCharacterCounterModule, SkyInputBoxModule } from '@skyux/forms';
+import { SkyStatusIndicatorModule } from '@skyux/indicators';
 
 import { CharacterCountDemoComponent } from './character-count-demo.component';
 
@@ -14,6 +15,7 @@ import { CharacterCountDemoComponent } from './character-count-demo.component';
     SkyCharacterCounterModule,
     SkyIdModule,
     SkyInputBoxModule,
+    SkyStatusIndicatorModule,
   ],
   declarations: [CharacterCountDemoComponent],
   exports: [CharacterCountDemoComponent],

apps/code-examples/src/app/code-examples/forms/input-box/basic/input-box-demo.component.html

@@ -9,9 +9,9 @@ <h2>New member form</h2>
       <sky-row>
         <sky-column [screenSmall]="12" [screenMedium]="6">
           <sky-input-box class="sky-margin-stacked-lg">
-            <label class="sky-control-label" [for]="firstNameInput.id"
-              >First name</label
-            >
+            <label class="sky-control-label" [for]="firstNameInput.id">
+              First name
+            </label>
             <input
               formControlName="firstName"
               type="text"
@@ -24,27 +24,31 @@ <h2>New member form</h2>
         </sky-column>
         <sky-column [screenSmall]="12" [screenMedium]="6">
           <sky-input-box class="sky-margin-stacked-lg">
-            <label class="sky-control-label" [for]="lastNameInput.id"
-              >Last name</label
-            >
+            <label class="sky-control-label" [for]="lastNameInput.id">
+              Last name
+            </label>
             <input
               formControlName="lastName"
               type="text"
               spellcheck="false"
               class="sky-form-control"
+              [attr.aria-describedby]="lastNameError.id"
               skyId
               #lastNameInput="skyId"
             />
-            <div
-              *ngIf="
-                (lastName.dirty || lastName.touched) &&
-                lastName.errors &&
-                lastName.errors.required
-              "
-              class="sky-error-label"
-            >
-              Last name is required.
-            </div>
+            <span class="sky-error-indicator" skyId #lastNameError="skyId">
+              <sky-status-indicator
+                *ngIf="
+                  (lastName.dirty || lastName.touched) &&
+                  lastName.errors &&
+                  lastName.errors.required
+                "
+                indicatorType="danger"
+                descriptionType="error"
+              >
+                Last name is required.
+              </sky-status-indicator>
+            </span>
           </sky-input-box>
         </sky-column>
       </sky-row>
@@ -75,29 +79,34 @@ <h2>New member form</h2>
             <input
               class="sky-form-control"
               formControlName="email"
+              [attr.aria-describedby]="emailError.id"
               skyId
               #emailInput="skyId"
             />
-            <div
-              *ngIf="
-                (email.dirty || email.touched) &&
-                email.errors &&
-                email.errors.required
-              "
-              class="sky-error-label"
-            >
-              Email address is required.
-            </div>
-            <div
-              *ngIf="
-                (email.dirty || email.touched) &&
-                email.errors &&
-                email.errors.skyEmail
-              "
-              class="sky-error-label"
-            >
-              Enter a valid email in the "joe@abc.com" format.
-            </div>
+            <span class="sky-error-indicator" skyId #emailError="skyId">
+              <sky-status-indicator
+                *ngIf="
+                  (email.dirty || email.touched) &&
+                  email.errors &&
+                  email.errors.required
+                "
+                indicatorType="danger"
+                descriptionType="error"
+              >
+                Email is required.
+              </sky-status-indicator>
+              <sky-status-indicator
+                *ngIf="
+                  (email.dirty || email.touched) &&
+                  email.errors &&
+                  email.errors.skyEmail
+                "
+                indicatorType="danger"
+                descriptionType="error"
+              >
+                Enter a valid email in the "joe@abc.com" format.
+              </sky-status-indicator>
+            </span>
           </sky-input-box>
         </sky-column>
         <sky-column [screenSmall]="12" [screenMedium]="6">
@@ -108,19 +117,25 @@ <h2>New member form</h2>
             <sky-datepicker>
               <input
                 formControlName="dob"
+                [attr.aria-describedby]="dobError.id"
                 skyId
                 #dobInput="skyId"
                 skyDatepickerInput
               />
             </sky-datepicker>
-            <div
-              *ngIf="
-                (dob.dirty || dob.touched) && dob.errors && dob.errors.required
-              "
-              class="sky-error-label"
-            >
-              Date of birth is required.
-            </div>
+            <span class="sky-error-indicator" skyId #dobError="skyId">
+              <sky-status-indicator
+                *ngIf="
+                  (dob.dirty || dob.touched) &&
+                  dob.errors &&
+                  dob.errors.required
+                "
+                indicatorType="danger"
+                descriptionType="error"
+              >
+                Date of birth is required.
+              </sky-status-indicator>
+            </span>
           </sky-input-box>
         </sky-column>
       </sky-row>

apps/code-examples/src/app/code-examples/forms/input-box/basic/input-box-demo.module.ts

@@ -4,7 +4,10 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { SkyIdModule } from '@skyux/core';
 import { SkyDatepickerModule } from '@skyux/datetime';
 import { SkyInputBoxModule } from '@skyux/forms';
-import { SkyHelpInlineModule } from '@skyux/indicators';
+import {
+  SkyHelpInlineModule,
+  SkyStatusIndicatorModule,
+} from '@skyux/indicators';
 import { SkyBoxModule, SkyFluidGridModule } from '@skyux/layout';
 import { SkyPopoverModule } from '@skyux/popovers';
 import { SkyEmailValidationModule } from '@skyux/validation';
@@ -23,6 +26,7 @@ import { InputBoxDemoComponent } from './input-box-demo.component';
     SkyIdModule,
     SkyInputBoxModule,
     SkyPopoverModule,
+    SkyStatusIndicatorModule,
   ],
   declarations: [InputBoxDemoComponent],
   exports: [InputBoxDemoComponent],

apps/code-examples/src/app/code-examples/tabs/sectioned-form/modal/information-form-demo.component.html

@@ -24,16 +24,19 @@
           class="sky-form-control"
           formControlName="id"
           type="text"
+          [attr.aria-describedby]="inputError.id"
           #idInput
         />
+        <span class="sky-error-indicator" skyId #inputError="skyId">
+          <sky-status-indicator
+            *ngIf="myForm.get('id')?.invalid"
+            indicatorType="danger"
+            descriptionType="error"
+          >
+            Enter a valid value.
+          </sky-status-indicator>
+        </span>
       </sky-input-box>
-      <div *ngIf="myForm.get('id')?.invalid" class="alert alert-danger"></div>
-      <div
-        *ngIf="myForm.get('id')?.invalid"
-        class="alert alert-danger sky-error-label"
-      >
-        Enter a valid value.
-      </div>
     </div>
   </div>
 </form>

apps/code-examples/src/app/code-examples/tabs/sectioned-form/modal/sectioned-form-demo.module.ts

@@ -3,6 +3,7 @@ import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { SkyIdModule } from '@skyux/core';
 import { SkyInputBoxModule } from '@skyux/forms';
+import { SkyStatusIndicatorModule } from '@skyux/indicators';
 import { SkyModalModule } from '@skyux/modals';
 import { SkySectionedFormModule } from '@skyux/tabs';
 
@@ -28,6 +29,7 @@ import { SectionedFormModalDemoComponent } from './sectioned-form-modal-demo.com
     SkyInputBoxModule,
     SkyModalModule,
     SkySectionedFormModule,
+    SkyStatusIndicatorModule,
   ],
 })
 export class SectionedFormDemoModule {}