MAGETWO-39999: Hints behave not user-friendly on Storefront

- Better accessibility & QA

Author: Oleg Zinoviev

app/code/Magento/Authorizenet/view/frontend/web/template/payment/authorizenet-directpost.html

@@ -54,14 +54,14 @@
                     <button data-role="review-save"
                             type="submit"
                             data-bind="
-                            attr: {title: $t('Place order')},
+                            attr: {title: $t('Place Order')},
                             enable: (getCode() == isChecked()),
                             click: placeOrder,
                             css: {disabled: !isPlaceOrderActionAllowed()}
                             "
                             class="action primary checkout"
                             disabled>
-                        <span data-bind="text: $t('Place order')"></span>
+                        <span data-bind="text: $t('Place Order')"></span>
                     </button>
                 </div>
             </div>

app/code/Magento/Payment/view/frontend/web/template/payment/cc-form.html

@@ -99,12 +99,20 @@
             <span><!-- ko text: $t('Card Verification Number')--><!-- /ko --></span>
         </label>
         <div class="control _with-tooltip">
-            <input type="number" autocomplete="off" class="input-text cvv" name="payment[cc_cid]" value=""
-                   data-bind="attr: {id: getCode() + '_cc_cid', title: $t('Card Verification Number'), 'data-container': getCode() + '-cc-cvv', 'data-validate': JSON.stringify({'required-number':true, 'validate-card-cvv':'#' + getCode() + '_cc_type'})},
-                             enable: isActive($parents),
-                             value: creditCardVerificationNumber"/>
+            <input type="number"
+                   autocomplete="off"
+                   class="input-text cvv"
+                   name="payment[cc_cid]"
+                   value=""
+                   data-bind="attr: {id: getCode() + '_cc_cid',
+                        title: $t('Card Verification Number'),
+                        'data-container': getCode() + '-cc-cvv',
+                        'data-validate': JSON.stringify({'required-number':true, 'validate-card-cvv':'#' + getCode() + '_cc_type'})},
+                        enable: isActive($parents),
+                        value: creditCardVerificationNumber" />
             <div class="field-tooltip toggle">
                 <span class="field-tooltip-action action-cvv"
+                      tabindex="0"
                       data-toggle="dropdown"
                       data-bind="attr: {title: $t('What is this?')}, mageInit: {'dropdown':{'activeClass': '_active'}}">
                     <span><!-- ko text: $t('What is this?')--><!-- /ko --></span>

app/code/Magento/Payment/view/frontend/web/template/payment/iframe.html

@@ -29,9 +29,9 @@
 <div class="actions-toolbar" id="review-buttons-container">
     <div class="primary">
         <button data-role="review-save" type="submit"
-                data-bind="attr: {title: $t('Place order')}"
+                data-bind="attr: {title: $t('Place Order')}"
                 class="button action primary checkout">
-            <span data-bind="text: $t('Place order')"></span>
+            <span data-bind="text: $t('Place Order')"></span>
         </button>
         <button type="submit" id="originalPlaceOrder" class="hidden"
                 data-bind="click: originalPlaceOrder($parents[1])"></button>

app/code/Magento/Paypal/view/frontend/web/template/payment/payflowpro-form.html

@@ -54,14 +54,14 @@
                     <button data-role="review-save"
                             type="submit"
                             data-bind="
-                            attr: {title: $t('Place order')},
+                            attr: {title: $t('Place Order')},
                             enable: (getCode() == isChecked()),
                             click: placeOrder,
                             css: {disabled: !isPlaceOrderActionAllowed()}
                             "
                             class="action primary checkout"
                             disabled>
-                        <span data-bind="text: $t('Place order')"></span>
+                        <span data-bind="text: $t('Place Order')"></span>
                     </button>
                 </div>
             </div>

app/code/Magento/Shipping/view/frontend/web/template/checkout/shipping/shipping-policy.html

@@ -7,6 +7,7 @@
 <div class="shipping-policy-block field-tooltip"
      data-bind="visible: config.isEnabled">
     <span class="field-tooltip-action"
+          tabindex="0"
           data-toggle="dropdown"
           data-bind="mageInit: {'dropdown':{'activeClass': '_active'}}">
         <!-- ko text: $t('See our Shipping Policy') --><!-- /ko -->

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

@@ -5,10 +5,21 @@
  */
 -->
  <div class="field-tooltip toggle">
+
+    <!-- ko if: (tooltip.link)-->
     <a class="field-tooltip-action action-help"
        target="_blank"
        data-toggle="dropdown"
        data-bind="attr: {href: tooltip.link}, mageInit: {'dropdown':{'activeClass': '_active'}}"></a>
+     <!-- /ko -->
+
+     <!-- ko if: (!tooltip.link)-->
+     <span class="field-tooltip-action action-help"
+        tabindex="0"
+        data-toggle="dropdown"
+        data-bind="mageInit: {'dropdown':{'activeClass': '_active'}}"></span>
+     <!-- /ko -->
+
     <div class="field-tooltip-content"
          data-target="dropdown">
         <!-- ko text: tooltip.description --><!-- /ko -->

app/design/frontend/Magento/blank/Magento_Checkout/web/css/source/module/checkout/_tooltip.less

@@ -37,14 +37,11 @@
 & when (@media-common = true) {
 
     .field-tooltip {
+        cursor: pointer;
         position: absolute;
         right: 0;
         top: 1px;
 
-        &:hover {
-            cursor: pointer;
-        }
-
         &._active {
             .css(z-index, @checkout-tooltip__hover__z-index);
 
@@ -68,9 +65,15 @@
                 @_icon-font-color-active: false
             );
 
-            &._active {
-                &:before {
-                    .css(color, @checkout-tooltip-icon__hover__color);
+            &:focus {
+                ._keyfocus & {
+                    .css(z-index, @checkout-tooltip__hover__z-index);
+                    + .field-tooltip-content {
+                        display: block;
+                    }
+                    &:before {
+                        .css(color, @checkout-tooltip-icon__hover__color);
+                    }
                 }
             }
         }