Merge pull request #640 from magento-webdev/PR

[WebDev] Accessibility Improvements + Bufixes
magento · Oct 1, 2015 · d2dc4bb · d2dc4bb
2 parents 26be84a + cb804b8
commit d2dc4bb
Show file tree

Hide file tree

Showing 28 changed files with 133 additions and 67 deletions.
diff --git a/app/code/Magento/Backend/Block/Store/Switcher.php b/app/code/Magento/Backend/Block/Store/Switcher.php
@@ -548,11 +548,11 @@ public function getHintHtml()
         $html = '';
         $url = $this->getHintUrl();
         if ($url) {
-            $html = '<div class="tooltip">' . '<span class="help"><a' . ' href="' . $this->escapeUrl(
+            $html = '<div class="admin__field-tooltip tooltip">' . '<a' . ' href="' . $this->escapeUrl(
                 $url
             ) . '"' . ' onclick="this.target=\'_blank\'"' . ' title="' . __(
                 'What is this?'
-            ) . '"' . ' class="link-store-scope"><span>' . __(
+            ) . '"' . ' class="admin__field-tooltip-action action-help"><span>' . __(
                 'What is this?'
             ) . '</span></a></span>' . ' </div>';
         }

diff --git a/...code/Magento/Backend/view/adminhtml/templates/store/switcher/form/renderer/fieldset.phtml b/...code/Magento/Backend/view/adminhtml/templates/store/switcher/form/renderer/fieldset.phtml
@@ -13,13 +13,13 @@
 <?php endif; ?>
 
 <?php if (!$_element->getNoContainer()): ?>
-    <fieldset class="fieldset <?php /* @escapeNotVerified */ echo $_element->getClass() ?>" id="<?php echo $_element->getHtmlId() ?>">
+    <fieldset class="admin__fieldset fieldset <?php /* @escapeNotVerified */ echo $_element->getClass() ?>" id="<?php echo $_element->getHtmlId() ?>">
 <?php endif; ?>
 
     <?php if ($_element->getLegend()): ?>
-        <legend class="legend">
+        <legend class="admin__legend legend">
             <span><?php /* @escapeNotVerified */ echo $_element->getLegend() ?></span>
-        </legend>
+        </legend><br/>
         <?php /* @escapeNotVerified */ echo $_element->getHeaderBar() ?>
     <?php endif; ?>
         <?php echo $block->getHintHtml() ?>

diff --git a/...ento/Backend/view/adminhtml/templates/store/switcher/form/renderer/fieldset/element.phtml b/...ento/Backend/view/adminhtml/templates/store/switcher/form/renderer/fieldset/element.phtml
@@ -14,10 +14,10 @@ $note = $element->getNote() ? '<div class="note">' . $element->getNote() . '</di
 $elementBeforeLabel = $element->getExtType() == 'checkbox' || $element->getExtType() == 'radio';
 $addOn = $element->getBeforeElementHtml() || $element->getAfterElementHtml();
 $fieldId = ($element->getHtmlContainerId()) ? ' id="' . $element->getHtmlContainerId() . '"' : '';
-$fieldClass = "field field-{$element->getId()} {$element->getCssClass()}";
+$fieldClass = "admin__field field field-{$element->getId()} {$element->getCssClass()}";
 $fieldClass .= ($elementBeforeLabel) ? ' choice' : '';
 $fieldClass .= ($addOn) ? ' with-addon' : '';
-$fieldClass .= ($element->getRequired()) ? ' required' : '';
+$fieldClass .= ($element->getRequired()) ? ' _required' : '';
 $fieldClass .= ($note) ? ' with-note' : '';
 
 $fieldAttributes = $fieldId . ' class="' . $fieldClass . '" '
@@ -35,16 +35,16 @@ $fieldAttributes = $fieldId . ' class="' . $fieldClass . '" '
             <?php /* @escapeNotVerified */ echo $note ?>
         <?php else: ?>
             <?php echo $element->getLabelHtml() ?>
-            <div class="control">
+            <div class="admin__field-control control">
                 <?php /* @escapeNotVerified */ echo($addOn) ? '<div class="addon">' . $element->getElementHtml() . '</div>' : $element->getElementHtml(); ?>
+                <?php echo $block->getHintHtml() ?>
                 <?php /* @escapeNotVerified */ echo $note ?>
             </div>
         <?php endif; ?>
         <?php if ($element->getScopeLabel()): ?>
             <div class="field-service" value-scope="<?php /* @escapeNotVerified */ echo $element->getScopeLabel()?>">
             </div>
         <?php endif;?>
-        <?php echo $block->getHintHtml() ?>
     </div>
     <?php endif; ?>
 <?php endif; ?>
diff --git a/app/code/Magento/Backend/view/adminhtml/templates/widget/form/renderer/fieldset.phtml b/app/code/Magento/Backend/view/adminhtml/templates/widget/form/renderer/fieldset.phtml
@@ -57,7 +57,7 @@ if ($isField) {
     <?php if (!$element->getNoContainer()): ?>
         <fieldset class="<?php /* @escapeNotVerified */ echo $cssClass ?>" id="<?php /* @escapeNotVerified */ echo $id ?>">
         <?php if ($element->getLegend() && !$isWrapped): ?>
-            <legend class="<?php /* @escapeNotVerified */ echo $isField ? 'label' : 'legend'?>">
+            <legend class="<?php /* @escapeNotVerified */ echo $isField ? 'label admin__field-label' : 'admin__legend legend'?>">
                 <span><?php /* @escapeNotVerified */ echo $element->getLegend() ?></span>
             </legend><br />
         <?php endif; ?>

diff --git a/app/code/Magento/Catalog/view/frontend/templates/product/view/addto.phtml b/app/code/Magento/Catalog/view/frontend/templates/product/view/addto.phtml
@@ -18,13 +18,11 @@ $compareHelper = $this->helper('Magento\Catalog\Helper\Product\Compare');
     <?php if ($this->helper('Magento\Wishlist\Helper\Data')->isAllow()) : ?>
         <a href="#"
             class="action towishlist"
-            title="<?php /* @escapeNotVerified */ echo __('Add to Wish List') ?>"
             data-post='<?php /* @escapeNotVerified */ echo $_wishlistSubmitParams; ?>'
             data-action="add-to-wishlist"><span><?php /* @escapeNotVerified */ echo __('Add to Wish List') ?></span></a>
     <?php endif; ?>
     <a href="#" data-post='<?php /* @escapeNotVerified */ echo $compareHelper->getPostDataParams($_product);?>'
         data-role="add-to-links"
-        title="<?php /* @escapeNotVerified */ echo __('Add to Compare') ?>"
         class="action tocompare"><span><?php /* @escapeNotVerified */ echo __('Add to Compare') ?></span></a>
 </div>
 <script type="text/x-magento-init">

diff --git a/app/code/Magento/Catalog/view/frontend/templates/product/view/addtocart.phtml b/app/code/Magento/Catalog/view/frontend/templates/product/view/addtocart.phtml
@@ -12,7 +12,7 @@
 <?php $buttonTitle = __('Add to Cart'); ?>
 <?php if ($_product->isSaleable()): ?>
 <div class="box-tocart">
-    <fieldset class="fieldset">
+    <div class="fieldset">
         <?php if ($block->shouldRenderQuantity()): ?>
         <div class="field qty">
             <label class="label" for="qty"><span><?php /* @escapeNotVerified */ echo __('Qty') ?></span></label>
@@ -37,7 +37,7 @@
             </button>
             <?php echo $block->getChildHtml('', true) ?>
         </div>
-    </fieldset>
+    </div>
 </div>
 <?php endif; ?>
 <?php if ($block->isRedirectToCartEnabled()) : ?>

diff --git a/app/code/Magento/Catalog/view/frontend/templates/product/view/mailto.phtml b/app/code/Magento/Catalog/view/frontend/templates/product/view/mailto.phtml
@@ -9,7 +9,6 @@
 ?>
 <?php $_product = $block->getProduct() ?>
 <?php if ($block->canEmailToFriend()): ?>
-    <a title="<?php /* @escapeNotVerified */ echo __('Email') ?>"
-       href="<?php /* @escapeNotVerified */ echo $this->helper('Magento\Catalog\Helper\Product')->getEmailToFriendUrl($_product) ?>"
+    <a href="<?php /* @escapeNotVerified */ echo $this->helper('Magento\Catalog\Helper\Product')->getEmailToFriendUrl($_product) ?>"
        class="action mailto friend"><span><?php /* @escapeNotVerified */ echo __('Email') ?></span></a>
 <?php endif; ?>
diff --git a/app/code/Magento/Catalog/view/frontend/templates/product/view/options/wrapper.phtml b/app/code/Magento/Catalog/view/frontend/templates/product/view/options/wrapper.phtml
@@ -11,7 +11,7 @@ if ($block->hasRequiredOptions()) {
 }
 ?>
 <div class="product-options-wrapper" id="product-options-wrapper"<?php /* @escapeNotVerified */ echo $required; ?>>
-    <fieldset class="fieldset" tabindex="0">
+    <div class="fieldset" tabindex="0">
         <?php echo $block->getChildHtml('', true);?>
-    </fieldset>
+    </div>
 </div>
diff --git a/app/code/Magento/Checkout/view/frontend/templates/success.phtml b/app/code/Magento/Checkout/view/frontend/templates/success.phtml
@@ -22,7 +22,7 @@
 
     <div class="actions-toolbar">
         <div class="primary">
-            <a class="action primary continue" title="<?php /* @escapeNotVerified */ echo __('Continue Shopping') ?>" href="<?php /* @escapeNotVerified */ echo $block->getUrl() ?>"><span><?php /* @escapeNotVerified */ echo __('Continue Shopping') ?></span></a>
+            <a class="action primary continue" href="<?php /* @escapeNotVerified */ echo $block->getUrl() ?>"><span><?php /* @escapeNotVerified */ echo __('Continue Shopping') ?></span></a>
         </div>
     </div>
 </div>
diff --git a/app/code/Magento/Checkout/view/frontend/web/js/region-updater.js b/app/code/Magento/Checkout/view/frontend/web/js/region-updater.js
@@ -15,7 +15,7 @@ define([
     $.widget('mage.regionUpdater', {
         options: {
             regionTemplate:
-                '<option value="<%- data.value %>" title="<%- data.title %>" <% if (data.isSelected) { %>selected="selected"<% } %>>' +
+                '<option value="<%- data.value %>" <% if (data.isSelected) { %>selected="selected"<% } %>>' +
                     '<%- data.title %>' +
                 '</option>',
             isRegionRequired: true,

diff --git a/app/code/Magento/Checkout/view/frontend/web/template/minicart/item/default.html b/app/code/Magento/Checkout/view/frontend/web/template/minicart/item/default.html
@@ -24,7 +24,7 @@
         <div class="product-item-details">
             <strong class="product-item-name">
                 <!-- ko if: product_has_url -->
-                <a data-bind="attr: {href: product_url, title: product_name}, text: product_name"></a>
+                <a data-bind="attr: {href: product_url}, text: product_name"></a>
                 <!-- /ko -->
                 <!-- ko ifnot: product_has_url -->
                     <!-- ko text: product_name --><!-- /ko -->
@@ -69,7 +69,8 @@
                 <!-- /ko -->
 
                 <div class="details-qty qty">
-                    <span class="label" data-bind="i18n: 'Qty'"></span>
+                    <label class="label" data-bind="i18n: 'Qty', attr: {
+                           for: 'cart-item-'+item_id+'-qty'}"></label>
                     <input data-bind="attr: {
                            id: 'cart-item-'+item_id+'-qty',
                            'data-cart-item': item_id,

diff --git a/app/code/Magento/Checkout/view/frontend/web/template/payment.html b/app/code/Magento/Checkout/view/frontend/web/template/payment.html
@@ -19,6 +19,9 @@
         <form id="co-payment-form" class="form payments" novalidate="novalidate">
             <input data-bind='attr: {value: getFormKey()}' type="hidden" name="form_key"/>
             <fieldset class="fieldset">
+                <legend class="legend">
+                    <span data-bind="i18n: 'Payment Information'"></span>
+                </legend><br />
                 <!-- ko foreach: getRegion('beforeMethods') -->
                     <!-- ko template: getTemplate() --><!-- /ko -->
                 <!-- /ko -->

diff --git a/app/code/Magento/Checkout/view/frontend/web/template/shipping-address/form.html b/app/code/Magento/Checkout/view/frontend/web/template/shipping-address/form.html
@@ -8,7 +8,7 @@
     <!-- ko foreach: getRegion('before-fields') -->
     <!-- ko template: getTemplate() --><!-- /ko -->
     <!--/ko-->
-    <fieldset id="shipping-new-address-form" class="fieldset address">
+    <div id="shipping-new-address-form" class="fieldset address">
         <!-- ko foreach: getRegion('additional-fieldsets') -->
         <!-- ko template: getTemplate() --><!-- /ko -->
         <!--/ko-->
@@ -20,5 +20,5 @@
             </label>
         </div>
         <!-- /ko -->
-    </fieldset>
+    </div>
 </form>
diff --git a/app/code/Magento/Checkout/view/frontend/web/template/shipping.html b/app/code/Magento/Checkout/view/frontend/web/template/shipping.html
@@ -68,7 +68,7 @@
                     <table class="table-checkout-shipping-method">
                         <thead>
                             <tr class="row">
-                                <th class="col">&nbsp;</th>
+                                <th class="col col-method" data-bind="i18n: 'Select Method'"></th>
                                 <th class="col col-price" data-bind="i18n: 'Price'"></th>
                                 <th class="col col-method" data-bind="i18n: 'Method Title'"></th>
                                 <th class="col col-carrier" data-bind="i18n: 'Carrier Title'"></th>
@@ -78,20 +78,28 @@
 
                         <!--ko foreach: { data: rates(), as: 'method'}-->
                         <tr class="row" data-bind="click: $parent.selectShippingMethod">
-                            <td class="col">
+                            <td class="col col-method">
                                 <!-- ko ifnot: method.error_message -->
                                 <!-- ko if: $parent.rates().length == 1 -->
                                 <input name="shipping_method"
                                        class="radio"
                                        type="radio"
-                                       data-bind="attr: {checked: $parent.rates().length == 1, 'value' : method.carrier_code + '_' + method.method_code, 'id': 's_method_' + method.method_code}" />
+                                       data-bind="attr: {
+                                                    checked: $parent.rates().length == 1,
+                                                    'value' : method.carrier_code + '_' + method.method_code,
+                                                    'id': 's_method_' + method.method_code,
+                                                    'aria-labelledby': 'label_method_' + method.method_code + '_' + method.carrier_code + ' ' + 'label_carrier_' + method.method_code + '_' + method.carrier_code
+                                                 }" />
                                 <!-- /ko -->
                                 <!--ko ifnot: ($parent.rates().length == 1)-->
                                 <input name="shipping_method" type="radio"
                                        data-bind="
                                                 value: method.carrier_code + '_' + method.method_code,
                                                 checked: $parent.isSelected,
-                                                attr: {'id': 's_method_' + method.carrier_code + '_' + method.method_code},
+                                                attr: {
+                                                    'id': 's_method_' + method.carrier_code + '_' + method.method_code,
+                                                    'aria-labelledby': 'label_method_' + method.method_code + '_' + method.carrier_code + ' ' + 'label_carrier_' + method.method_code + '_' + method.carrier_code
+                                                },
                                                 click: $parent.selectShippingMethod"
                                        class="radio"/>
                                 <!--/ko-->
@@ -102,8 +110,12 @@
                                 <!-- ko template: getTemplate() --><!-- /ko -->
                                 <!-- /ko -->
                             </td>
-                            <td class="col col-method" data-bind="i18n: method.method_title"></td>
-                            <td class="col col-carrier" data-bind="i18n: method.carrier_title"></td>
+
+                            <td class="col col-method"
+                                    data-bind="i18n: method.method_title, attr: {'id': 'label_method_' + method.method_code + '_' + method.carrier_code}"></td>
+
+                            <td class="col col-carrier"
+                                    data-bind="i18n: method.carrier_title, attr: {'id': 'label_carrier_' + method.method_code + '_' + method.carrier_code}"></td>
                         </tr>
 
                         <!-- ko if:  method.error_message -->

diff --git a/app/code/Magento/Customer/view/frontend/web/js/view/authentication-popup.js b/app/code/Magento/Customer/view/frontend/web/js/view/authentication-popup.js
@@ -39,7 +39,9 @@ define(
 
             /** Init popup login window */
             setModalElement: function (element) {
-                authenticationPopup.createPopUp(element);
+                if (authenticationPopup.modalWindow == null) {
+                    authenticationPopup.createPopUp(element);
+                }
             },
 
             /** Is login form enabled for current customer */

diff --git a/app/code/Magento/Multishipping/view/frontend/templates/checkout/link.phtml b/app/code/Magento/Multishipping/view/frontend/templates/checkout/link.phtml
@@ -7,4 +7,4 @@
 // @codingStandardsIgnoreFile
 
 ?>
-<a class="action multicheckout" href="<?php /* @escapeNotVerified */ echo $block->getCheckoutUrl()?>" title="<?php /* @escapeNotVerified */ echo __('Check Out with Multiple Addresses');?>"><span><?php /* @escapeNotVerified */ echo __('Check Out with Multiple Addresses');?></span></a>
+<a class="action multicheckout" href="<?php /* @escapeNotVerified */ echo $block->getCheckoutUrl()?>"><span><?php /* @escapeNotVerified */ echo __('Check Out with Multiple Addresses');?></span></a>
diff --git a/app/code/Magento/Sales/view/frontend/templates/order/recent.phtml b/app/code/Magento/Sales/view/frontend/templates/order/recent.phtml
@@ -30,7 +30,7 @@
                         <th scope="col" class="col shipping"><?php /* @escapeNotVerified */ echo __('Ship To') ?></th>
                         <th scope="col" class="col total"><?php /* @escapeNotVerified */ echo __('Order Total') ?></th>
                         <th scope="col" class="col status"><?php /* @escapeNotVerified */ echo __('Status') ?></th>
-                        <th scope="col" class="col actions">&nbsp;</th>
+                        <th scope="col" class="col actions"><?php /* @escapeNotVerified */ echo __('Action') ?></th>
                     </tr>
                 </thead>
                 <tbody>

diff --git a/app/code/Magento/Ui/view/frontend/web/templates/group/group.html b/app/code/Magento/Ui/view/frontend/web/templates/group/group.html
@@ -4,10 +4,10 @@
  * See COPYING.txt for license details.
  */
 -->
-<div class="field" data-bind="css: additionalClasses">
-    <label class="label">
+<fieldset class="field" data-bind="css: additionalClasses">
+    <legend class="label">
         <span data-bind="text: element.label"></span>
-    </label>
+    </legend>
     <div class="control">
         <!-- ko foreach: { data: elems, as: 'element' } -->
 
@@ -33,4 +33,4 @@
         <!-- /ko -->
         <!-- /ko -->
     </div>
-</div>
+</fieldset>
diff --git a/app/design/adminhtml/Magento/backend/web/css/source/forms/_fields.less b/app/design/adminhtml/Magento/backend/web/css/source/forms/_fields.less
@@ -300,6 +300,7 @@
     float: left;
     position: static;
     width: 100%;
+    &:extend(.abs-fieldset-legend);
     & + br {
         display: block;
         height: 0;

diff --git a/app/design/adminhtml/Magento/backend/web/css/source/forms/fields/_field-tooltips.less b/app/design/adminhtml/Magento/backend/web/css/source/forms/fields/_field-tooltips.less
@@ -38,6 +38,9 @@
             @_icon-font-line-height: 1,
             @_icon-font-color: @field-tooltip-icon__color
         );
+        span {
+            &:extend(.abs-visually-hidden);
+        }
     }
     .admin__control-text:focus + .admin__field-tooltip-content,
     &:hover .admin__field-tooltip-content {

diff --git a/app/design/frontend/Magento/blank/Magento_Checkout/layout/checkout_cart_index.xml b/app/design/frontend/Magento/blank/Magento_Checkout/layout/checkout_cart_index.xml
@@ -14,9 +14,6 @@
                         <arguments>
                             <argument translate="true" name="text" xsi:type="string">Summary</argument>
                             <argument name="tag" xsi:type="string">strong</argument>
-                            <argument name="attributes" xsi:type="array">
-                                <item name="title" translate="true" xsi:type="string">Summary</item>
-                            </argument>
                             <argument name="css_class" xsi:type="string">summary title</argument>
                         </arguments>
                     </block>

diff --git a/app/design/frontend/Magento/blank/Magento_Checkout/layout/checkout_index_index.xml b/app/design/frontend/Magento/blank/Magento_Checkout/layout/checkout_index_index.xml
@@ -11,7 +11,6 @@
         <referenceContainer name="header.panel" remove="true"/>
         <referenceBlock name="top.search" remove="true"/>
         <referenceBlock name="catalog.compare.link" remove="true"/>
-        <referenceBlock name="page.main.title" remove="true"/>
         <referenceBlock name="catalog.topnav" remove="true"/>
         <referenceContainer name="footer-container" remove="true"/>
     </body>

diff --git a/...ign/frontend/Magento/blank/Magento_Checkout/web/css/source/module/checkout/_checkout.less b/...ign/frontend/Magento/blank/Magento_Checkout/web/css/source/module/checkout/_checkout.less
@@ -23,6 +23,13 @@
 
 & when (@media-common = true) {
 
+    .checkout-index-index,
+    .checkout-onepage-success {
+        .page-title-wrapper {
+            &:extend(.abs-visually-hidden all);
+        }
+    }
+
     .checkout-container {
         &:extend(.abs-add-clearfix all);
         .lib-css(margin, 0 0 @checkout-wrapper__margin);

diff --git a/...sign/frontend/Magento/luma/Magento_Checkout/web/css/source/module/checkout/_checkout.less b/...sign/frontend/Magento/luma/Magento_Checkout/web/css/source/module/checkout/_checkout.less
@@ -27,6 +27,13 @@
 
 & when (@media-common = true) {
 
+    .checkout-index-index,
+    .checkout-onepage-success {
+        .page-title-wrapper {
+            &:extend(.abs-visually-hidden all);
+        }
+    }
+
     .checkout-container {
         &:extend(.abs-add-clearfix all);
         .lib-css(margin, 0 0 @checkout-wrapper__margin);

diff --git a/dev/tests/functional/tests/app/Magento/Catalog/Test/Block/Product/View/CustomOptions.php b/dev/tests/functional/tests/app/Magento/Catalog/Test/Block/Product/View/CustomOptions.php
@@ -23,21 +23,21 @@ class CustomOptions extends Form
      *
      * @var string
      */
-    protected $optionsContext = '#product-options-wrapper > fieldset';
+    protected $optionsContext = '#product-options-wrapper';
 
     /**
      * Selector for single option block
      *
      * @var string
      */
-    protected $optionElement = './div[contains(@class,"field")][%d]';
+    protected $optionElement = '#product-options-wrapper .field';
 
     /**
      * Selector for title of option
      *
      * @var string
      */
-    protected $title = './/span[1]';
+    protected $title = 'label';
 
     /**
      * Selector for required option
@@ -156,16 +156,13 @@ public function getOptions(FixtureInterface $product)
     protected function getListOptions()
     {
         $customOptions = [];
-        $context = $this->_rootElement->find($this->optionsContext);
 
-        $count = 1;
-        $optionElement = $context->find(sprintf($this->optionElement, $count), Locator::SELECTOR_XPATH);
-        while ($optionElement->isVisible()) {
-            $title = $optionElement->find($this->title, Locator::SELECTOR_XPATH)->getText();
+        $optionElements = $this->_rootElement->getElements($this->optionElement);
+        foreach ($optionElements as $optionElement) {
+            $title = $optionElement->find($this->title)->getText();
             $customOptions[$title] = $optionElement;
-            ++$count;
-            $optionElement = $context->find(sprintf($this->optionElement, $count), Locator::SELECTOR_XPATH);
         }
+
         return $customOptions;
     }