Merge pull request #100 from magento-webdev/develop

[UI] Accessibility impovements
magento · Feb 18, 2015 · e85f2eb · e85f2eb
2 parents 76d3d79 + 4665b59
commit e85f2eb
Show file tree

Hide file tree

Showing 41 changed files with 776 additions and 306 deletions.
diff --git a/app/code/Magento/Backend/etc/adminhtml/di.xml b/app/code/Magento/Backend/etc/adminhtml/di.xml
@@ -17,7 +17,13 @@
     <preference for="Magento\Backend\App\ConfigInterface" type="Magento\Backend\App\Config" />
     <preference for="Magento\Framework\App\Response\Http\FileFactory" type="Magento\Backend\App\Response\Http\FileFactory" />
     <preference for="Magento\Framework\View\Layout\GeneratorPool" type="Magento\Backend\Model\View\Layout\GeneratorPool" />
-    <preference for="pageLayoutGeneratorPool" type="Magento\Backend\Model\View\Layout\GeneratorPool" />
+    <type name="Magento\Framework\View\Result\Page">
+        <arguments>
+            <argument name="layoutReaderPool" xsi:type="object">pageConfigRenderPool</argument>
+            <argument name="generatorPool" xsi:type="object">Magento\Backend\Model\View\Layout\GeneratorPool</argument>
+            <argument name="template" xsi:type="string">Magento_Theme::root.phtml</argument>
+        </arguments>
+    </type>
     <preference for="Magento\Framework\View\Layout\Reader\Block" type="Magento\Backend\Model\View\Layout\Reader\Block" />
     <preference for="Magento\Framework\Model\ActionValidator\RemoveAction" type="Magento\Framework\Model\ActionValidator\RemoveAction\Allowed" />
     <preference for="Magento\Framework\Session\Config\ConfigInterface" type="Magento\Backend\Model\Session\AdminConfig" />

diff --git a/app/code/Magento/Catalog/view/frontend/templates/product/view/details.phtml b/app/code/Magento/Catalog/view/frontend/templates/product/view/details.phtml
@@ -10,7 +10,7 @@
 <?php if ($detailedInfoGroup = $block->getGroupChildNames('detailed_info', 'getChildHtml')):?>
     <div class="product info detailed">
         <?php $layout = $block->getLayout(); ?>
-        <div role="tablist" class="product data items" data-mage-init='{"tabs":{"openedState":"active"}}'>
+        <div class="product data items" data-mage-init='{"tabs":{"openedState":"active"}}'>
             <?php foreach ($detailedInfoGroup as $name):?>
                 <?php
                     $html = $layout->renderElement($name);
@@ -20,10 +20,20 @@
                     $alias = $layout->getElementAlias($name);
                     $label = $block->getChildData($alias, 'title');
                 ?>
-                <div class="data item title" data-role="collapsible">
-                    <a role="tab" class="data switch" data-toggle="switch" id="tab-label-<?php echo $alias;?>" href="#<?php echo $alias; ?>"><?php echo $label; ?></a>
+                <div class="data item title"
+                     aria-labeledby="tab-label-<?php echo $alias;?>-title"
+                     data-role="collapsible" id="tab-label-<?php echo $alias;?>">
+                    <a class="data switch"
+                       tabindex="-1"
+                       data-toggle="switch"
+                       href="#<?php echo $alias; ?>"
+                       id="tab-label-<?php echo $alias;?>-title">
+                        <?php echo $label; ?>
+                    </a>
+                </div>
+                <div class="data item content" id="<?php echo $alias; ?>" data-role="content">
+                    <?php echo $html; ?>
                 </div>
-                <div role="tabpanel" aria-labelledby="tab-label-<?php echo $alias;?>" class="data item content" id="<?php echo $alias; ?>" data-role="content"><?php echo $html; ?></div>
             <?php endforeach;?>
         </div>
     </div>

diff --git a/app/code/Magento/Catalog/view/frontend/templates/product/view/options/type/file.phtml b/app/code/Magento/Catalog/view/frontend/templates/product/view/options/type/file.phtml
@@ -17,7 +17,7 @@
 <?php $class = ($_option->getIsRequire()) ? ' required' : ''; ?>
 
 <div class="field file<?php echo $class; ?>">
-    <label class="label">
+    <label class="label" for="<?php echo $_fileName; ?>" id="<?php echo $_fileName; ?>-label">
         <span><?php echo  $block->escapeHtml($_option->getTitle()) ?></span>
         <?php echo $block->getFormatedPrice() ?>
     </label>
