@projectcaluma/ember-form 14.4.2 → 14.4.4

package/addon/components/cf-field/input/action-button.hbs

@@ -14,7 +14,7 @@
           <UkIcon @icon="warning" class="uk-margin-small-right" />
           {{t "caluma.form.validation.error"}}
         </div>
-        <ul class="uk-list uk-list-bullet">
+        <ul class="uk-list uk-list-disc">
           {{#each this.invalidFields as |invalidField|}}
             <li>
               <LinkTo

package/addon/components/cf-field/input/date.hbs

@@ -26,5 +26,7 @@
     @onClose={{this.onClose}}
     @minDate={{@minDate}}
     @maxDate={{@maxDate}}
+    aria-labelledby={{@field.labelId}}
+    ...attributes
   />
 </div>

package/addon/components/cf-field/input/date.js

@@ -34,6 +34,28 @@ export default class CfFieldInputDateComponent extends Component {
   @action
   onReady(_selectedDates, _dateStr, flatpickrRef) {
     this.flatpickrRef = flatpickrRef;
+
+    // Flatpickr generates an alternative input field (altInput) that does not
+    // copy over all attributes from the original input field. This fails in
+    // accessibility checks when using aria attributes to account for a11y
+    // compatibility.
+    //
+    // There's an issue (https://github.com/flatpickr/flatpickr/issues/1906)
+    // about that and also an open PR
+    // (https://github.com/flatpickr/flatpickr/pull/2821) to fix it. However,
+    // flatpickr has not seen a new commit since 2022 and seems to be
+    // deprecated.
+    //
+    // In order to not have to search for a new datepicker solution, we fix the
+    // a11y issue ourselves by copying over all aria-* attributes to the alt
+    // input.
+    const { input, altInput } = flatpickrRef;
+
+    input
+      .getAttributeNames()
+      .filter((attr) => attr.startsWith("aria-"))
+      .filter((attr) => !altInput.hasAttribute(attr))
+      .forEach((attr) => altInput.setAttribute(attr, input.getAttribute(attr)));
   }
 
   @action

package/addon/components/cf-field/input/powerselect.hbs

@@ -14,6 +14,7 @@
   @searchPlaceholder={{t "caluma.form.power-select.search-placeholder"}}
   @noMatchesMessage={{t "caluma.form.power-select.search-empty"}}
   @onChange={{this.change}}
+  aria-labelledby={{@field.labelId}}
   as |option|
 >
   {{#if (and option.disabled (not @disabled))}}

package/addon/components/cf-field/label.hbs

@@ -1,4 +1,9 @@
-<label class="uk-form-label" for={{@field.pk}} ...attributes>
+<label
+  class="uk-form-label"
+  for={{@field.pk}}
+  id={{@field.labelId}}
+  ...attributes
+>
   <span class="uk-text-bold">
     {{@field.question.raw.label}}
   </span>

package/addon/components/cf-field.js

@@ -105,6 +105,12 @@ export default class CfFieldComponent extends Component {
 
     yield this.args.field.validate.perform();
 
+    if (this.args.field.isInvalid) {
+      // If the frontend validation fails, we don't need to try saving the value
+      // to the backend as the backend will throw an error as well.
+      return;
+    }
+
     return yield this.args.field.save.unlinked().perform();
   }
 

package/addon/lib/field.js

@@ -177,6 +177,15 @@ export default class Field extends Base {
     return `${this.document.pk}:Question:${this.raw.question.slug}`;
   }
 
+  /**
+   * The element ID used by the label component.
+   *
+   * @property {String} labelId
+   */
+  get labelId() {
+    return `${this.pk}:label`;
+  }
+
   /**
    * Whether the field is valid.
    *
@@ -627,6 +636,12 @@ export default class Field extends Base {
         this.answer.pushIntoStore();
       }
 
+      if (this._errors.filter(({ type }) => type === "format").length) {
+        // If we previously had a format validator error but now the request
+        // succeeded, we need to remove said error again.
+        this._errors = this._errors.filter(({ type }) => type !== "format");
+      }
+
       return response;
     } catch (e) {
       const validationError = e.errors.find(
@@ -643,7 +658,6 @@ export default class Field extends Base {
           },
         ];
       } else {
-        this._errors = [];
         throw e;
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@projectcaluma/ember-form",
-  "version": "14.4.2",
+  "version": "14.4.4",
   "description": "Ember addon for rendering Caluma forms.",
   "keywords": [
     "ember-addon"
@@ -41,7 +41,7 @@
     "luxon": "^3.5.0",
     "reactiveweb": "^1.3.0",
     "tracked-toolbox": "^2.0.0",
-    "@projectcaluma/ember-core": "^14.4.2"
+    "@projectcaluma/ember-core": "^14.4.4"
   },
   "devDependencies": {
     "@ember/optional-features": "2.2.0",
@@ -59,7 +59,7 @@
     "ember-cli-sri": "2.1.1",
     "ember-cli-terser": "4.0.2",
     "ember-load-initializers": "3.0.1",
-    "ember-qunit": "9.0.3",
+    "ember-qunit": "9.0.4",
     "ember-resolver": "13.1.1",
     "ember-source": "6.1.0",
     "ember-source-channel-url": "3.0.0",
@@ -68,16 +68,16 @@
     "miragejs": "0.1.48",
     "qunit": "2.24.1",
     "qunit-dom": "3.5.0",
-    "sass": "1.92.1",
-    "uikit": "3.23.12",
+    "sass": "1.93.2",
+    "uikit": "3.23.13",
     "uuid": "13.0.0",
     "webpack": "5.101.3",
-    "@projectcaluma/ember-testing": "14.4.2",
-    "@projectcaluma/ember-workflow": "14.4.2"
+    "@projectcaluma/ember-workflow": "14.4.4",
+    "@projectcaluma/ember-testing": "14.4.4"
   },
   "peerDependencies": {
     "ember-source": ">= 4.0.0",
-    "@projectcaluma/ember-workflow": "^14.4.2"
+    "@projectcaluma/ember-workflow": "^14.4.4"
   },
   "dependenciesMeta": {
     "@projectcaluma/ember-core": {