Merge remote-tracking branch 'remotes/dev/master'

CI bot · CI bot · commit 0cb4811280b5 · 2025-02-25T20:52:53.000Z
diff --git a/src/Oro/Bundle/DashboardBundle/Resources/views/Dashboard/tabbedWidget.html.twig b/src/Oro/Bundle/DashboardBundle/Resources/views/Dashboard/tabbedWidget.html.twig
@@ -11,7 +11,7 @@
             {% set tabTabId = 'tab-'|uniqid %}
             {% set tabContentId = 'tab-content-'|uniqid %}
             {% for tab in tabs %}
-                <li class="nav-item tab">
+                <li class="nav-item tab" role="presentation">
                     <a id="{{ (loop.index == 0) ? tabTabId : tabTabId ~ loop.index }}"
                        href="#{{ tabContentId }}"
                        role="tab"
diff --git a/src/Oro/Bundle/DataGridBundle/Resources/public/default/scss/components/datagrid-header-cell.scss b/src/Oro/Bundle/DataGridBundle/Resources/public/default/scss/components/datagrid-header-cell.scss
@@ -56,7 +56,7 @@
         color: $datagrid-header-cell-link-color;
         position: $datagrid-header-cell-link-position;
         opacity: $datagrid-header-cell-link-opacity;
