ENGCOM-9188: Fix accessibility errors on cart and checkout pages #33851

Author: sidolov

app/code/Magento/Checkout/Test/Mftf/Section/StorefrontProductCartGiftOptionSection.xml

@@ -12,7 +12,7 @@
         <element name="giftOptions" type="button" selector=".action.action-gift"/>
         <element name="fieldTo" type="input" selector=".gift-options-content .field-to input"/>
         <element name="fieldFrom" type="input" selector=".gift-options-content .field-from input"/>
-        <element name="message" type="textarea" selector="#gift-message-whole-message"/>
+        <element name="message" type="textarea" selector=".gift-options-content .field.text .input-text"/>
         <element name="update" type="button" selector=".action-update"/>
         <element name="cancel" type="button" selector=".action-cancel"/>
     </section>

app/code/Magento/Checkout/view/frontend/layout/checkout_index_index.xml

@@ -445,5 +445,6 @@
             </block>
         </referenceContainer>
         <referenceContainer name="page.messages" remove="true"/>
+        <referenceBlock name="authentication-popup" remove="true"/>
     </body>
 </page>

app/code/Magento/GiftMessage/Test/Mftf/Section/StorefrontCheckoutCartGiftMessageSection.xml

@@ -7,6 +7,6 @@
 -->
 <sections xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:mftf:Page/etc/SectionObject.xsd">
     <section name="StorefrontCheckoutCartGiftMessageSection">
-        <element name="giftItemMessage" type="textarea" selector="tbody.cart:nth-of-type({{blockNumber}}) #gift-message-whole-message" parameterized="true"/>
+        <element name="giftItemMessage" type="textarea" selector="tbody.cart:nth-of-type({{blockNumber}}) .gift-message .field.text .input-text" parameterized="true"/>
     </section>
-</sections>
+</sections>

app/code/Magento/GiftMessage/view/frontend/web/template/gift-message-form.html

@@ -33,14 +33,13 @@
                 </div>
             </div>
             <div class="field text">
-                <label for="gift-message-whole-message" class="label">
+                <label data-bind="attr: {for: 'gift-message-whole-message-' + index }" class="label">
                     <span data-bind="i18n: 'Message:'"></span>
                 </label>
                 <div class="control">
-                    <textarea id="gift-message-whole-message"
-                              class="input-text"
+                    <textarea class="input-text"
                               rows="5" cols="10"
-                              data-bind="value: getObservable('message')"></textarea>
+                              data-bind="value: getObservable('message'), attr: { id: 'gift-message-whole-message-' + index }"></textarea>
                 </div>
             </div>
         </fieldset>

app/code/Magento/Ui/view/base/web/js/form/element/abstract.js

@@ -131,6 +131,7 @@ define([
                 uid: uid,
                 noticeId: 'notice-' + uid,
                 errorId: 'error-' + uid,
+                tooltipId: 'tooltip-' + uid,
                 inputName: utils.serializeName(name.join('.')),
                 valueUpdate: valueUpdate
             });

app/code/Magento/Ui/view/frontend/web/templates/form/element/date.html

@@ -8,6 +8,7 @@
     hasFocus: focused,
     datepicker: { storage: value, options: options },
     attr: {
+        id: uid,
         value: value,
         name: inputName,
         placeholder: placeholder,

app/code/Magento/Ui/view/frontend/web/templates/form/element/helper/tooltip.html

@@ -13,15 +13,16 @@
        data-bind="attr: {href: tooltip.link}, mageInit: {'dropdown':{'activeClass': '_active'}}"></a>
      <!-- /ko -->
 
-     <span id="tooltip-label" class="label"><!-- ko i18n: 'Tooltip' --><!-- /ko --></span>
+     <span class="label" data-bind="attr: { id: $data.tooltipId ? $data.tooltipId : 'tooltip-label' }"><!-- ko i18n: 'Tooltip' --><!-- /ko --></span>
      <!-- ko if: (!tooltip.link)-->
          <span
-             id="tooltip"
              class="field-tooltip-action action-help"
              tabindex="0"
              data-toggle="dropdown"
-             data-bind="mageInit: {'dropdown':{'activeClass': '_active', 'parent': '.field-tooltip.toggle'}}"
-             aria-labelledby="tooltip-label"
+             data-bind="
+                mageInit: {'dropdown':{'activeClass': '_active', 'parent': '.field-tooltip.toggle'}},
+                attr: { 'aria-labelledby': $data.tooltipId ? $data.tooltipId : 'tooltip-label' }
+            "
          >
          </span>
      <!-- /ko -->