Merge branch 'master' of https://github.com/GSA/sam-design-system int…

…o progress-bar

libs/packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gsa-sam/components",
-  "version": "17.0.11",
+  "version": "17.0.12",
   "types": "../../../dist/out-tsc/libs/components/index.d.ts",
   "repository": {
     "type": "git",

libs/packages/sam-formly/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gsa-sam/sam-formly",
-  "version": "17.0.11",
+  "version": "17.0.12",
   "repository": {
     "type": "git",
     "url": "https://github.com/GSA/sam-design-system.git"

libs/packages/sam-formly/src/lib/formly/types/checkbox.html

@@ -25,6 +25,7 @@
       [indeterminate]="props.indeterminate && formControl.value === null"
       [formControl]="formControl"
       [formlyAttributes]="field"
+      [attr.aria-describedby]="props.description ? id + '-description' : undefined"
     />
     <label class="usa-checkbox__label" [for]="id">
       <span [innerHtml]="props.label"></span>

libs/packages/sam-formly/src/lib/formly/types/datepicker.ts

@@ -16,6 +16,7 @@ import { FieldType, FieldTypeConfig } from '@ngx-formly/core';
         [max]="props.maxDate"
         [matDatepicker]="picker"
         [placeholder]="props.placeholder ? props.placeholder : ''"
+        [attr.aria-describedby]="props.description ? id + '-description' : undefined"
         (ngModelChange)="props.change ? props.change(field) : ''"
       />
       <mat-datepicker-toggle class="padding-left-1 padding-top-2" matSuffix [for]="picker">

libs/packages/sam-formly/src/lib/formly/types/input.ts

@@ -20,6 +20,7 @@ import { FieldType, FieldTypeConfig } from '@ngx-formly/core';
         [formlyAttributes]="field"
         [type]="props.inputType ? props.inputType : 'text'"
         [formControl]="formControl"
+        [attr.aria-describedby]="props.description ? id + '-description' : undefined"
       />
       <div
         *ngIf="props.suffix || props.suffixIcon || field.formControl.value"

libs/packages/sam-formly/src/lib/formly/wrappers/validation.wrapper.ts

@@ -6,7 +6,14 @@ import { FieldWrapper } from '@ngx-formly/core';
 @Component({
   template: `
     <ng-container #fieldComponent></ng-container>
-    <div *ngIf="showError" class="usa-error-message" [style.display]="'block'">
+    <div
+      *ngIf="showError"
+      class="usa-error-message"
+      role="alert"
+      [id]="id + '-error-message'"
+      aria-live="assertive"
+      [style.display]="'block'"
+    >
       <formly-validation-message [field]="field"></formly-validation-message>
     </div>
   `,

libs/packages/sam-material-extensions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gsa-sam/sam-material-extensions",
-  "version": "17.0.11",
+  "version": "17.0.12",
   "repository": {
     "type": "git",
     "url": "https://github.com/GSA/sam-design-system.git"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sam-design-system",
-  "version": "17.0.11",
+  "version": "17.0.12",
   "license": "MIT",
   "scripts": {
     "start": "ng serve --configuration development",
@@ -64,7 +64,7 @@
     "@gsa-sam/ngx-uswds-icons": "^17.0.0",
     "@gsa-sam/sam-formly": "^17.0.1",
     "@gsa-sam/sam-material-extensions": "^17.0.1",
-    "@gsa-sam/sam-styles": "^3.0.20",
+    "@gsa-sam/sam-styles": "^3.0.21",
     "@ngx-formly/core": "^6.2.1",
     "@ngx-formly/schematics": "^6.2.1",
     "@popperjs/core": "^2.11.8",