Skip to content

Commit afa8f03

Browse files
undefined-olhaundefined-olha
committed
MAGETWO-55400: [WCAG 2.0 AA] Focus Order on The Storefront
1 parent b14d70e commit afa8f03

File tree

9 files changed

+60
-49
lines changed

9 files changed

+60
-49
lines changed

‎app/code/Magento/Directory/view/frontend/templates/currency.phtml

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,18 +19,16 @@
1919
<div class="switcher currency switcher-currency" id="switcher-currency<?php echo $block->escapeHtmlAttr($id) ?>">
2020
<strong class="label switcher-label"><span><?php echo $block->escapeHtml(__('Currency')) ?></span></strong>
2121
<div class="actions dropdown options switcher-options">
22-
<div class="action toggle switcher-trigger" id="switcher-currency-trigger<?php echo $block->escapeHtmlAttr($id) ?>">
22+
<div class="action toggle switcher-trigger"
23+
id="switcher-currency-trigger<?php echo $block->escapeHtmlAttr($id) ?>"
24+
data-mage-init='{"dropdown":{}}'
25+
data-toggle="dropdown"
26+
data-trigger-keypress-button="true">
2327
<strong class="language-<?php echo $block->escapeHtml($block->getCurrentCurrencyCode()) ?>">
2428
<span><?php echo $block->escapeHtml($currentCurrencyCode) ?> - <?php echo @$block->escapeHtml($currencies[$currentCurrencyCode]) ?></span>
2529
</strong>
2630
</div>
27-
<ul class="dropdown switcher-dropdown" data-mage-init='{"dropdownDialog":{
28-
"appendTo":"#switcher-currency<?php echo $block->escapeJs($id) ?> > .options",
29-
"triggerTarget":"#switcher-currency-trigger<?php echo $block->escapeJs($id) ?>",
30-
"closeOnMouseLeave": false,
31-
"triggerClass":"active",
32-
"parentClass":"active",
33-
"buttons":null}}'>
31+
<ul class="dropdown switcher-dropdown" data-target="dropdown">
3432
<?php foreach ($currencies as $_code => $_name): ?>
3533
<?php if ($_code != $currentCurrencyCode): ?>
3634
<li class="currency-<?php echo $block->escapeHtmlAttr($_code) ?> switcher-option">

‎app/code/Magento/Store/view/frontend/templates/switch/languages.phtml

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,19 +13,17 @@
1313
<div class="switcher language switcher-language" data-ui-id="language-switcher" id="switcher-language<?php echo $block->escapeHtmlAttr($id) ?>">
1414
<strong class="label switcher-label"><span><?php echo $block->escapeHtml(__('Language')) ?></span></strong>
1515
<div class="actions dropdown options switcher-options">
16-
<div class="action toggle switcher-trigger" id="switcher-language-trigger<?php echo $block->escapeHtmlAttr($id) ?>">
16+
<div class="action toggle switcher-trigger"
17+
id="switcher-language-trigger<?php echo $block->escapeHtmlAttr($id) ?>"
18+
data-mage-init='{"dropdown":{}}'
19+
data-toggle="dropdown"
20+
data-trigger-keypress-button="true">
1721
<strong class="view-<?php echo $block->escapeHtml($block->getCurrentStoreCode()) ?>">
1822
<span><?php echo $block->escapeHtml($block->getStoreName()) ?></span>
1923
</strong>
2024
</div>
2125
<ul class="dropdown switcher-dropdown"
22-
data-mage-init='{"dropdownDialog":{
23-
"appendTo":"#switcher-language<?php echo $block->escapeJs($id) ?> > .options",
24-
"triggerTarget":"#switcher-language-trigger<?php echo $block->escapeJs($id) ?>",
25-
"closeOnMouseLeave": false,
26-
"triggerClass":"active",
27-
"parentClass":"active",
28-
"buttons":null}}'>
26+
data-target="dropdown">
2927
<?php foreach ($block->getStores() as $_lang): ?>
3028
<?php if ($_lang->getId() != $block->getCurrentStoreId()): ?>
3129
<li class="view-<?php echo $block->escapeHtml($_lang->getCode()); ?> switcher-option">

‎app/code/Magento/Ui/view/base/web/templates/modal/modal-custom.html

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,21 @@
55
*/
66
-->
77