@@ -44,6 +44,7 @@
             <?php echo $_fileExists ? 'style="display:none"' : '' ?>>
         <input type="file"
                name="<?php echo $_fileName; ?>"
+               id="<?php echo $_fileName; ?>"
                class="product-custom-option<?php echo $_option->getIsRequire() ? ' required' : '' ?>"
                <?php echo $_fileExists ? 'disabled="disabled"' : '' ?> />
         <input type="hidden" name="<?php echo $_fieldNameAction; ?>" value="<?php echo $_fieldValueAction; ?>" />

diff --git a/app/code/Magento/Catalog/view/frontend/templates/product/view/options/type/select.phtml b/app/code/Magento/Catalog/view/frontend/templates/product/view/options/type/select.phtml
@@ -14,7 +14,7 @@ $_option = $block->getOption();
 $class = ($_option->getIsRequire()) ? ' required' : '';
 ?>
 <div class="field<?php echo $class; ?>">
-    <label class="label">
+    <label class="label" for="select_<?php echo $_option->getId() ?>">
         <span><?php echo  $block->escapeHtml($_option->getTitle()) ?></span>
     </label>
     <div class="control">

diff --git a/app/code/Magento/Catalog/view/frontend/templates/product/view/options/type/text.phtml b/app/code/Magento/Catalog/view/frontend/templates/product/view/options/type/text.phtml
@@ -15,7 +15,7 @@ $class = ($_option->getIsRequire()) ? ' required' : '';
 <div class="field<?php if ($_option->getType() == \Magento\Catalog\Model\Product\Option::OPTION_TYPE_AREA) {
     echo ' textarea';
 } ?><?php echo $class ?>">
-    <label class="label">
+    <label class="label" for="options_<?php echo $_option->getId() ?>_text">
         <span><?php echo $block->escapeHtml($_option->getTitle()) ?></span>
         <?php echo $block->getFormatedPrice() ?>
     </label>

diff --git a/app/code/Magento/Checkout/view/frontend/templates/cart/form.phtml b/app/code/Magento/Checkout/view/frontend/templates/cart/form.phtml
@@ -37,16 +37,26 @@
     </div>
     <div class="cart main actions">
         <?php if ($block->getContinueShoppingUrl()): ?>
-            <a class="action continue" href="<?php echo $block->getContinueShoppingUrl() ?>" title="<?php echo __('Continue Shopping') ?>">
+            <a class="action continue"
+               href="<?php echo $block->getContinueShoppingUrl() ?>"
+               title="<?php echo $block->escapeHtml(__('Continue Shopping')); ?>">
                 <span><?php echo __('Continue Shopping') ?></span>
             </a>
         <?php endif; ?>
-        <button type="submit" name="update_cart_action" value="update_qty" title="<?php echo __('Update Shopping Cart'); ?>" class="action update">
-            <span><?php echo __('Update Shopping Cart'); ?></span>
-        </button>
-        <button type="submit" name="update_cart_action" value="empty_cart" title="<?php echo __('Clear Shopping Cart'); ?>" class="action clear" id="empty_cart_button">
+        <button type="submit"
+                name="update_cart_action"
+                value="empty_cart"
+                title="<?php echo $block->escapeHtml(__('Clear Shopping Cart')); ?>"
+                class="action clear" id="empty_cart_button">
             <span><?php echo __('Clear Shopping Cart'); ?></span>
         </button>
+        <button type="submit"
+                name="update_cart_action"
+                value="update_qty"
+                title="<?php echo $block->escapeHtml(__('Update Shopping Cart')); ?>"
+                class="action update">
+            <span><?php echo __('Update Shopping Cart'); ?></span>
+        </button>
         <!--[if lt IE 8]>
         <input type="hidden" value="" id="update_cart_action_container" />
         <![endif]-->

diff --git a/app/code/Magento/Checkout/view/frontend/templates/cart/item/default.phtml b/app/code/Magento/Checkout/view/frontend/templates/cart/item/default.phtml
@@ -16,110 +16,138 @@ $helper = $this->helper('Magento\Msrp\Helper\Data');
 $canApplyMsrp = $helper->isShowBeforeOrderConfirm($product) && $helper->isMinimalPriceLessMsrp($product);
 ?>
 <tbody class="cart item">
