ember-validated-form 6.1.1 → 6.2.0

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+# [6.2.0](https://github.com/adfinis/ember-validated-form/compare/v6.1.2...v6.2.0) (2023-02-23)
+
+
+### Bug Fixes
+
+* scroll error into view with nested key names ([#904](https://github.com/adfinis/ember-validated-form/issues/904)) ([5c192a5](https://github.com/adfinis/ember-validated-form/commit/5c192a5b00abf05d80f36d1fad8b67a79a36e43c))
+
+
+### Features
+
+* **a11y:** add aria invalid and describedby attributes on validation ([6e16a51](https://github.com/adfinis/ember-validated-form/commit/6e16a5122f134ca991205c03c0dd8628288e4b08)), closes [#48](https://github.com/adfinis/ember-validated-form/issues/48)
+
+## [6.1.2](https://github.com/adfinis/ember-validated-form/compare/v6.1.1...v6.1.2) (2022-09-20)
+
+
+### Bug Fixes
+
+* **label:** only show requiredness indicator if a label is given ([72c212d](https://github.com/adfinis/ember-validated-form/commit/72c212dc036c643dca43e1c22a7ec43384f70ab5))
+
 ## [6.1.1](https://github.com/adfinis/ember-validated-form/compare/v6.1.0...v6.1.1) (2022-09-20)
 
 

package/addon/components/validated-button.js

@@ -43,7 +43,7 @@ export default class ValidatedButtonComponent extends Component {
     if (macroCondition(getOwnConfig().scrollErrorIntoView)) {
       if (model.errors[0]?.key) {
         document
-          .querySelector(`[name=${model.errors[0].key}]`)
+          .querySelector(`[name=${model.errors[0].key.replaceAll(".", "\\.")}]`)
           ?.scrollIntoView({ behavior: "smooth" });
       }
     }

package/addon/components/validated-form.js

@@ -48,7 +48,9 @@ export default class ValidatedFormComponent extends Component {
       if (macroCondition(getOwnConfig().scrollErrorIntoView)) {
         if (model.errors[0]?.key) {
           document
-            .querySelector(`[name=${model.errors[0].key}]`)
+            .querySelector(
+              `[name=${model.errors[0].key.replaceAll(".", "\\.")}]`
+            )
             ?.scrollIntoView({ behavior: "smooth" });
         }
       }

package/addon/components/validated-input/error.hbs

@@ -1,9 +1,10 @@
 {{#if (macroCondition (macroGetOwnConfig "isUikit"))}}
-  <small class="uk-text-danger" ...attributes>
+  <small id={{@id}} class="uk-text-danger" ...attributes>
     {{yield}}{{this.errorString}}
   </small>
 {{else}}
   <span
+    id={{@id}}
     class={{if
       (macroCondition (macroGetOwnConfig "isBootstrap"))
       "d-block invalid-feedback"

package/addon/components/validated-input/hint.hbs

@@ -1,4 +1,5 @@
 <small
+  id={{@id}}
   class={{class-list
     (if (macroCondition (macroGetOwnConfig "isUikit")) "uk-text-muted")
     (if

package/addon/components/validated-input/label.hbs

@@ -3,5 +3,5 @@
   for={{@inputId}}
   ...attributes
 >
-  {{yield}}{{@label}}{{if @required " *"}}
+  {{yield}}{{@label}}{{if (and @label @required) " *"}}
 </label>

package/addon/components/validated-input/types/checkbox-group.hbs

@@ -14,6 +14,7 @@
         id="{{@inputId}}-{{i}}"
         disabled={{@disabled}}
         {{on "input" (fn this.onUpdate option.key)}}
+        ...attributes
       />
       {{option.label}}
     </label>
@@ -29,6 +30,7 @@
         id="{{@inputId}}-{{i}}"
         disabled={{@disabled}}
         {{on "input" (fn this.onUpdate option.key)}}
+        ...attributes
       />
       <label
         class="custom-control-label"

package/addon/components/validated-input/types/checkbox.hbs

@@ -10,6 +10,7 @@
       disabled={{@disabled}}
       checked={{@value}}
       {{on "input" this.onUpdate}}
+      ...attributes
     />
   </@labelComponent>
 {{else if (macroCondition (macroGetOwnConfig "isBootstrap"))}}
@@ -24,6 +25,7 @@
       disabled={{@disabled}}
       checked={{@value}}
       {{on "input" this.onUpdate}}
+      ...attributes
     />
     <@labelComponent class="custom-control-label" />
   </div>

package/addon/components/validated-input/types/radio-group.hbs

@@ -15,6 +15,7 @@
         id="{{@inputId}}-{{i}}"
         disabled={{@disabled}}
         {{on "input" (fn this.onUpdate option.key)}}
+        ...attributes
       />
       {{option.label}}
     </label>
@@ -31,6 +32,7 @@
         id="{{@inputId}}-{{i}}"
         disabled={{@disabled}}
         {{on "input" (fn this.onUpdate option.key)}}
+        ...attributes
       />
       <label
         class="custom-control-label"

package/addon/components/validated-input.hbs

@@ -21,11 +21,11 @@
   }}
 
   {{#if @hint}}
-    <this.hintComponent @hint={{@hint}} />
+    <this.hintComponent @hint={{@hint}} id={{this.hintId}} />
   {{/if}}
 
   {{#if (and this.showValidity this.errors)}}
-    <this.errorComponent @errors={{this.errors}} />
+    <this.errorComponent @errors={{this.errors}} id={{this.errorId}} />
   {{/if}}
 {{else}}
   <this.renderComponent
@@ -53,6 +53,7 @@
     @multiple={{@multiple}}
     @update={{this.update}}
     @setDirty={{this.setDirty}}
+    @submitted={{@submitted}}
     @labelComponent={{component
       (ensure-safe-component this.labelComponent)
       label=@label
@@ -63,12 +64,20 @@
     }}
     @hintComponent={{if
       @hint
-      (component (ensure-safe-component this.hintComponent) hint=@hint)
+      (component
+        (ensure-safe-component this.hintComponent) hint=@hint id=this.hintId
+      )
     }}
     @errorComponent={{if
       (and this.showValidity this.errors)
-      (component (ensure-safe-component this.errorComponent) errors=this.errors)
+      (component
+        (ensure-safe-component this.errorComponent)
+        errors=this.errors
+        id=this.errorId
+      )
     }}
+    aria-invalid={{if this.isInvalid "true"}}
+    aria-describedby={{if this.isInvalid this.errorId this.hintId}}
     ...attributes
   />
 {{/if}}

package/addon/components/validated-input.js

@@ -1,5 +1,6 @@
 import { action, set, get } from "@ember/object";
 import { guidFor } from "@ember/object/internals";
+import { isEmpty } from "@ember/utils";
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 
@@ -21,6 +22,14 @@ import passedOrDefault from "ember-validated-form/passed-or-default";
 export default class ValidatedInputComponent extends Component {
   inputId = guidFor(this);
 
+  get errorId() {
+    return `${this.inputId}-error`;
+  }
+
+  get hintId() {
+    return !isEmpty(this.args.hint) ? `${this.inputId}-hint` : null;
+  }
+
   @tracked dirty;
   @tracked required;
   @tracked type;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-validated-form",
-  "version": "6.1.1",
+  "version": "6.2.0",
   "description": "Easily create forms with client-side validations",
   "keywords": [
     "ember-addon",
@@ -20,25 +20,25 @@
   },
   "scripts": {
     "build": "ember build --environment=production",
-    "lint": "npm-run-all --aggregate-output --continue-on-error --parallel \"lint:!(fix)\"",
-    "lint:fix": "npm-run-all --aggregate-output --continue-on-error --parallel lint:*:fix",
+    "lint": "npm-run-all --print-name --aggregate-output --continue-on-error --parallel \"lint:!(fix)\"",
+    "lint:fix": "npm-run-all --print-name --aggregate-output --continue-on-error --parallel \"lint:*:fix\"",
     "lint:hbs": "ember-template-lint .",
     "lint:hbs:fix": "ember-template-lint . --fix",
     "lint:js": "eslint . --cache",
     "lint:js:fix": "eslint . --fix",
     "start": "ember serve",
-    "test": "npm-run-all lint test:*",
+    "test": "npm-run-all --print-name \"lint\" \"test:*\"",
     "test:ember": "ember test",
     "test:ember-compatibility": "ember try:each",
     "prepare": "husky install"
   },
   "dependencies": {
     "@embroider/macros": "^1.8.3",
-    "@embroider/util": "^1.8.3",
+    "@embroider/util": "^1.9.0",
     "@glimmer/component": "^1.1.2",
     "@glimmer/tracking": "^1.1.2",
-    "ember-changeset": "^4.1.1",
-    "ember-changeset-validations": "^4.1.0",
+    "ember-changeset": "^4.1.2",
+    "ember-changeset-validations": "^4.1.1",
     "ember-cli-babel": "^7.26.11",
     "ember-cli-htmlbars": "^6.1.1",
     "ember-truth-helpers": "^3.1.1"
@@ -53,8 +53,8 @@
     "@fortawesome/free-solid-svg-icons": "6.2.0",
     "babel-eslint": "10.1.0",
     "broccoli-asset-rev": "3.0.0",
-    "ember-auto-import": "2.4.2",
-    "ember-cli": "4.7.0",
+    "ember-auto-import": "2.4.3",
+    "ember-cli": "4.8.0",
     "ember-cli-addon-docs": "5.0.0",
     "ember-cli-dependency-checker": "3.3.1",
     "ember-cli-deploy": "1.0.2",
@@ -70,31 +70,31 @@
     "ember-disable-prototype-extensions": "1.1.3",
     "ember-flatpickr": "3.2.3",
     "ember-load-initializers": "2.1.2",
-    "ember-qunit": "5.1.5",
+    "ember-qunit": "6.0.0",
     "ember-resolver": "8.0.3",
-    "ember-source": "4.7.0",
+    "ember-source": "4.8.0",
     "ember-source-channel-url": "3.0.0",
-    "ember-template-lint": "4.14.0",
+    "ember-template-lint": "4.17.0",
     "ember-template-lint-plugin-prettier": "4.0.0",
     "ember-try": "2.0.0",
     "eslint": "7.32.0",
     "eslint-config-prettier": "8.5.0",
-    "eslint-plugin-ember": "11.0.6",
+    "eslint-plugin-ember": "11.2.0",
     "eslint-plugin-import": "2.26.0",
     "eslint-plugin-node": "11.1.0",
     "eslint-plugin-prettier": "4.2.1",
     "eslint-plugin-qunit": "7.3.1",
-    "husky": "8.0.1",
+    "husky": "8.0.3",
     "lint-staged": "13.0.3",
     "loader.js": "4.7.0",
     "npm-run-all": "4.1.5",
     "prettier": "2.7.1",
-    "qunit": "2.19.1",
+    "qunit": "2.19.3",
     "qunit-dom": "2.0.0",
     "webpack": "5.74.0"
   },
   "engines": {
-    "node": "14.* || >= 16"
+    "node": "14.* || 16.* || >= 18"
   },
   "ember": {
     "edition": "octane"