@oat-sa/tao-core-ui 1.49.2 → 1.49.6

package/dist/animable/absorbable/css/absorb.css

@@ -5,6 +5,7 @@ Usage:
 - linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
    first param - color, second - position. Also you can use px or other valid units for set position.
 */
+/* based on "visually-hidden" mixin in LDS for accessibility goals */
 /* Do not edit */
 .absorbable {
     z-index: 1;

package/dist/animable/pulsable/css/pulse.css

@@ -5,6 +5,7 @@ Usage:
 - linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
    first param - color, second - position. Also you can use px or other valid units for set position.
 */
+/* based on "visually-hidden" mixin in LDS for accessibility goals */
 /* Do not edit */
 .pulsable {
     z-index: 1;

package/dist/autocomplete/css/autocomplete.css

@@ -5,6 +5,7 @@ Usage:
 - linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
    first param - color, second - position. Also you can use px or other valid units for set position.
 */
+/* based on "visually-hidden" mixin in LDS for accessibility goals */
 /* Do not edit */
 .autocomplete-suggestions {
     border: 1px solid #ddd;

package/dist/badge/css/badge.css

@@ -5,6 +5,7 @@ Usage:
 - linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
    first param - color, second - position. Also you can use px or other valid units for set position.
 */
+/* based on "visually-hidden" mixin in LDS for accessibility goals */
 /* Do not edit */
 .badge-component {
     position: relative;

package/dist/breadcrumbs/css/breadcrumbs.css

@@ -5,6 +5,7 @@ Usage:
 - linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
    first param - color, second - position. Also you can use px or other valid units for set position.
 */
+/* based on "visually-hidden" mixin in LDS for accessibility goals */
 /* Do not edit */
 .breadcrumbs {
     background-color: #f3f1ef;

package/dist/bulkActionPopup/css/bulkActionPopup.css

@@ -5,6 +5,7 @@ Usage:
 - linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
    first param - color, second - position. Also you can use px or other valid units for set position.
 */
+/* based on "visually-hidden" mixin in LDS for accessibility goals */
 /* Do not edit */
 .bulk-action-popup {
     padding-bottom: 20px;

package/dist/calculator/css/calculator.css

@@ -5,6 +5,7 @@ Usage:
 - linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
    first param - color, second - position. Also you can use px or other valid units for set position.
 */
+/* based on "visually-hidden" mixin in LDS for accessibility goals */
 /* Do not edit */
 /* Style for the calculator component */
 /* font size mixin specific to calculator to use em instead of rem unit */

package/dist/class/css/selector.css

@@ -5,6 +5,7 @@ Usage:
 - linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
    first param - color, second - position. Also you can use px or other valid units for set position.
 */
+/* based on "visually-hidden" mixin in LDS for accessibility goals */
 /* Do not edit */
 .class-selector {
     padding: 5px;

package/dist/component/css/components.css

@@ -5,6 +5,7 @@ Usage:
 - linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
    first param - color, second - position. Also you can use px or other valid units for set position.
 */
+/* based on "visually-hidden" mixin in LDS for accessibility goals */
 /* Do not edit */
 /* Style of advanced components */
 /* toggler */

package/dist/component/css/windowComponent.css

@@ -5,6 +5,7 @@ Usage:
 - linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
    first param - color, second - position. Also you can use px or other valid units for set position.
 */
+/* based on "visually-hidden" mixin in LDS for accessibility goals */
 /* Do not edit */
 .window-component {
     display: flex;

package/dist/contextualPopup/css/contextualPopup.css

@@ -5,6 +5,7 @@ Usage:
 - linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
    first param - color, second - position. Also you can use px or other valid units for set position.
 */
+/* based on "visually-hidden" mixin in LDS for accessibility goals */
 /* Do not edit */
 .contextual-popup {
     position: absolute;

package/dist/dashboard/css/dashboard.css

@@ -5,6 +5,7 @@ Usage:
 - linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
    first param - color, second - position. Also you can use px or other valid units for set position.
 */
+/* based on "visually-hidden" mixin in LDS for accessibility goals */
 /* Do not edit */
 .readiness-dashboard-container .dashboard-header {
     margin-bottom: 25px;

package/dist/datalist/css/datalist.css

@@ -5,6 +5,7 @@ Usage:
 - linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
    first param - color, second - position. Also you can use px or other valid units for set position.
 */
+/* based on "visually-hidden" mixin in LDS for accessibility goals */
 /* Do not edit */
 .datalist {
     max-width: 1024px;

package/dist/datatable/css/datatable.css

@@ -5,6 +5,7 @@ Usage:
 - linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
    first param - color, second - position. Also you can use px or other valid units for set position.
 */
+/* based on "visually-hidden" mixin in LDS for accessibility goals */
 /* Do not edit */
 .datatable-wrapper .datatable-header {
     display: -ms-flex;

package/dist/dateRange/css/dateRange.css

@@ -5,6 +5,7 @@ Usage:
 - linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
    first param - color, second - position. Also you can use px or other valid units for set position.
 */
+/* based on "visually-hidden" mixin in LDS for accessibility goals */
 /* Do not edit */
 .daterange .datetime-picker {
     display: inline-block;

package/dist/datetime/css/picker.css

@@ -5,6 +5,7 @@ Usage:
 - linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
    first param - color, second - position. Also you can use px or other valid units for set position.
 */
+/* based on "visually-hidden" mixin in LDS for accessibility goals */
 /* Do not edit */
 .datetime-picker {
     /* flatpickr theme */

package/dist/destination/css/selector.css

@@ -5,6 +5,7 @@ Usage:
 - linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
    first param - color, second - position. Also you can use px or other valid units for set position.
 */
+/* based on "visually-hidden" mixin in LDS for accessibility goals */
 /* Do not edit */
 .destination-selector {
     position: relative;

package/dist/documentViewer/css/documentViewer.css

@@ -5,6 +5,7 @@ Usage:
 - linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
    first param - color, second - position. Also you can use px or other valid units for set position.
 */
+/* based on "visually-hidden" mixin in LDS for accessibility goals */
 /* Do not edit */
 .document-viewer .pdf-viewer {
     position: relative;

package/dist/dropdown/css/dropdown.css

@@ -5,6 +5,7 @@ Usage:
 - linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
    first param - color, second - position. Also you can use px or other valid units for set position.
 */
+/* based on "visually-hidden" mixin in LDS for accessibility goals */
 /* Do not edit */
 .dropdown-container {
     position: relative;

package/dist/dynamicComponent/css/dynamicComponent.css

@@ -5,6 +5,7 @@ Usage:
 - linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
    first param - color, second - position. Also you can use px or other valid units for set position.
 */
+/* based on "visually-hidden" mixin in LDS for accessibility goals */
 /* Do not edit */
 .dynamic-component-container {
     display: inline-block;

package/dist/form/css/dropdownForm.css

@@ -5,6 +5,7 @@ Usage:
 - linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
    first param - color, second - position. Also you can use px or other valid units for set position.
 */
+/* based on "visually-hidden" mixin in LDS for accessibility goals */
 /* Do not edit */
 .dropdown-form {
     position: relative;

package/dist/form/css/form.css

@@ -5,6 +5,7 @@ Usage:
 - linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
    first param - color, second - position. Also you can use px or other valid units for set position.
 */
+/* based on "visually-hidden" mixin in LDS for accessibility goals */
 /* Do not edit */
 .form-component {
     border: 1px solid #ddd;

package/dist/form/validator/css/validator.css

@@ -5,6 +5,7 @@ Usage:
 - linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
    first param - color, second - position. Also you can use px or other valid units for set position.
 */
+/* based on "visually-hidden" mixin in LDS for accessibility goals */
 /* Do not edit */
 .form-validator {
     color: #ba122b;

package/dist/form/widget/css/widget.css

@@ -5,6 +5,7 @@ Usage:
 - linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
    first param - color, second - position. Also you can use px or other valid units for set position.
 */
+/* based on "visually-hidden" mixin in LDS for accessibility goals */
 /* Do not edit */
 .form-widget {
     margin: 10px 0;

package/dist/generis/form/css/form.css

@@ -5,6 +5,7 @@ Usage:
 - linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
    first param - color, second - position. Also you can use px or other valid units for set position.
 */
+/* based on "visually-hidden" mixin in LDS for accessibility goals */
 /* Do not edit */
 .ui-generis-form {
     border: 1px solid #ddd;

package/dist/generis/validator/css/validator.css

@@ -5,6 +5,7 @@ Usage:
 - linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
    first param - color, second - position. Also you can use px or other valid units for set position.
 */
+/* based on "visually-hidden" mixin in LDS for accessibility goals */
 /* Do not edit */
 .ui-generis-validator {
     color: #ba122b;

package/dist/generis/widget/css/widget.css

@@ -5,6 +5,7 @@ Usage:
 - linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
    first param - color, second - position. Also you can use px or other valid units for set position.
 */
+/* based on "visually-hidden" mixin in LDS for accessibility goals */
 /* Do not edit */
 .ui-generis-widget {
     margin: 10px 0px;

package/dist/image/ImgStateActive/initHelper.js

@@ -254,7 +254,7 @@ define(['exports', 'jquery', 'lodash', 'i18n', 'core/mimetype', 'ui/mediaEditor/
                 confirmBox = $('.change-alt-modal-feedback', $form);
                 cancel = confirmBox.find('.cancel');
                 save = confirmBox.find('.save');
-                $('.alt-text', confirmBox).html("\"".concat($alt.val(), "\"<br>with<br>\"").concat(alt, "\" ?"));
+                $('.alt-text', confirmBox).html("\"".concat($alt.val(), "\"<br>").concat(__('with'), "<br>\"").concat(alt, "\" ?"));
                 confirmBox.modal({
                   width: 500
                 });

package/dist/image/ImgStateActive.js

@@ -255,7 +255,7 @@ define(['jquery', 'nouislider', 'ui/resourcemgr', 'ui/tooltip', 'lodash', 'modul
                 confirmBox = $('.change-alt-modal-feedback', $form);
                 cancel = confirmBox.find('.cancel');
                 save = confirmBox.find('.save');
-                $('.alt-text', confirmBox).html("\"".concat($alt.val(), "\"<br>with<br>\"").concat(alt, "\" ?"));
+                $('.alt-text', confirmBox).html("\"".concat($alt.val(), "\"<br>").concat(__('with'), "<br>\"").concat(alt, "\" ?"));
                 confirmBox.modal({
                   width: 500
                 });

package/dist/itemButtonList/css/item-button-list.css

@@ -22,6 +22,7 @@ Usage:
 - linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
    first param - color, second - position. Also you can use px or other valid units for set position.
 */
+/* based on "visually-hidden" mixin in LDS for accessibility goals */
 /* Do not edit */
 .buttonlist-items {
     display: flex;

package/dist/listbox/css/listbox.css

@@ -5,6 +5,7 @@ Usage:
 - linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
    first param - color, second - position. Also you can use px or other valid units for set position.
 */
+/* based on "visually-hidden" mixin in LDS for accessibility goals */
 /* Do not edit */
 .listbox {
     max-width: 1024px;

package/dist/loadingButton/css/button.css

@@ -5,6 +5,7 @@ Usage:
 - linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
    first param - color, second - position. Also you can use px or other valid units for set position.
 */
+/* based on "visually-hidden" mixin in LDS for accessibility goals */
 /* Do not edit */
 .loading-button [class^="icon-"], .loading-button [class*=" icon-"] {
     padding: 0;

package/dist/maths/calculator/css/calculator.css

@@ -6,6 +6,7 @@ Usage:
 - linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
    first param - color, second - position. Also you can use px or other valid units for set position.
 */
+/* based on "visually-hidden" mixin in LDS for accessibility goals */
 /* Do not edit */
 /* font size mixin specific to calculator to use em instead of rem unit */
 .calculator {

package/dist/mediaplayer/css/player.css

@@ -5,6 +5,7 @@ Usage:
 - linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
    first param - color, second - position. Also you can use px or other valid units for set position.
 */
+/* based on "visually-hidden" mixin in LDS for accessibility goals */
 /* Do not edit */
 .mediaplayer {
     position: relative;

package/dist/pagination/css/pagination.css

@@ -5,6 +5,7 @@ Usage:
 - linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
    first param - color, second - position. Also you can use px or other valid units for set position.
 */
+/* based on "visually-hidden" mixin in LDS for accessibility goals */
 /* Do not edit */
 .pagination .pages {
     display: -ms-flex;

package/dist/resource/css/selector.css

@@ -5,6 +5,7 @@ Usage:
 - linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
    first param - color, second - position. Also you can use px or other valid units for set position.
 */
+/* based on "visually-hidden" mixin in LDS for accessibility goals */
 /* Do not edit */
 .resource-selector {
     position: relative;

package/dist/resourcemgr/css/resourcemgr.css

@@ -5,6 +5,7 @@ Usage:
 - linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
    first param - color, second - position. Also you can use px or other valid units for set position.
 */
+/* based on "visually-hidden" mixin in LDS for accessibility goals */
 /* Do not edit */
 /* tooltip */
 .resourcemgr {

package/dist/searchModal/advancedSearch.js

@@ -1,8 +1,7 @@
-define(['jquery', 'lodash', 'context', 'handlebars', 'i18n', 'lib/dompurify/purify', 'css!ui/searchModal/css/advancedSearch.css', 'ui/component', 'ui/modal', 'ui/datatable', 'select2', 'util/url', 'core/dataProvider/request'], function ($$1, _, context, Handlebars, __, DOMPurify, advancedSearch_css, component, modal, datatable, select2, urlUtil, request) { 'use strict';
+define(['jquery', 'lodash', 'handlebars', 'i18n', 'lib/dompurify/purify', 'css!ui/searchModal/css/advancedSearch.css', 'ui/component', 'ui/modal', 'ui/datatable', 'select2', 'util/url', 'core/dataProvider/request'], function ($$1, _, Handlebars, __, DOMPurify, advancedSearch_css, component, modal, datatable, select2, urlUtil, request) { 'use strict';
 
   $$1 = $$1 && Object.prototype.hasOwnProperty.call($$1, 'default') ? $$1['default'] : $$1;
   _ = _ && Object.prototype.hasOwnProperty.call(_, 'default') ? _['default'] : _;
-  context = context && Object.prototype.hasOwnProperty.call(context, 'default') ? context['default'] : context;
   Handlebars = Handlebars && Object.prototype.hasOwnProperty.call(Handlebars, 'default') ? Handlebars['default'] : Handlebars;
   __ = __ && Object.prototype.hasOwnProperty.call(__, 'default') ? __['default'] : __;
   DOMPurify = DOMPurify && Object.prototype.hasOwnProperty.call(DOMPurify, 'default') ? DOMPurify['default'] : DOMPurify;
@@ -339,6 +338,7 @@ define(['jquery', 'lodash', 'context', 'handlebars', 'i18n', 'lib/dompurify/puri
    * @param {object} config
    * @param {object} config.renderTo - DOM element where component will be rendered to
    * @param {string} config.advancedCriteria - advanced criteria to be set on component creation
+   * @param {string} config.rootClassUri - rootClassUri to check for whitelist sections
    * @returns {advancedSearch}
    */
 
@@ -478,7 +478,7 @@ define(['jquery', 'lodash', 'context', 'handlebars', 'i18n', 'lib/dompurify/puri
     function initAddCriteriaSelector() {
       var route = urlUtil.route('status', 'AdvancedSearch', 'tao');
       return request(route).then(function (response) {
-        if (!response.enabled || context.shownStructure === 'results') {
+        if (!response.enabled || response.whitelist.includes(config.rootClassUri)) {
           isAdvancedSearchStatusEnabled = false;
           return;
         }

package/dist/searchModal/css/advancedSearch.css

@@ -5,6 +5,7 @@ Usage:
 - linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
    first param - color, second - position. Also you can use px or other valid units for set position.
 */
+/* based on "visually-hidden" mixin in LDS for accessibility goals */
 /* Do not edit */
 .advanced-search-container {
     flex: 1 1 auto;

package/dist/searchModal/css/searchModal.css

@@ -5,6 +5,7 @@ Usage:
 - linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
    first param - color, second - position. Also you can use px or other valid units for set position.
 */
+/* based on "visually-hidden" mixin in LDS for accessibility goals */
 /* Do not edit */
 .section-container {
     top: 0 !important;

package/dist/searchModal.js

@@ -246,6 +246,7 @@ define(['jquery', 'lodash', 'i18n', 'context', 'handlebars', 'lib/dompurify/puri
     var rootClassUri = config.rootClassUri;
     /**
      * Creates search modal, inits template selectors, inits search store, and once is created triggers initial search
+     * rootClassUri is sent to advancedSearch factory for disabling in whitelisted sections
      */
 
     function renderModal() {
@@ -254,7 +255,8 @@ define(['jquery', 'lodash', 'i18n', 'context', 'handlebars', 'lib/dompurify/puri
       initUiSelectors();
       advancedSearch = advancedSearchFactory({
         renderTo: $$1('.filters-container', $container),
-        advancedCriteria: instance.config.criterias.advancedCriteria
+        advancedCriteria: instance.config.criterias.advancedCriteria,
+        rootClassUri: rootClassUri
       });
       promises.push(initClassFilter());
       promises.push(initSearchStore());

package/dist/switch/css/switch.css

@@ -5,6 +5,7 @@ Usage:
 - linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
    first param - color, second - position. Also you can use px or other valid units for set position.
 */
+/* based on "visually-hidden" mixin in LDS for accessibility goals */
 /* Do not edit */
 .switch {
     display: inline-block;

package/dist/tabs/css/tabs.css

@@ -5,6 +5,7 @@ Usage:
 - linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
    first param - color, second - position. Also you can use px or other valid units for set position.
 */
+/* based on "visually-hidden" mixin in LDS for accessibility goals */
 /* Do not edit */
 /** Styles for a group of buttons to be glued together into a tabs-like bar
  *  Intended use:

package/dist/taskQueue/css/taskQueue.css

@@ -5,6 +5,7 @@ Usage:
 - linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
    first param - color, second - position. Also you can use px or other valid units for set position.
 */
+/* based on "visually-hidden" mixin in LDS for accessibility goals */
 /* Do not edit */
 .task-queue-status {
     height: 100%;

package/dist/taskQueueButton/css/taskable.css

@@ -5,6 +5,7 @@ Usage:
 - linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
    first param - color, second - position. Also you can use px or other valid units for set position.
 */
+/* based on "visually-hidden" mixin in LDS for accessibility goals */
 /* Do not edit */
 div.task-report-container {
     width: 100%;

package/dist/taskQueueButton/css/treeButton.css

@@ -5,6 +5,7 @@ Usage:
 - linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
    first param - color, second - position. Also you can use px or other valid units for set position.
 */
+/* based on "visually-hidden" mixin in LDS for accessibility goals */
 /* Do not edit */
 .tree-button-component .spinner-icon {
     font-size: 17px;

package/dist/tristateCheckboxGroup/css/tristateCheckboxGroup.css

@@ -5,6 +5,7 @@ Usage:
 - linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
    first param - color, second - position. Also you can use px or other valid units for set position.
 */
+/* based on "visually-hidden" mixin in LDS for accessibility goals */
 /* Do not edit */
 .tristate-checkbox-group li label input:indeterminate[type="checkbox"] ~ .icon-checkbox::before {
     content: "\e901";

package/dist/waitingDialog/css/waitingDialog.css

@@ -5,6 +5,7 @@ Usage:
 - linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
    first param - color, second - position. Also you can use px or other valid units for set position.
 */
+/* based on "visually-hidden" mixin in LDS for accessibility goals */
 /* Do not edit */
 .modal.has-secondary .message {
     font-weight: bold;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@oat-sa/tao-core-ui",
-    "version": "1.49.2",
+    "version": "1.49.6",
     "displayName": "TAO Core UI",
     "description": "UI libraries of TAO",
     "scripts": {
@@ -51,7 +51,7 @@
         "@oat-sa/rollup-plugin-wildcard-external": "^0.1.0",
         "@oat-sa/tao-core-libs": "^0.4.4",
         "@oat-sa/tao-core-sdk": "^1.8.1",
-        "@oat-sa/tao-core-shared-libs": "^1.0.4",
+        "@oat-sa/tao-core-shared-libs": "^1.0.5",
         "@oat-sa/tao-qunit-testrunner": "^1.0.3",
         "async": "^0.2.10",
         "autoprefixer": "^9.5.1",

package/scss/inc/_forms.scss

@@ -410,11 +410,10 @@ label {
             left: -1em;
         }
     }
+
     input[type="radio"],
     input[type="checkbox"] {
-        visibility: hidden;
-        pointer-events: none;
-        position: absolute;
+        @include visuallyHidden;
 
         &:focus ~ [class^="icon-"],
         &:focus ~ [class*=" icon-"],

package/scss/inc/_functions.scss

@@ -270,3 +270,14 @@ Usage:
 @mixin disableSelect() {
     @include vendor-prefix(user-select, none, property);
 }
+
+/* based on "visually-hidden" mixin in LDS for accessibility goals */
+@mixin visuallyHidden() {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(1px, 1px, 1px, 1px);
+    margin: 0;
+    padding: 0;
+}

package/scss/inc/_grid.scss

@@ -17,7 +17,7 @@
     overflow-x: hidden; 
 }
 
-.grid-row, .fixed-grid-row {
+.grid-row, .fixed-grid-row, .colrow {
     @extend .clearfix;
     width: widthPerc(852, 840);
 }

package/src/animable/absorbable/css/absorb.css

@@ -5,6 +5,7 @@ Usage:
 - linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
    first param - color, second - position. Also you can use px or other valid units for set position.
 */
+/* based on "visually-hidden" mixin in LDS for accessibility goals */
 /* Do not edit */
 .absorbable {
     z-index: 1;

package/src/animable/pulsable/css/pulse.css

@@ -5,6 +5,7 @@ Usage:
 - linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
    first param - color, second - position. Also you can use px or other valid units for set position.
 */
+/* based on "visually-hidden" mixin in LDS for accessibility goals */
 /* Do not edit */
 .pulsable {
     z-index: 1;

package/src/autocomplete/css/autocomplete.css

@@ -5,6 +5,7 @@ Usage:
 - linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
    first param - color, second - position. Also you can use px or other valid units for set position.
 */
+/* based on "visually-hidden" mixin in LDS for accessibility goals */
 /* Do not edit */
 .autocomplete-suggestions {
     border: 1px solid #ddd;

package/src/badge/css/badge.css

@@ -5,6 +5,7 @@ Usage:
 - linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
    first param - color, second - position. Also you can use px or other valid units for set position.
 */
+/* based on "visually-hidden" mixin in LDS for accessibility goals */
 /* Do not edit */
 .badge-component {
     position: relative;

package/src/breadcrumbs/css/breadcrumbs.css

@@ -5,6 +5,7 @@ Usage:
 - linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
    first param - color, second - position. Also you can use px or other valid units for set position.
 */
+/* based on "visually-hidden" mixin in LDS for accessibility goals */
 /* Do not edit */
 .breadcrumbs {
     background-color: #f3f1ef;

package/src/bulkActionPopup/css/bulkActionPopup.css

@@ -5,6 +5,7 @@ Usage:
 - linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
    first param - color, second - position. Also you can use px or other valid units for set position.
 */
+/* based on "visually-hidden" mixin in LDS for accessibility goals */
 /* Do not edit */
 .bulk-action-popup {
     padding-bottom: 20px;

package/src/calculator/css/calculator.css

@@ -5,6 +5,7 @@ Usage:
 - linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
    first param - color, second - position. Also you can use px or other valid units for set position.
 */
+/* based on "visually-hidden" mixin in LDS for accessibility goals */
 /* Do not edit */
 /* Style for the calculator component */
 /* font size mixin specific to calculator to use em instead of rem unit */

package/src/class/css/selector.css

@@ -5,6 +5,7 @@ Usage:
 - linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
    first param - color, second - position. Also you can use px or other valid units for set position.
 */
+/* based on "visually-hidden" mixin in LDS for accessibility goals */
 /* Do not edit */
 .class-selector {
     padding: 5px;

package/src/component/css/components.css

@@ -5,6 +5,7 @@ Usage:
 - linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
    first param - color, second - position. Also you can use px or other valid units for set position.
 */
+/* based on "visually-hidden" mixin in LDS for accessibility goals */
 /* Do not edit */
 /* Style of advanced components */
 /* toggler */