8-
<aside class="modal-<%- data.type %> <%- data.modalClass %>
8+
<aside role="dialog"
9+
class="modal-<%- data.type %> <%- data.modalClass %>
910
<% if(data.responsive){ %><%- data.responsiveClass %><% } %>
1011
<% if(data.innerScroll){ %><%- data.innerScrollClass %><% } %>"
11-
data-role="modal"
12-
data-type="<%- data.type %>"
13-
tabindex="0">
12+
<% if(data.title){ %> aria-labelledby="modal-title-<%- data.id %>"<% } %>
13+
aria-describedby="modal-content-<%- data.id %>"
14+
data-role="modal"
15+
data-type="<%- data.type %>"
16+
tabindex="0">
1417
<div data-role="focusable-start" tabindex="0"></div>
1518
<div class="modal-inner-wrap"
1619
data-role="focusable-scope">
1720
<header class="modal-header">
1821
<% if(data.title){ %>
19-
<h1 class="modal-title"
22+
<h1 id="modal-title-<%- data.id %>" class="modal-title"
2023
data-role="title"><%= data.title %></h1>
2124
<% } %>
2225
<button
@@ -26,14 +29,15 @@
2629
<span><%= data.closeText %></span>
2730
</button>
2831
</header>
29-
<div class="modal-content" data-role="content"></div>
32+
<div id="modal-content-<%- data.id %>" class="modal-content" data-role="content"></div>
3033
<% if(data.buttons.length > 0){ %>
3134
<footer class="modal-footer">
3235
<% _.each(data.buttons, function(button) { %>
33-
<button
34-
class="<%- button.class %>"
36+
<button class="<%- button.class %>"
3537
type="button"
36-
data-role="action"><span><%= button.text %></span></button>
38+
data-role="action">
39+
<span><%= button.text %></span>
40+
</button>
3741
<% }); %>
3842
</footer>
3943
<% } %>

‎app/code/Magento/Ui/view/base/web/templates/modal/modal-popup.html

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,21 @@
55
*/
66
-->
77