-<tr class="item-info">
-    <td data-th="<?php echo $block->escapeHtml(__('Item')); ?>" class="col item">
-        <?php if ($block->hasProductUrl()):?><a href="<?php echo $block->getProductUrl() ?>" title="<?php echo $block->escapeHtml($block->getProductName()) ?>" class="product-item-photo">
+    <tr class="item-info">
+        <td data-th="<?php echo $block->escapeHtml(__('Item')); ?>" class="col item">
+            <?php if ($block->hasProductUrl()):?>
+                <a href="<?php echo $block->getProductUrl() ?>"
+                   title="<?php echo $block->escapeHtml($block->getProductName()) ?>"
+                   tabindex="-1"
+                   class="product-item-photo">
             <?php else:?>
-            <span class="product-item-photo">
-        <?php endif;?>
-        <?php echo $block->getLayout()->createBlock('Magento\Catalog\Block\Product\Image')->init($block->getProductForThumbnail(), 'cart_page_product_thumbnail')->toHtml(); ?>
-            <?php if ($block->hasProductUrl()):?></a><?php else: ?></span><?php endif; ?>
-        <div class="product-item-details">
-            <strong class="product-item-name">
-                <?php if ($block->hasProductUrl()):?>
-                    <a href="<?php echo $block->getProductUrl() ?>"><?php echo $block->escapeHtml($block->getProductName()) ?></a>
-                <?php else: ?>
-                    <?php echo $block->escapeHtml($block->getProductName()) ?>
-                <?php endif; ?>
-            </strong>
-            <?php if ($_options = $block->getOptionList()):?>
-                <dl class="item-options">
-                    <?php foreach ($_options as $_option) : ?>
-                        <?php $_formatedOptionValue = $block->getFormatedOptionValue($_option) ?>
-                        <dt><?php echo $block->escapeHtml($_option['label']) ?></dt>
-                        <dd>
-                            <?php if (isset($_formatedOptionValue['full_view'])): ?>
-                                <?php echo $_formatedOptionValue['full_view'] ?>
-                            <?php else: ?>
-                                <?php echo $_formatedOptionValue['value'] ?>
-                            <?php endif; ?>
-                        </dd>
-                    <?php endforeach; ?>
-                </dl>
+                <span class="product-item-photo">
             <?php endif;?>
-            <?php if ($messages = $block->getMessages()): ?>
-                <?php foreach ($messages as $message): ?>
-                    <div class="cart item message <?php echo $message['type'] ?>"><div><?php echo $block->escapeHtml($message['text']) ?></div></div>
-                <?php endforeach; ?>
+            <?php echo $block->getLayout()->createBlock('Magento\Catalog\Block\Product\Image')->init($block->getProductForThumbnail(), 'cart_page_product_thumbnail')->toHtml(); ?>
+            <?php if ($block->hasProductUrl()):?>
+                </a>
+            <?php else: ?>
+                </span>
             <?php endif; ?>
-            <?php $addInfoBlock = $block->getProductAdditionalInformationBlock(); ?>
-            <?php if ($addInfoBlock): ?>
-                <?php echo $addInfoBlock->setItem($_item)->toHtml() ?>
-            <?php endif;?>
-        </div>
-        <?php $cols = 1; ?>
-    </td>
+            <div class="product-item-details">
+                <strong class="product-item-name">
+                    <?php if ($block->hasProductUrl()):?>
+                        <a href="<?php echo $block->getProductUrl() ?>"><?php echo $block->escapeHtml($block->getProductName()) ?></a>
+                    <?php else: ?>
+                        <?php echo $block->escapeHtml($block->getProductName()) ?>
+                    <?php endif; ?>
+                </strong>
+                <?php if ($_options = $block->getOptionList()):?>
+                    <dl class="item-options">
+                        <?php foreach ($_options as $_option) : ?>
+                            <?php $_formatedOptionValue = $block->getFormatedOptionValue($_option) ?>
+                            <dt><?php echo $block->escapeHtml($_option['label']) ?></dt>
+                            <dd>
+                                <?php if (isset($_formatedOptionValue['full_view'])): ?>
+                                    <?php echo $_formatedOptionValue['full_view'] ?>
+                                <?php else: ?>
+                                    <?php echo $_formatedOptionValue['value'] ?>
+                                <?php endif; ?>
+                            </dd>
+                        <?php endforeach; ?>
+                    </dl>
+                <?php endif;?>
+                <?php if ($messages = $block->getMessages()): ?>
+                    <?php foreach ($messages as $message): ?>
+                        <div class="cart item message <?php echo $message['type'] ?>"><div><?php echo $block->escapeHtml($message['text']) ?></div></div>
+                    <?php endforeach; ?>
+                <?php endif; ?>
+                <?php $addInfoBlock = $block->getProductAdditionalInformationBlock(); ?>
+                <?php if ($addInfoBlock): ?>
+                    <?php echo $addInfoBlock->setItem($_item)->toHtml() ?>
+                <?php endif;?>
+            </div>
+            <?php $cols = 1; ?>
+        </td>
 
