MAGETWO-37594: Implementation and fixes after review

- Clean up dialogs template attributes
- Changed translation functions
- Added aside tag

Author: Bogdan Plieshka

app/code/Magento/Ui/view/base/web/js/dialog/dialog.js

@@ -37,6 +37,7 @@ define([
             overlayClass: 'overlay_magento',
             responsiveClass: 'dialog-slide',
             dialogLeftMargin: 45,
+            closeText: $.mage.__('Close'),
             buttons: [{
                 text: $.mage.__('Ok'),
                 class: '',

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

@@ -5,7 +5,7 @@
  */
 -->
 
-<section
+<aside
     class="dialog-<%= data.type %> <%= data.dialogClass %>
            <% if(data.responsive){ %><%= data.responsiveClass %><% } %>
            <% if(data.innerScroll){ %><%= data.innerScrollClass %><% } %>"
@@ -17,10 +17,9 @@
                 data-role="title"><%= data.title %></h1>
             <button
                 class="action-close"
-                data-action="close-mypopup"
                 data-role="closeBtn"
                 type="button">
-                <span>$t('Close')</span>
+                <span><%= data.closeText %></span>
             </button>
         </header>
         <div
@@ -31,8 +30,8 @@
             <button
                 class="<%= button.class %>"
                 type="button"
-                data-role="action"><%= button.text %></button>
+                data-role="action"><span><%= button.text %></span></button>
             <% }); %>
         </footer>
     </div>
-</section>
+</aside>

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

@@ -5,9 +5,9 @@
  */
 -->
 
-<section
+<aside
     class="dialog-<%= data.type %> <%= data.dialogClass %>
-    <% if(data.innerScroll){ %><%= data.innerScrollClass %><% } %>"
+           <% if(data.innerScroll){ %><%= data.innerScrollClass %><% } %>"
     data-role="dialog"
     data-type="<%= data.type %>">
     <div class="dialog-inner-wrap">
@@ -16,10 +16,9 @@
                 data-role="title"><%= data.title %></h1>
             <button
                 class="action-close"
-                data-action="close-mypopup"
                 data-role="closeBtn"
                 type="button">
-                <span>$t('Close')</span>
+                <span><%= data.closeText %></span>
             </button>
             <div class="page-main-actions">
                 <div class="page-actions">
@@ -28,7 +27,7 @@
                         <button
                             class="<%= button.class %>"
                             type="button"
-                            data-role="action"><%= button.text %>
+                            data-role="action"><span><%= button.text %></span>
                         </button>
                         <% }); %>
                     </div>
@@ -37,4 +36,4 @@
         </header>
         <div class="dialog-content" data-role="content"></div>
     </div>
-</section>
+</aside>