8-
<aside
9-
class="modal-<%- data.type %> <%- data.modalClass %>
10-
<% if(data.responsive){ %><%- data.responsiveClass %><% } %>
11-
<% if(data.innerScroll){ %><%- data.innerScrollClass %><% } %>"
12-
data-role="modal"
13-
data-type="<%- data.type %>"
14-
tabindex="0">
8+
<aside role="dialog"
9+
class="modal-<%- data.type %> <%- data.modalClass %>
10+
<% if(data.responsive){ %><%- data.responsiveClass %><% } %>
11+
<% if(data.innerScroll){ %><%- data.innerScrollClass %><% } %>"
12+
<% if(data.title){ %> aria-labelledby="modal-title-<%- data.id %>"<% } %>
13+
aria-describedby="modal-content-<%- data.id %>"
14+
data-role="modal"
15+
data-type="<%- data.type %>"
16+
tabindex="0">
1517
<div data-role="focusable-start" tabindex="0"></div>
1618
<div class="modal-inner-wrap"
1719
data-role="focusable-scope">
1820
<header class="modal-header">
1921
<% if(data.title){ %>
20-
<h1 class="modal-title"
22+
<h1 id="modal-title-<%- data.id %>" class="modal-title"
2123
data-role="title"><%= data.title %></h1>
2224
<% } %>
2325
<button
@@ -27,7 +29,7 @@
2729
<span><%= data.closeText %></span>
2830
</button>
2931
</header>
30-
<div
32+
<div id="modal-content-<%- data.id %>"
3133
class="modal-content"
3234
data-role="content"></div>
3335
<% if(data.buttons.length > 0){ %>

‎app/code/Magento/Ui/view/base/web/templates/modal/modal-slide.html

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,19 @@
55
*/
66
-->
77

8-
<aside
9-
class="modal-<%- data.type %> <%- data.modalClass %>
10-
<% if(data.innerScroll){ %><%- data.innerScrollClass %><% } %>"
11-
data-role="modal"
12-
data-type="<%- data.type %>"
13-
tabindex="0">
8+
<aside role="dialog"
9+
class="modal-<%- data.type %> <%- data.modalClass %>
10+
<% if(data.innerScroll){ %><%- data.innerScrollClass %><% } %>"
11+
<% if(data.title){ %> aria-labelledby="modal-title-<%- data.id %>"<% } %>
12+
aria-describedby="modal-content-<%- data.id %>"
13+
data-role="modal"
14+
data-type="<%- data.type %>"
15+
tabindex="0">
1416
<div data-role="focusable-start" tabindex="0"></div>
1517
<div class="modal-inner-wrap"
1618
data-role="focusable-scope">
1719
<header class="modal-header">
18-
<h1 class="modal-title"
20+
<h1 id="modal-title-<%- data.id %>" class="modal-title"
1921
data-role="title">
2022
<% if(data.title){ %>
2123
<%= data.title %>
@@ -48,7 +50,7 @@
4850
</div>
4951
<% } %>
5052
</header>
51-
<div class="modal-content" data-role="content"></div>
53+
<div id="modal-content-<%- data.id %>" class="modal-content" data-role="content"></div>
5254
</div>
5355
<div data-role="focusable-end" tabindex="0"></div>
5456
</aside>

‎app/code/Magento/Wishlist/view/frontend/templates/item/column/image.phtml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,6 @@
1212
$item = $block->getItem();
1313
$product = $item->getProduct();
1414
?>
15-
<a class="product-item-photo" href="<?php echo $block->escapeUrl($block->getProductUrl($item)) ?>" title="<?php echo $block->escapeHtmlAttr($product->getName()) ?>">
15+
<a class="product-item-photo" tabindex="-1" href="<?php echo $block->escapeUrl($block->getProductUrl($item)) ?>" title="<?php echo $block->escapeHtmlAttr($product->getName()) ?>">
1616
<?php echo $block->getImage($product, 'wishlist_thumbnail')->toHtml(); ?>
1717
</a>

‎app/code/Magento/Wishlist/view/frontend/templates/item/list.phtml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ $columns = $block->getColumns();
1818
<ol class="product-items">
1919
<?php foreach ($block->getItems() as $item): ?>
2020
<?php /* @noEscape */ echo($iterator++ == 1) ? '<li data-row="product-item" class="product-item" id="item_' . $block->escapeHtmlAttr($item->getId()) . '">' : '</li><li class="product-item" id="item_' . $block->escapeHtmlAttr($item->getId()) . '">' ?>
21-
<div class="product-item-info">
21+
<div class="product-item-info" data-container="product-grid">
2222
<?php foreach ($columns as $column): ?>
2323
<?php $column->setItem($item); echo $column->toHtml($item);?>
2424
<?php endforeach; ?>

‎app/design/frontend/Magento/luma/Magento_Wishlist/web/css/source/_module.less

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -366,9 +366,8 @@
366366

367367
.lib-css(background, @color-white);
368368
.lib-css(border, @border-width__base solid @color-gray-light2);
369-
border-top: none;
370369
.lib-css(box-shadow, @_shadow);
371-
display: none;
370+
border-top: none;
372371
left: 0;
373372
margin: 9px 0 0 -1px;
374373
padding: 0 9px 9px;

‎lib/web/mage/dropdowns.js

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -109,11 +109,18 @@ define([
109109
menu.attr('aria-hidden', false);
110110
}
111111

112+
if (!elem.is('a, button')) {
113+
elem.attr('role', 'button');
114+
elem.attr('tabindex', 0);
115+
}
116+
112117
if (elem.attr('data-trigger-keypress-button')) {
113-
elem.keypress(function (e) {
114-
var ENTER_CODE = '13';
118+
elem.on('keypress', function (e) {
119+
var keyCode = e.keyCode || e.which,
120+
ENTER_CODE = 13;
115121

116-
if (e.which == ENTER_CODE) { //eslint-disable-line eqeqeq
122+
if (keyCode === ENTER_CODE) {
123+
e.preventDefault();
117124
elem.trigger('click.toggleDropdown');
118125
}
119126
});
@@ -129,6 +136,7 @@ define([
129136
$(document).trigger('click.hideDropdown');
130137
actionElem = el;
131138
}
139+
132140
self[el.hasClass(options.activeClass) ? 'closeDropdown' : 'openDropdown'](elem);
133141

134142
return false;

0 commit comments

Comments
 (0)