Magento 2 Checkout aria-invalid=”false” – How to Fix

checkoutknockoutjsmagento2

Im not sure if this is a bug, or it's me being silly. What I'm trying to achieve is in the checkout and on an input is the following:

aria-invalid="null"

However what I've noticed is on initial load of the checkout every input on the page loads the

aria-invalid="false"

This can be seen here:

The ticks indicate that the value is set to false, however there isn't any content inside of these items.

What I want is, the value to actually return null on first load, and then use the Ko.observable to say if it should be:

True – there is an error ( its empty )

False – everything is okay

I've had a nosey around and found that the file sits here:

/vendor/magento/module-ui/view/frontend/web/templates/form/element/input.html

And returns the following:

<input class="input-text" type="text" data-bind="
    value: value,
    valueUpdate: 'keyup',
    hasFocus: focused,
    attr: {
        name: inputName,
        placeholder: placeholder,
        'aria-describedby': getDescriptionId(),
        'aria-required': required,
        'aria-invalid': error() ? true : 'false',
        id: uid,
        disabled: disabled
    }" />

I've gotten to this stage and tried to find the even/function for " error() " but I've gotten lost in the rabbit hole.

If anyone has any advice on this, that'd be awesome.

Best Answer

I've no working M2 box that is at least 2.2 which is when I think aria-invalid was introduced so I can't look into it other than the codebase but this is what I presume it happening.

input.html gets called from vendor/magento/module-checkout/view/frontend/web/template/shipping-address/form.html:13
form.html is called from vendor/magento/module-checkout/view/frontend/web/js/view/shipping.js:61
shipping.js is called from vendor/magento/module-checkout/view/frontend/layout/checkout_index_index.xml:119
This leads to the shipping-address component - vendor/magento/module-checkout/view/frontend/layout/checkout_index_index.xml:92and this is where regions are defined.

That's a horrible maze and I got lost several times so I probably missed parts, my thinking is something along the way tells these inputs to use vendor/magento/module-ui/view/base/web/js/form/element/abstract.js but I haven't confirmed this.

I believe this is where the error function is called from.

There are functions like this that alter the state of this.error().

/**
     * Sets value observable to initialValue property.
     *
     * @returns {Abstract} Chainable.
     */
    reset: function () {
        this.value(this.initialValue);
        this.error(false);

        return this;
    },

Hope this points you in the right direction, I could be way off as it's so damned complex and over engineered but it's where I'd start looking. Warning that changing abstract.js will likely affect a lot of other functionality.

Good luck!

Related Solutions

Kaspersky False Positive in Magento 1.9 CE Onepage Checkout

I contacted Kaspersky and the issue was resolved. It was not a problem with Magento, just the URL of my domain was blacklisted.

Magento 2 – Checkout Page Refresh Issue

I think we don't need to reload the total summary. Because, when click the Next button, Magento will make a request(API) V1/carts/mine/shipping-information to re-calculate the totals and output the totals data to our templates.

So, if we want to check the fee, we should check the response total_segments

When click Next to the payment step, there is a request to set shipping information vendor/magento/module-checkout/view/frontend/web/js/view/shipping.js

             /**
             * Set shipping information handler
             */
            setShippingInformation: function () {
                if (this.validateShippingInformation()) {
                    setShippingInformationAction().done(
                        function () {
                            stepNavigator.next();
                        }
                    );
                }
            }

This request will re-calculate the totals.

In your case, in our html template, it should have a isDisplayed() function:

Kensium/DeliverySign/view/frontend/web/template/checkout/cart/totals/fee.html

<!-- ko if: isDisplayed() -->
<tr class="totals fee excl" data-bind="visible: canVisibleDeliverySignBlock">
    <th class="mark" colspan="1" scope="row" data-bind="text: title"></th>
    <td class="amount">
        <span class="price" data-bind="text: getValue()"></span>
    </td>
</tr>
<!-- /ko -->

Check isDisplayed() function:

Kensium/DeliverySign/view/frontend/web/js/view/checkout/cart/totals/fee.js

define([
    'ko',
    'uiComponent',
    'Magento_Checkout/js/model/quote',
    'Magento_Catalog/js/price-utils',
    'Magento_Checkout/js/model/totals'

], function (ko, Component, quote, priceUtils, totals) {
    'use strict';
    var show_hide_deliverysign_blockConfig = window.checkoutConfig.show_hide_deliverysign_block;
    var delivery_sign_amount = window.checkoutConfig.delivery_sign_amount;

    return Component.extend({

        totals: quote.getTotals(),
        canVisibleDeliverySignBlock: show_hide_deliverysign_blockConfig,
        getFormattedPrice: ko.observable(priceUtils.formatPrice(delivery_sign_amount, quote.getPriceFormat())),

        isDisplayed: function () {
            return this.getValue() != 0;
        },
        getValue: function() {
            var price = 0;
            if (this.totals() && totals.getSegment('fee')) {
                price = totals.getSegment('fee').value;
            }
            return this.getFormattedPrice(price);
        }
    });
});

This function will check the totals fee segment from the response.

I make a git pull here.

NOTE: Make sure your fee is calculated right way. On the payment step, please check the response has our fee.

Best Answer

Related Solutions

Kaspersky False Positive in Magento 1.9 CE Onepage Checkout

Magento 2 – Checkout Page Refresh Issue

Related Topic