feat(checkout): CHECKOUT-7125 Adding additional aria attributes to coupon code and gift certificate buttons on the cart page

[bc-NikitaPuzanenko]

What?

Adding aria-hidden attributes to coupon code and gift certificate containers on the cart page. Also adding aria labels to coupon code and gift certificate apply buttons on the cart page.

Requirements

• CHANGELOG.md entry added (required for code changes only)

Screenshots (if appropriate)

After changes:

[yurytut1993]

LGTM 👍

[mattcoy-arcticleaf]

aria-hidden should not be added to elements that are displayed none;

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-hidden

[mattcoy-arcticleaf]

Also, aria-labels should contain the visible label. I would recommend not using aria-labels here and instead change the visible text.

[yurytut1993]

good points @mattcoy-arcticleaf
we will discuss and provide updates for that
thanks

[bc-yevhenii-buliuk]

Also, aria-labels should contain the visible label. I would recommend not using aria-labels here and instead change the visible text.

@mattcoy-arcticleaf since we don't have suitable visible content on the UI to refer to, we have to use the aria-label attribute to give the element an accessible name.

[mattcoy-arcticleaf]

@bc-yevhenii-buliuk , the submit input tag can be changed to a button tag and then you can place 1 or more spans inside.

[bc-yevhenii-buliuk]

@mattcoy-arcticleaf yes, we can change the submit input to the button tag and add a span inside, but it will change the UI, the content inside the span will stretch the button width, which is not intended by the design.
For example, now the submit input is called
| Apply |
and by changing it to a button and adding a span inside, it can look like
| Apply gift certificate |