fix: (core) Step Input accessibility (#4607)

SAP · Feb 10, 2021 · 8e18b98 · 8e18b98
1 parent c017b8e
commit 8e18b98
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 58 deletions.
diff --git a/...step-input/platform-step-input-examples/platform-number-step-input-example.component.html b/...step-input/platform-step-input-examples/platform-number-step-input-example.component.html
@@ -1,13 +1,12 @@
 <div class="step-input-example-container">
     <div class="step-input-example">
-        <label>Default Number Step Input</label>
-        <br />
-        <fdp-number-step-input name="number"></fdp-number-step-input>
+        <label fd-form-label for="number">Default Number Step Input</label>
+        <fdp-number-step-input [id]="'number'" name="number"></fdp-number-step-input>
     </div>
     <div class="step-input-example">
-        <label>Compact</label>
-        <br />
+        <label fd-form-label for="compact">Compact</label>
         <fdp-number-step-input
+            [id]="'compact'"
             name="compact"
             contentDensity="compact"
             [value]="value"
@@ -17,48 +16,43 @@
         <small>value: {{ value }}</small>
     </div>
     <div class="step-input-example">
-        <label>Min Max limits <small>(min: -20, max: 20)</small></label>
-        <br />
-        <fdp-number-step-input name="minMaxLimits" [value]="0" [min]="-20" [max]="20"></fdp-number-step-input>
+        <label fd-form-label for="minMaxLimits">Min Max limits <small>(min: -20, max: 20)</small></label>
+        <fdp-number-step-input [id]="'minMaxLimits'" name="minMaxLimits" [value]="0" [min]="-20" [max]="20"></fdp-number-step-input>
     </div>
 </div>
 
 <div class="step-input-example-container">
     <div class="step-input-example">
-        <label>Precision</label>
-        <br />
-        <fdp-number-step-input name="precision" [value]="0" [precision]="2" [step]="0.25"></fdp-number-step-input>
+        <label fd-form-label for="precision">Precision</label>
+        <fdp-number-step-input [id]="'precision'" name="precision" [value]="0" [precision]="2" [step]="0.25"></fdp-number-step-input>
     </div>
     <div class="step-input-example">
-        <label>Disabled</label>
-        <br />
-        <fdp-number-step-input name="stepNumberDisabled" [value]="50" [disabled]="true"></fdp-number-step-input>
+        <label fd-form-label for="stepNumberDisabled">Disabled</label>
+        <fdp-number-step-input [id]="'stepNumberDisabled'" name="stepNumberDisabled" [value]="50" [disabled]="true"></fdp-number-step-input>
     </div>
     <div class="step-input-example">
-        <label>Read Only</label>
-        <br />
-        <fdp-number-step-input name="stepNumberReadOnly" [value]="50" [editable]="false"></fdp-number-step-input>
+        <label fd-form-label for="stepNumberReadOnly">Read Only</label>
+        <fdp-number-step-input [id]="'stepNumberReadOnly'" name="stepNumberReadOnly" [value]="50" [editable]="false"></fdp-number-step-input>
     </div>
     <div class="step-input-example">
-        <label>With description</label>
-        <br />
-        <fdp-number-step-input name="stepNumberDescription" description="PC" [value]="25"></fdp-number-step-input>
+        <label fd-form-label for="stepNumberDescription">With description</label>
+        <fdp-number-step-input [id]="'stepNumberDescription'" name="stepNumberDescription" description="PC" [value]="25"></fdp-number-step-input>
     </div>
 </div>
 
 <label>Horizontal alignment in the input field</label>
 <br />
 <div class="step-input-example-container">
     <div class="step-input-example">
-        <small>Left</small><br />
-        <fdp-number-step-input name="alignment" align="left" [value]="100"></fdp-number-step-input>
+        <label fd-form-label for="alignmentLeft">Left</label>
+        <fdp-number-step-input [id]="'alignmentLeft'" name="alignment" align="left" [value]="100"></fdp-number-step-input>
     </div>
     <div class="step-input-example">
-        <small>Center</small><br />
-        <fdp-number-step-input name="alignment" align="center" [value]="100"></fdp-number-step-input>
+        <label fd-form-label for="alignmentCenter">Center</label>
+        <fdp-number-step-input [id]="'alignmentCenter'" name="alignment" align="center" [value]="100"></fdp-number-step-input>
     </div>
     <div class="step-input-example">
-        <small>Right</small><br />
-        <fdp-number-step-input name="alignment" align="right" [value]="100"></fdp-number-step-input>
+        <label fd-form-label for="alignmentRight">Right</label>
+        <fdp-number-step-input [id]="'alignmentRight'" name="alignment" align="right" [value]="100"></fdp-number-step-input>
     </div>
 </div>
diff --git a/...t/platform-step-input-examples/platform-number-step-input-reactive-example.component.html b/...t/platform-step-input-examples/platform-number-step-input-reactive-example.component.html
@@ -4,21 +4,23 @@ <h4>Enter value between {{ MIN_VALUE }} and {{ MAX_VALUE }}</h4>
         <fdp-form-group #fg>
             <fdp-form-field
                 #formField
-                id="qty"
+                id="reactive-form-qty"
                 label="Quantity"
                 placeholder="Things quantity"
-                hint="This is tooltip to help"
-                rank="10"
-                hintPlacement="left"
                 [validators]="stepInputQtyValidators"
             >
-                <fdp-number-step-input name="qty" [formControl]="formField.formControl"></fdp-number-step-input>
+                <fdp-number-step-input
+                    [id]="'reactive-form-qty'"
+                    ariaLabelledBy="step-input-valueRequiredError step-input-valueMinError step-input-valueMaxError"
+                    name="qty"
+                    [formControl]="formField.formControl"
+                ></fdp-number-step-input>
             </fdp-form-field>
 
             <ng-template #i18n let-errors>
-                <span *ngIf="errors.required"> Value is required </span>
-                <span *ngIf="errors.min"> Value must be more than {{ MIN_VALUE }} </span>
-                <span *ngIf="errors.max"> Value must be less than {{ MAX_VALUE }} </span>
+                <span id="step-input-valueRequiredError" *ngIf="errors.required"> Value is required </span>
+                <span id="step-input-valueMinError" *ngIf="errors.min"> Value must be more than {{ MIN_VALUE }} </span>
+                <span id="step-input-valueMaxError" *ngIf="errors.max"> Value must be less than {{ MAX_VALUE }} </span>
             </ng-template>
         </fdp-form-group>
     </div>

diff --git a/...nput/platform-step-input-examples/platform-number-step-input-state-example.component.html b/...nput/platform-step-input-examples/platform-number-step-input-state-example.component.html
@@ -1,12 +1,13 @@
 <div class="step-input-example-container">
     <div class="step-input-example" *ngFor="let state of states">
-        <label fd-form-label>Number Step Input State: <code>{{ state }}</code></label>
-        <div>
-            <fdp-number-step-input
-                [name]="'number-step-' + state"
-                [state]="state"
-                contentDensity="compact"
-            ></fdp-number-step-input>
-        </div>
+        <label fd-form-label [for]="'number-step-' + state">
+            Number Step Input State: <code>{{ state }}</code>
+        </label>
+        <fdp-number-step-input
+            [id]="'number-step-' + state"
+            [name]="'number-step-' + state"
+            [state]="state"
+            contentDensity="compact"
+        ></fdp-number-step-input>
     </div>
 </div>
diff --git a/...t/platform-step-input-examples/platform-number-step-input-template-example.component.html b/...t/platform-step-input-examples/platform-number-step-input-template-example.component.html
@@ -2,7 +2,7 @@
     <div class="fd-page__content fd-has-background-color-neutral-2">
         <fdp-form-group>
             <fdp-form-field
-                id="number"
+                id="quantity-template-driven"
                 label="Quantity"
                 placeholder="Things quantity"
                 hint="This is tooltip to help"
@@ -11,7 +11,7 @@
                 hintPlacement="left"
                 [validators]="stepInputQtyValidators"
             >
-                <fdp-number-step-input name="qty" [(ngModel)]="qty"></fdp-number-step-input>
+                <fdp-number-step-input [id]="'quantity-template-driven'" name="qty" [(ngModel)]="qty"></fdp-number-step-input>
             </fdp-form-field>
 
             <ng-template #i18n let-errors>

diff --git a/libs/platform/src/lib/components/form/step-input/base.step-input.ts b/libs/platform/src/lib/components/form/step-input/base.step-input.ts
@@ -132,18 +132,6 @@ export abstract class StepInputComponent extends BaseInput implements OnInit {
     @Input()
     decrementLabel: string = this.config.decrementLabel;
 
-    /**
-     * ARIA label for input element
-     */
-    @Input()
-    ariaLabel = 'Step input';
-
-    /**
-     * ARIA labelledby for input element
-     */
-    @Input()
-    ariaLabelledby: string;
-
     /** Emits new value when control value has changed */
     @Output()
     valueChange: EventEmitter<StepInputChangeEvent> = new EventEmitter<StepInputChangeEvent>();

diff --git a/libs/platform/src/lib/components/form/step-input/number/number-step-input.component.html b/libs/platform/src/lib/components/form/step-input/number/number-step-input.component.html
@@ -33,7 +33,8 @@
         [readonly]="!editable"
         [attr.placeholder]="placeholder || ''"
         [attr.aria-label]="ariaLabel"
-        [attr.aria-labelledby]="ariaLabelledby"
+        [attr.aria-labelledby]="ariaLabelledBy"
+        [attr.aria-describedby]="description ? id + '__description' : ''"
         [style.textAlign]="_align"
         fdpStepInputControl
         type="text"
@@ -56,6 +57,6 @@
         {{ showLabels ? incrementLabel : '' }}
     </button>
 </div>
-<span *ngIf="description" class="fd-form-label fd-form-label--unit-description">
+<span *ngIf="description" [id]="id + '__description'" class="fd-form-label fd-form-label--unit-description">
     {{ description }}
 </span>