-        text-transform: uppercase;
+        text-transform: $datagrid-header-cell-link-text-transform;
     }
 
     &__link {
diff --git a/src/Oro/Bundle/DataGridBundle/Resources/public/default/scss/variables/datagrid-header-cell-config.scss b/src/Oro/Bundle/DataGridBundle/Resources/public/default/scss/variables/datagrid-header-cell-config.scss
@@ -15,7 +15,8 @@ $datagrid-header-cell-link-font-size: 12px !default;
 $datagrid-header-cell-link-font-weight: font-weight('semi-bold') !default;
 $datagrid-header-cell-link-line-height: 1 !default;
 $datagrid-header-cell-link-color: get-color('text', 'secondary') !default;
-$datagrid-header-cell-link-opacity: .8 !default;
+$datagrid-header-cell-link-opacity: null !default;
+$datagrid-header-cell-link-text-transform: uppercase !default;
 $datagrid-header-cell-link-position: relative !default;
 $datagrid-header-cell-link-hover-color: get-color('neutral', 'dark') !default;
 $datagrid-header-cell-link-hover-text-decoration: none !default;
diff --git a/src/Oro/Bundle/DataGridBundle/Resources/public/js/datagrid/cell/boolean-cell.js b/src/Oro/Bundle/DataGridBundle/Resources/public/js/datagrid/cell/boolean-cell.js
@@ -46,6 +46,8 @@ define(function(require) {
                 this.delegateEvents();
             }
 
+            this.$el.find('[type="checkbox"]').attr('aria-label', __('oro.datagrid.action.select_row'));
+
             return this;
         },
 
diff --git a/src/Oro/Bundle/DataGridBundle/Resources/public/templates/datagrid/select-row-cell.html b/src/Oro/Bundle/DataGridBundle/Resources/public/templates/datagrid/select-row-cell.html
@@ -1 +1 @@
-<input type="checkbox" class="select-row-cell-input" data-role="select-row-cell"<% if (checked) { %> checked="checked"<% } %>>
+<input type="checkbox" class="select-row-cell-input" data-role="select-row-cell"<% if (checked) { %> checked="checked"<% } %> aria-label="<%- _.__('oro.datagrid.action.select_row') %>">
diff --git a/src/Oro/Bundle/EmailBundle/Resources/views/Form/fields.html.twig b/src/Oro/Bundle/EmailBundle/Resources/views/Form/fields.html.twig
@@ -351,7 +351,7 @@
         uniqid       - is unique identifier
 #}
 {% macro renderTabNavItem(form, isActive = false, uniqid = null) %}
-    <li class="nav-item">
+    <li class="nav-item" role="presentation">
         <a href="#"
            class="nav-link {% if isActive %}active{% endif %}"
            data-role="change-localization"
diff --git a/src/Oro/Bundle/EmailBundle/Resources/views/macros.html.twig b/src/Oro/Bundle/EmailBundle/Resources/views/macros.html.twig
@@ -7,7 +7,7 @@
         <div class="emailtemplate-variables oro-tabs tabbable">
             <div class="oro-tabs__head">
                 <ul class="nav nav-tabs" role="tablist">
-                    <li class="nav-item" >
+                    <li class="nav-item" role="presentation">
                         <a id="{{ systemTab }}"
                            href="#{{system }}"
                            class="nav-link active"
diff --git a/src/Oro/Bundle/EmailBundle/Tests/Behat/behat.yml b/src/Oro/Bundle/EmailBundle/Tests/Behat/behat.yml
@@ -187,7 +187,7 @@ oro_behat_extension:
     Ellipsis button:
       selector:
         type: xpath
-        locator: '//div[@class="emailtemplate-translatation oro-tabs tabbable"]//a[@role="button"]'
+        locator: '//div[@class="emailtemplate-translatation oro-tabs tabbable"]//a[@data-toggle="dropdown"]'
 
     Email Page Contexts:
       selector: 'div.activity-context-activity'
diff --git a/src/Oro/Bundle/FormBundle/Resources/config/oro/app.yml b/src/Oro/Bundle/FormBundle/Resources/config/oro/app.yml
@@ -29,6 +29,7 @@ oro_form:
                         - src
                         - width
                         - allow
+                        - title
                 table:
                     attributes:
                         - cellspacing
diff --git a/src/Oro/Bundle/FormBundle/Resources/public/default/scss/components/checkbox.scss b/src/Oro/Bundle/FormBundle/Resources/public/default/scss/components/checkbox.scss
@@ -14,7 +14,6 @@
     display: $checkbox-display;
     // To prevent shrink or grow checkbox if it's in flex container context
     flex: $checkbox-flex;
-    outline: $checkbox-outline;
 
     &::before {
         content: $checkbox-icon-content;
@@ -99,7 +98,6 @@
     display: $checkbox-display;
     // To prevent shrink or grow checkbox if it's in flex container context
     flex: $checkbox-flex;
-    outline: $checkbox-outline;
 
     &::before {
         content: $checkbox-radio-icon-content;
diff --git a/src/Oro/Bundle/FormBundle/Resources/public/default/scss/variables/checkbox-config.scss b/src/Oro/Bundle/FormBundle/Resources/public/default/scss/variables/checkbox-config.scss
@@ -14,7 +14,6 @@ $checkbox-color: get-var-color('neutral', 'white-100') !default;
 $checkbox-display: inline-grid !default;
 $checkbox-border-radius: 3px !default;
 $checkbox-flex: none !default;
-$checkbox-outline: none !default;
 
 $checkbox-icon-content: '' !default;
 $checkbox-icon-size: 16px !default;
diff --git a/src/Oro/Bundle/FormBundle/Tests/Functional/Provider/HtmlTagProviderTest.php b/src/Oro/Bundle/FormBundle/Tests/Functional/Provider/HtmlTagProviderTest.php
@@ -14,7 +14,7 @@ class HtmlTagProviderTest extends WebTestCase
      */
     private array $allowedElements = [
         '@[id|style|class]',
-        'iframe[allowfullscreen|frameborder|height|marginheight|marginwidth|name|scrolling|src|width|allow]',
+        'iframe[allowfullscreen|frameborder|height|marginheight|marginwidth|name|scrolling|src|width|allow|title]',
         'table[cellspacing|cellpadding|border|align|width]',
         'thead[align|valign]',
         'tbody[align|valign]',
diff --git a/src/Oro/Bundle/ImportExportBundle/Resources/views/ImportExport/widget/importValidateExportTemplate.html.twig b/src/Oro/Bundle/ImportExportBundle/Resources/views/ImportExport/widget/importValidateExportTemplate.html.twig
@@ -36,7 +36,7 @@
                     {% set isActiveEntity = (chosenEntityName and chosenEntityName == config.entityClass) or (not chosenEntityName and loop.index == 1) %}
 
                     {% if entityVisibility[config.entityClass] is not empty %}
-                    <li class="nav-item">
+                    <li class="nav-item" role="presentation">
                         <a id="importExport{{ shortEntityName ~ tabId }}-tab"
                            href="#importExport{{ shortEntityName ~ tabId }}"
                            class="nav-link{% if isActiveEntity %} active{% endif %}"
diff --git a/src/Oro/Bundle/LayoutBundle/Resources/config/block_types.yml b/src/Oro/Bundle/LayoutBundle/Resources/config/block_types.yml
@@ -63,6 +63,7 @@ services:
                         value: {required: true}
                         params: ~
                         titleIcon: {default: null}
+                        tagName: {default: 'h1'}
             - [setName, ['page_title']]
         tags:
              - { name: layout.block_type, alias: page_title }
diff --git a/src/Oro/Bundle/LocaleBundle/Resources/views/Form/fields.html.twig b/src/Oro/Bundle/LocaleBundle/Resources/views/Form/fields.html.twig
@@ -170,7 +170,7 @@
 {% endblock %}
 
 {% macro renderTabNavItem(form, isDefault, uniqid) %}
-    <li class="nav-item">
+    <li class="nav-item" role="presentation">
         <a id="{{ uniqid ~ '-tab'}}"
            class="nav-link {% if isDefault %}active{% endif %}"
            role="tab"
diff --git a/src/Oro/Bundle/UIBundle/Resources/public/default/scss/settings/_colors.scss b/src/Oro/Bundle/UIBundle/Resources/public/default/scss/settings/_colors.scss
@@ -2,7 +2,7 @@
 
 $color-palette: (
     'primary': (
-        'main': #0a7f8f,
+        'main': #057888,
         'hover': #075963,
         'active': #05444d,
         'disabled': #7d999e,
@@ -30,7 +30,7 @@ $color-palette: (
     'text': (
         'primary': #002434,
         'secondary': #45606e,
-        'disabled': #8e9da4,
+        'disabled': #676c74,
         'inverse': #fff,
         'inverse-70': rgb(255 255 255 / .7),
         'link': #1642e4,
diff --git a/src/Oro/Bundle/UIBundle/Resources/public/js/app/views/tab-item-view.js b/src/Oro/Bundle/UIBundle/Resources/public/js/app/views/tab-item-view.js
@@ -28,6 +28,10 @@ define(function(require, exports, module) {
             'click': 'onTabClick'
         },
 
+        attributes: {
+            role: 'presentation'
+        },
+
         /**
          * @inheritdoc
          */
@@ -50,12 +54,11 @@ define(function(require, exports, module) {
         },
 
         updateStates: function() {
+            const isActive = this.model.get('active');
+
             this.$el.toggleClass('changed', !!this.model.get('changed'));
-            const $tab = this.$('[role="tab"]');
-            if ($tab.attr('aria-selected') !== String(this.model.get('active'))) {
-                $tab.attr('aria-selected', this.model.get('active'));
-            }
-            if (this.model.get('active')) {
+
+            if (isActive) {
                 const tabPanel = this.model.get('controlTabPanel') || this.model.get('id');
                 $('#' + tabPanel).attr('aria-labelledby', this.model.get('uniqueId'));
             }
diff --git a/src/Oro/Bundle/UIBundle/Resources/public/js/extend/bootstrap/bootstrap-tooltip.js b/src/Oro/Bundle/UIBundle/Resources/public/js/extend/bootstrap/bootstrap-tooltip.js
@@ -6,7 +6,7 @@ define(function(require) {
     require('bootstrap-tooltip');
 
     const Tooltip = $.fn.tooltip.Constructor;
-    const original = _.pick(Tooltip.prototype, 'show', 'hide', '_getContainer');
+    const original = _.pick(Tooltip.prototype, 'show', 'hide', '_getContainer', '_getAttachment');
 
     const DATA_ATTRIBUTE_PATTERN = /^data-[\w-]*$/i;
     Tooltip.Default.whiteList['*'].push(DATA_ATTRIBUTE_PATTERN);
@@ -57,6 +57,11 @@ define(function(require) {
         return original.hide.apply(this, args);
     };
 
+    Tooltip.prototype._getAttachment = function(placement) {
+        const [base, align] = placement.split('-');
+        return [original._getAttachment.call(this, base), align].filter(item => item).join('-');
+    };
+
     Tooltip.prototype._getContainer = function(...args) {
         let modal;
         if (
diff --git a/src/Oro/Bundle/UIBundle/Resources/public/js/extend/select2.js b/src/Oro/Bundle/UIBundle/Resources/public/js/extend/select2.js
@@ -208,18 +208,22 @@ define(function(require) {
             $select2Element.attr('aria-required', true);
         }
 
+        const $select2Chosen = $select2Element.prev().find('.select2-chosen');
+
         if ($realSelect.attr('aria-label')) {
             $select2Element.attr('aria-label', $realSelect.attr('aria-label'));
+            $select2Chosen.attr('aria-label', $realSelect.attr('aria-label'));
         } else if ($realSelect.attr('aria-labelledby')) {
             $select2Element.attr('aria-labelledby', $realSelect.attr('aria-labelledby'));
+            $select2Chosen.attr('aria-labelledby', $realSelect.attr('aria-labelledby'));
         } else {
             const $relatedLabel = $('label[for="' + $select2Element.attr('id') + '"]');
 
             // Should add aria-label to the original element because after initialization the corresponding label
             // will have another form-related element to trick WAVE checker.
             if ($relatedLabel.length) {
                 $realSelect.attr('aria-label', $relatedLabel[0].childNodes[0].textContent);
-
+                $select2Chosen.attr('aria-label', $relatedLabel[0].childNodes[0].textContent);
                 return true;
             }
         }
@@ -348,7 +352,6 @@ define(function(require) {
         showSearch: function(original, showSearchInput) {
             original.call(this, showSearchInput);
             this.container.toggleClass('select2-container-with-searchbox', showSearchInput);
-            this.search.attr('aria-hidden', !showSearchInput);
         }
     };
 
@@ -608,7 +611,6 @@ define(function(require) {
                 }.bind(this));
 
             this.opts.element
-                .attr('aria-hidden', true)
                 .trigger($.Event('select2-init'));
 
             this.container
@@ -618,6 +620,11 @@ define(function(require) {
 
 
         prototype.destroy = function() {
+            // Returns back the original "for" attribute
+            if (this.focusser) {
+                $(`label[for="${this.focusser.attr('id')}"]`).attr('for', this.opts.element.attr('id'));
+            }
+
             toUnAssignAriaAttributesForSelect.call(this);
 
             if (this.propertyObserver) {
@@ -630,6 +637,7 @@ define(function(require) {
             // Remove previously auto generated name
             this.search.attr('name', null);
             delete this._activedescendantElements;
+
             destroy.call(this);
         };
 
diff --git a/src/Oro/Bundle/UIBundle/Resources/public/js/modal.js b/src/Oro/Bundle/UIBundle/Resources/public/js/modal.js
@@ -49,7 +49,8 @@ define(function(require, exports, module) {
             focusOk: true,
             okCloses: true,
             animate: false,
-            disposeOnHidden: true
+            disposeOnHidden: true,
+            fixHeightOnMobile: tools.isMobile()
         }
     }, config);
 
@@ -373,7 +374,7 @@ define(function(require, exports, module) {
                 this.triggerEventOnContent(EVENTS.HIDDEN);
             }.bind(this));
 
-            if (tools.isMobile()) {
+            if (this.defaults.fixHeightOnMobile) {
                 this._fixHeightForMobile();
                 $(window).on(EVENTS.RESIZE + this.eventNamespace(), this._fixHeightForMobile.bind(this));
             }
diff --git a/src/Oro/Bundle/UIBundle/Resources/public/templates/dropdown-control.html b/src/Oro/Bundle/UIBundle/Resources/public/templates/dropdown-control.html
@@ -1,9 +1,10 @@
 <% var togglerId = _.uniqueId('dropdown-') %>
-<li class="nav-item dropdown" data-dropdown>
-    <a href="#" role="button" id="<%- togglerId %>" class="nav-link dropdown-toggle" data-toggle="dropdown"
+<li class="nav-item dropdown" data-dropdown role="presentation">
+    <a href="#" id="<%- togglerId %>" class="nav-link dropdown-toggle" data-toggle="dropdown"
        data-dropdown-placeholder="<%- label %>"
        data-flip="true"
        data-position-fixed="true"
+       role="tab"
        aria-label="<%- label %>"
        aria-haspopup="true" aria-expanded="false"><span data-dropdown-label><%- label %></span></a>
     <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="<%- togglerId %>" data-dropdown-wrapper></ul>
diff --git a/src/Oro/Bundle/UIBundle/Resources/public/templates/select2/multiple-choice.html b/src/Oro/Bundle/UIBundle/Resources/public/templates/select2/multiple-choice.html
@@ -1,12 +1,12 @@
 <% var resultsId = _.uniqueId('select2-results-'); %>
 
-<div class="select2-container select2-container-multi">
-    <ul class="select2-choices"
-        role="combobox"
-        aria-haspopup="true"
-        aria-expanded="false"
-        aria-owns="<%- resultsId %>"
-    >
+<div class="select2-container select2-container-multi"
+     role="combobox"
+     aria-haspopup="true"
+     aria-expanded="false"
+     aria-owns="<%- resultsId %>"
+>
+    <ul class="select2-choices" role="presentation">
         <li class="select2-search-field" role="presentation">
             <input type="text"
                    autocomplete="off"
@@ -27,7 +27,6 @@
             aria-multiselectable="true"
             id="<%- resultsId %>"
             aria-expanded="false"
-            aria-hidden="true"
             tabindex="-1"
         ></ul>
     </div>
diff --git a/src/Oro/Bundle/UIBundle/Resources/public/templates/select2/single-choice.html b/src/Oro/Bundle/UIBundle/Resources/public/templates/select2/single-choice.html
@@ -3,12 +3,11 @@
 
 <div class="select2-container select2-container-single">
     <a class="select2-choice"
+       id="<%- chosenId %>"
        href="#"
        onclick="return false"
        tabindex="-1"
-       role="combobox"
        aria-owns="<%- resultsId %>"
-       aria-labelledby="<%- chosenId %>"
        aria-haspopup="listbox"
        aria-expanded="false"
     >
@@ -17,9 +16,9 @@
                   class="select2-chosen-extra <% if (obj.extraLabelClass) { %><%- obj.extraLabelClass %><% } %>"
             ><%- extraLabel %></span>
         <% } %>
-        <span id="<%- chosenId %>"
-              class="select2-chosen"
+        <span class="select2-chosen"
               role="textbox"
+              aria-labelledby="<%- chosenId %>"
               aria-readonly="true"
         >&nbsp</span>
         <abbr class="select2-search-choice-close"
@@ -30,6 +29,7 @@
     <input class="select2-focusser select2-offscreen"
            type="text"
            role="combobox"
+           aria-labelledby="<%- chosenId %>"
            aria-haspopup="true"
            aria-expanded="false"
            aria-owns="<%- resultsId %>"
diff --git a/src/Oro/Bundle/UIBundle/Resources/public/templates/tab-collection-item.html b/src/Oro/Bundle/UIBundle/Resources/public/templates/tab-collection-item.html
@@ -1,11 +1,11 @@
 <a  href="#"
     id="<%- uniqueId %>"
     class="<%- obj.templateClassName %><% if(obj.active) { %> active<% } %>"
-    role="tab"
     data-emulate-btn-press=""
     data-toggle="tab"
-    aria-controls="<% if(obj.controlTabPanel) { %><%- controlTabPanel %><% } else { %><%- id %><% } %>"
-    aria-selected="<% if(obj.active) { %>true<% } else { %>false<% } %>"
+    role="tab"
+    aria-controls="<%- uniqueId %>"
+    aria-selected="<%- !!obj.active %>"
     >
     <%- label %>
 </a>
diff --git a/src/Oro/Bundle/UIBundle/Resources/views/layouts/default/page/layout_mobile.yml b/src/Oro/Bundle/UIBundle/Resources/views/layouts/default/page/layout_mobile.yml
@@ -3,6 +3,6 @@ layout:
         - '@setOption':
             id: meta_viewport
             optionName: content
-            optionValue: 'width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover'
+            optionValue: 'width=device-width, initial-scale=1, maximum-scale=5, viewport-fit=cover'
 
     conditions: 'context["is_mobile"]'
diff --git a/src/Oro/Bundle/UIBundle/Resources/views/tab_panel.html.twig b/src/Oro/Bundle/UIBundle/Resources/views/tab_panel.html.twig
@@ -41,7 +41,7 @@
         <ul class="nav nav-tabs {{ extraClasses }}" role="tablist">
             {% for tab in tabs %}
                 {% set isActiveTab = activeTabAlias ? activeTabAlias == tab.alias : loop.index == 1 %}
-                <li class="nav-item">
+                <li class="nav-item" role="presentation">
                     {% set widgetOptions = {
                         'type': tab.widgetType|default('block'),
                         'event': 'shown.bs.tab',

Original file line number	Diff line number	Diff line change
`@@ -56,7 +56,7 @@`
`56`	`56`	`color: $datagrid-header-cell-link-color;`
`57`	`57`	`position: $datagrid-header-cell-link-position;`
`58`	`58`	`opacity: $datagrid-header-cell-link-opacity;`
`59`		`- text-transform: uppercase;`
	`59`	`+ text-transform: $datagrid-header-cell-link-text-transform;`
`60`	`60`	`}`
`61`	`61`
`62`	`62`	`&__link {`
Original file line number	Diff line number	Diff line change
`@@ -46,6 +46,8 @@ define(function(require) {`
`46`	`46`	`this.delegateEvents();`
`47`	`47`	`}`
`48`	`48`
	`49`	`+ this.$el.find('[type="checkbox"]').attr('aria-label', __('oro.datagrid.action.select_row'));`
	`50`	`+`
`49`	`51`	`return this;`
`50`	`52`	`},`
`51`	`53`
Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-<input type="checkbox" class="select-row-cell-input" data-role="select-row-cell"<% if (checked) { %> checked="checked"<% } %>>`
	`1`	`+<input type="checkbox" class="select-row-cell-input" data-role="select-row-cell"<% if (checked) { %> checked="checked"<% } %> aria-label="<%- _.__('oro.datagrid.action.select_row') %>">`