-    <?php if ($canApplyMsrp): ?>
-        <td class="col msrp" data-th="<?php echo $block->escapeHtml(__('Price')); ?>">
-            <span class="pricing msrp">
-                <span class="msrp notice"><?php echo __('See price before order confirmation.'); ?></span>
-                <?php $helpLinkId = 'cart-msrp-help-' . $_item->getId(); ?>
-                <?php $coreHelper = $this->helper('Magento\Core\Helper\Data'); ?>
-                <a href="#" class="action help map" id="<?php echo($helpLinkId); ?>" data-mage-init='{"addToCart":{"helpLinkId": "#<?php echo $helpLinkId;?>","productName": "<?php echo $product->getName(); ?>","showAddToCart": false}}'>
-                    <span><?php echo __("What's this?"); ?></span>
-                </a>
-            </span>
+        <?php if ($canApplyMsrp): ?>
+            <td class="col msrp" data-th="<?php echo $block->escapeHtml(__('Price')); ?>">
+                <span class="pricing msrp">
+                    <span class="msrp notice"><?php echo __('See price before order confirmation.'); ?></span>
+                    <?php $helpLinkId = 'cart-msrp-help-' . $_item->getId(); ?>
+                    <?php $coreHelper = $this->helper('Magento\Core\Helper\Data'); ?>
+                    <a href="#" class="action help map" id="<?php echo($helpLinkId); ?>" data-mage-init='{"addToCart":{"helpLinkId": "#<?php echo $helpLinkId;?>","productName": "<?php echo $product->getName(); ?>","showAddToCart": false}}'>
+                        <span><?php echo __("What's this?"); ?></span>
+                    </a>
+                </span>
+                <?php $cols++; ?>
+            </td>
+        <?php else: ?>
+            <td class="col price" data-th="<?php echo $block->escapeHtml(__('Price')); ?>">
+                <?php echo $block->getUnitPriceHtml($_item); ?>
+                <?php $cols++; ?>
+            </td>
+        <?php endif; ?>
+        <td class="col qty" data-th="<?php echo $block->escapeHtml(__('Qty')); ?>">
+            <div class="field qty">
+                <label class="label" for="cart-<?php echo $_item->getId() ?>-qty">
+                    <span><?php echo __('Qty') ?></span>
+                </label>
+                <div class="control qty">
+                    <input id="cart-<?php echo $_item->getId() ?>-qty"
+                           name="cart[<?php echo $_item->getId() ?>][qty]"
+                           value="<?php echo $block->getQty() ?>"
+                           type="number"
+                           size="4"
+                           title="<?php echo $block->escapeHtml(__('Qty')); ?>"
+                           class="input-text qty"
+                           maxlength="12"
+                           data-validate="{required:true,'validate-greater-than-zero':true}" />
+                </div>
+            </div>
             <?php $cols++; ?>
         </td>
-    <?php else: ?>
-        <td class="col price" data-th="<?php echo $block->escapeHtml(__('Price')); ?>">
-            <?php echo $block->getUnitPriceHtml($_item); ?>
+
+        <td class="col subtotal" data-th="<?php echo $block->escapeHtml(__('Subtotal'));?>">
+            <?php if ($canApplyMsrp): ?>
+                <span class="cart msrp subtotal">--</span>
+            <?php else: ?>
+                <?php echo $block->getRowTotalHtml($_item); ?>
+            <?php endif; ?>
             <?php $cols++; ?>
         </td>
-    <?php endif; ?>
-    <td class="col qty" data-th="<?php echo $block->escapeHtml(__('Qty')); ?>">
-        <div class="field qty">
-            <label class="label" for="cart-<?php echo $_item->getId() ?>-qty">
-                <span><?php echo __('Qty') ?></span>
-            </label>
-            <div class="control qty">
-                <input id="cart-<?php echo $_item->getId() ?>-qty" name="cart[<?php echo $_item->getId() ?>][qty]" value="<?php echo $block->getQty() ?>" type="number" size="4" title="<?php echo __('Qty') ?>" class="input-text qty" maxlength="12" data-validate="{required:true,'validate-greater-than-zero':true}"/>
-            </div>
-        </div>
-        <?php $cols++; ?>
-    </td>
+    </tr>
+    <tr class="item-actions">
+        <td colspan="<?php echo $cols;?>">
+            <div class="actions-toolbar">
 
-    <td class="col subtotal" data-th="<?php echo $block->escapeHtml(__('Subtotal'));?>">
-        <?php if ($canApplyMsrp): ?>
-            <span class="cart msrp subtotal">--</span>
-        <?php else: ?>
-            <?php echo $block->getRowTotalHtml($_item); ?>
-        <?php endif; ?>
-        <?php $cols++; ?>
-    </td>
-</tr>
-<tr class="item-actions">
-    <td colspan="<?php echo $cols;?>">
-        <div class="actions-toolbar">
-            <?php if ($this->helper('Magento\Wishlist\Helper\Data')->isAllowInCart()) : ?>
-                <?php if ($isVisibleProduct): ?>
-                    <a href="#" data-post='<?php echo $this->helper('Magento\Wishlist\Helper\Data')->getMoveFromCartParams($_item->getId()); ?>' class="use-ajax action towishlist">
-                        <span><?php echo __('Move to Wishlist'); ?></span>
-                    </a>
+                <?php if ($this->helper('Magento\Wishlist\Helper\Data')->isAllowInCart()) : ?>
+                    <?php if ($isVisibleProduct): ?>
+                        <a href="#"
+                           data-post='<?php echo $this->helper('Magento\Wishlist\Helper\Data')->getMoveFromCartParams($_item->getId()); ?>'
+                           class="use-ajax action towishlist">
+                            <span><?php echo __('Move to Wishlist'); ?></span>
+                        </a>
+                    <?php endif ?>
                 <?php endif ?>
-            <?php endif ?>
-
-            <?php if ($isVisibleProduct): ?>
-                <a class="action edit" href="<?php echo $block->getConfigureUrl() ?>" title="<?php echo __('Edit item parameters') ?>"><span><?php echo __('Edit') ?></span></a>
-            <?php endif ?>
 
-            <a href="#" title="<?php echo __('Remove item') ?>"
-                    class="action delete"
-                    data-post='<?php echo $this->helper('Magento\Checkout\Helper\Cart')->getDeletePostJson($_item); ?>'>
-                <span><?php echo __('Remove item')?></span>
-            </a>
-        </div>
-    </td>
-</tr>
+                <?php if ($isVisibleProduct): ?>
+                    <a class="action edit"
+                       href="<?php echo $block->getConfigureUrl() ?>"
+                       title="<?php echo $block->escapeHtml(__('Edit item parameters')); ?>">
+                        <span>
+                            <?php echo __('Edit') ?>
+                        </span>
+                   </a>
+                <?php endif ?>
+
+                <a href="#"
+                   title="<?php echo $block->escapeHtml(__('Remove item')); ?>"
+                   class="action delete"
+                   data-post='<?php echo $this->helper('Magento\Checkout\Helper\Cart')->getDeletePostJson($_item); ?>'>
+                    <span>
+                        <?php echo __('Remove item')?>
+                    </span>
+                </a>
+            </div>
+        </td>
+    </tr>
 </tbody>
diff --git a/app/code/Magento/Checkout/view/frontend/templates/cart/sidebar/default.phtml b/app/code/Magento/Checkout/view/frontend/templates/cart/sidebar/default.phtml
@@ -19,7 +19,10 @@ $imageBlock = $block->getLayout()->createBlock('Magento\Catalog\Block\Product\Im
 <li class="item product product-item">
     <div class="product">
         <?php if ($block->hasProductUrl()): ?>
-            <a href="<?php echo $block->getProductUrl()?>" title="<?php echo $block->escapeHtml($block->getProductName()) ?>" class="product-item-photo">
+            <a href="<?php echo $block->getProductUrl()?>"
+               title="<?php echo $block->escapeHtml($block->getProductName()) ?>"
+               tabindex="-1"
+               class="product-item-photo">
                 <?php echo $imageBlock->init($block->getProductForThumbnail(), 'mini_cart_product_thumbnail')->toHtml() ?>
             </a>
         <?php else: ?>