📦 Shared UI v2.12.12

CHANGELOG.md

@@ -2,6 +2,38 @@
 
 All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org/) for commit guidelines.
 
+## [2.12.12](https://github.com/wpmudev/shared-ui/compare/v2.11.10...v2.12.12) (2022-09-21)
+
+#### 🚀 Improvements
+
+- **fix(accordion):** Focus design improvement when content opens. [#533](https://github.com/wpmudev/shared-ui/pull/533) ([SUI-500](https://incsub.atlassian.net/browse/SUI-500)) ([@creador-dev](https://github.com/creador-dev))
+
+#### 🐛 Bug Fixes
+
+- **fix(accordions):** Content overflows when hidden. [#520](https://github.com/wpmudev/shared-ui/pull/520) ([SUI-492](https://incsub.atlassian.net/browse/SUI-492)) ([@creador-dev](https://github.com/creador-dev))
+- **fix(insert-variables):** Removed first item as selected. [#526](https://github.com/wpmudev/shared-ui/pull/526) ([SUI-499](https://incsub.atlassian.net/browse/SUI-499)) ([@creador-dev](https://github.com/creador-dev))
+- **fix(variables):** Make fonts GDPR compliant. [#534](https://github.com/wpmudev/shared-ui/pull/534) ([SUI-512](https://incsub.atlassian.net/browse/SUI-512)) ([@iamleigh](https://github.com/iamleigh))
+
+#### ♿️ Accessibility
+
+- **aria(dropdown):** Red buttons don't change color. [#486](https://github.com/wpmudev/shared-ui/pull/486) ([SUI-316](https://incsub.atlassian.net/browse/SUI-316)) ([@creador-dev](https://github.com/creador-dev))
+- **aria(side-tabs):** Tabs not visible in high-contrast mode. [#514](https://github.com/wpmudev/shared-ui/pull/514) ([SUI-460](https://incsub.atlassian.net/browse/SUI-460)) ([@creador-dev](https://github.com/creador-dev))
+- **aria(icon):** Required icon in high-contrast mode. [#516](https://github.com/wpmudev/shared-ui/pull/516) ([SUI-462](https://incsub.atlassian.net/browse/SUI-462)) ([@creador-dev](https://github.com/creador-dev))
+- **aria(calendar):** Date picker in high-contrast mode. [#517](https://github.com/wpmudev/shared-ui/pull/517) ([SUI-463](https://incsub.atlassian.net/browse/SUI-463)) ([@creador-dev](https://github.com/creador-dev))
+- **aria(select2):** Improve element in high-contrast mode. [#518](https://github.com/wpmudev/shared-ui/pull/518) ([SUI-464](https://incsub.atlassian.net/browse/SUI-464)) ([@creador-dev](https://github.com/creador-dev))
+- **aria(icons):** RTL mode switch icons. [#454](https://github.com/wpmudev/shared-ui/pull/454) ([SUI-31](https://incsub.atlassian.net/browse/SUI-31)) ([@creador-dev](https://github.com/creador-dev))
+- **aria(progress-bar):** Make element properly accessible. [#527](https://github.com/wpmudev/shared-ui/pull/527) ([SUI-11](https://incsub.atlassian.net/browse/SUI-11)) ([@creador-dev](https://github.com/creador-dev))
+- **aria(select2):** Screen readers improvement. [#528](https://github.com/wpmudev/shared-ui/pull/528) ([SUI-13](https://incsub.atlassian.net/browse/SUI-13)) ([@creador-dev](https://github.com/creador-dev))
+
+#### 📝 Documentation
+
+- **docs(box):** Box header title documentation updated. [#433](https://github.com/wpmudev/shared-ui/pull/433) ([SUI-24](https://incsub.atlassian.net/browse/SUI-24)) ([@creador-dev](https://github.com/creador-dev))
+
+#### Committers: 2
+
+- Leighton Sapir ([@iamleigh](https://github.com/iamleigh))
+- Pawan Kumar ([@creador-dev](https://github.com/creador-dev))
+
 ## [2.12.11](https://github.com/wpmudev/shared-ui/compare/v2.12.10...v2.12.11) (2022-08-08)
 
 #### 🐛 Bug Fixes

dist/css/shared-ui.css

@@ -4,7 +4,7 @@
  * Licensed under GPL v3 (http://www.gnu.org/licenses/gpl-3.0.html)
  */
 @charset "UTF-8";
-@import url("https://fonts.googleapis.com/css?family=Roboto:400,500,700");
+@import url("https://fonts.bunny.net/css?family=Roboto:400,500,700");
 .sui-2-12-11 .sui-wrap .sui-multistrings-aria, .sui-2-12-11 .sui-wrap .sui-tree li[role=treeitem] > .sui-tree-node > label.sui-node-checkbox input,
 .sui-2-12-11 .sui-wrap .sui-tree li[role=treeitem] > .sui-tree-node > label.sui-node-checkbox span:not([aria-hidden]), .sui-2-12-11 .sui-wrap .sui-side-tabs > [data-tabs] > * input,
 .sui-2-12-11 .sui-wrap .sui-side-tabs > [data-tabs] .sui-tab-item input,
@@ -638,6 +638,7 @@
   display: inline-block;
   color: #888888;
   opacity: 1;
+  direction: ltr;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -8204,6 +8205,29 @@
   color: #333333;
   border-bottom-color: #333333;
 }
+@media (forced-colors: active) {
+  .sui-2-12-11 .sui-wrap .sui-tabs:not(.sui-side-tabs) > [data-tabs] > *,
+.sui-2-12-11 .sui-wrap .sui-tabs:not(.sui-side-tabs) > [data-tabs] .sui-tab-item,
+.sui-2-12-11 .sui-wrap .sui-tabs:not(.sui-side-tabs) > .sui-tabs-menu > *,
+.sui-2-12-11 .sui-wrap .sui-tabs:not(.sui-side-tabs) > .sui-tabs-menu .sui-tab-item {
+    forced-color-adjust: none;
+  }
+}
+@media (forced-colors: active) and (prefers-color-scheme: dark), (-ms-high-contrast: white-on-black) {
+  .sui-2-12-11 .sui-wrap .sui-tabs:not(.sui-side-tabs) > [data-tabs] > *,
+.sui-2-12-11 .sui-wrap .sui-tabs:not(.sui-side-tabs) > [data-tabs] .sui-tab-item,
+.sui-2-12-11 .sui-wrap .sui-tabs:not(.sui-side-tabs) > .sui-tabs-menu > *,
+.sui-2-12-11 .sui-wrap .sui-tabs:not(.sui-side-tabs) > .sui-tabs-menu .sui-tab-item {
+    color: #FAFAFA !important;
+  }
+  .sui-2-12-11 .sui-wrap .sui-tabs:not(.sui-side-tabs) > [data-tabs] > *.active,
+.sui-2-12-11 .sui-wrap .sui-tabs:not(.sui-side-tabs) > [data-tabs] .sui-tab-item.active,
+.sui-2-12-11 .sui-wrap .sui-tabs:not(.sui-side-tabs) > .sui-tabs-menu > *.active,
+.sui-2-12-11 .sui-wrap .sui-tabs:not(.sui-side-tabs) > .sui-tabs-menu .sui-tab-item.active {
+    color: #FF7E41 !important;
+    border-bottom: 2px solid #FF7E41 !important;
+  }
+}
 .sui-2-12-11 .sui-wrap .sui-tabs:not(.sui-side-tabs) > [data-panes] > *,
 .sui-2-12-11 .sui-wrap .sui-tabs:not(.sui-side-tabs) > [data-panes] > .sui-tab-content,
 .sui-2-12-11 .sui-wrap .sui-tabs:not(.sui-side-tabs) > .sui-tabs-content > *,
@@ -8391,6 +8415,30 @@
   background-color: #E1F6FF;
   color: #17A8E3;
 }
+@media (forced-colors: active) {
+  .sui-2-12-11 .sui-wrap .sui-side-tabs > [data-tabs] > *,
+.sui-2-12-11 .sui-wrap .sui-side-tabs > [data-tabs] .sui-tab-item,
+.sui-2-12-11 .sui-wrap .sui-side-tabs > .sui-tabs-menu > *,
+.sui-2-12-11 .sui-wrap .sui-side-tabs > .sui-tabs-menu .sui-tab-item {
+    forced-color-adjust: none;
+  }
+}
+@media (forced-colors: active) and (prefers-color-scheme: dark), (-ms-high-contrast: white-on-black) {
+  .sui-2-12-11 .sui-wrap .sui-side-tabs > [data-tabs] > *,
+.sui-2-12-11 .sui-wrap .sui-side-tabs > [data-tabs] .sui-tab-item,
+.sui-2-12-11 .sui-wrap .sui-side-tabs > .sui-tabs-menu > *,
+.sui-2-12-11 .sui-wrap .sui-side-tabs > .sui-tabs-menu .sui-tab-item {
+    background-color: #888888 !important;
+    color: #FAFAFA !important;
+  }
+  .sui-2-12-11 .sui-wrap .sui-side-tabs > [data-tabs] > *.active,
+.sui-2-12-11 .sui-wrap .sui-side-tabs > [data-tabs] .sui-tab-item.active,
+.sui-2-12-11 .sui-wrap .sui-side-tabs > .sui-tabs-menu > *.active,
+.sui-2-12-11 .sui-wrap .sui-side-tabs > .sui-tabs-menu .sui-tab-item.active {
+    background-color: #333333 !important;
+    color: #FF7E41 !important;
+  }
+}
 .sui-2-12-11 .sui-wrap .sui-side-tabs > [data-panes] > *,
 .sui-2-12-11 .sui-wrap .sui-side-tabs > [data-panes] > .sui-tab-content,
 .sui-2-12-11 .sui-wrap .sui-side-tabs > .sui-tabs-content > *,
@@ -10466,6 +10514,11 @@
   font-weight: 700;
   margin: 5px 0;
 }
+.sui-2-12-11 .sui-wrap .sui-accordion .sui-accordion-item-body .sui-box:focus,
+.sui-2-12-11 .sui-wrap .sui-accordion .sui-accordion-item-content .sui-box:focus {
+  border: 2px solid #17A8E3;
+  border-radius: 0;
+}
 .sui-2-12-11 .sui-wrap .sui-accordion:not(.sui-builder-fields) .sui-accordion-header,
 .sui-2-12-11 .sui-wrap .sui-accordion:not(.sui-builder-fields) .sui-accordion-item-header,
 .sui-2-12-11 .sui-wrap .sui-accordion:not(.sui-builder-fields) .sui-accordion-footer, .sui-2-12-11 .sui-wrap .sui-accordion-block:not(.sui-builder-fields) .sui-accordion-header,
@@ -10985,6 +11038,8 @@
   position: absolute;
   z-index: -1;
   background-color: #F8F8F8;
+  height: 0;
+  overflow: hidden;
 }
 .sui-2-12-11 .sui-wrap .sui-accordion.sui-table > tbody > .sui-accordion-item-content th, .sui-2-12-11 .sui-wrap .sui-accordion.sui-table > tbody > .sui-accordion-item-content td {
   padding: 0 20px 20px;
@@ -14541,6 +14596,19 @@ html.sui-has-overlay {
   text-decoration: line-through;
 }
 
+.sui-2-12-11.sui-elements-accessible #ui-datepicker-div.sui-calendar .ui-datepicker-calendar tbody tr td a.ui-state-default.ui-state-active {
+  background-color: #333333;
+  color: #FFFFFF;
+}
+.sui-2-12-11.sui-elements-accessible #ui-datepicker-div.sui-calendar .ui-datepicker-calendar tbody tr td.ui-datepicker-today a.ui-state-default {
+  background-color: #DDDDDD;
+  color: #000000;
+}
+.sui-2-12-11.sui-elements-accessible #ui-datepicker-div.sui-calendar .ui-datepicker-calendar tbody tr td.ui-datepicker-today a.ui-state-default.ui-state-active {
+  background-color: #333333;
+  color: #FFFFFF;
+}
+
 .sui-2-12-11 .daterangepicker {
   width: auto;
   max-width: 100%;
@@ -14794,6 +14862,26 @@ html.sui-has-overlay {
   pointer-events: none;
 }
 
+.sui-2-12-11.sui-elements-accessible .daterangepicker .drp-calendar .table-condensed tbody tr td.available:not(.off).today {
+  background-color: #DDDDDD;
+  color: #000000;
+}
+.sui-2-12-11.sui-elements-accessible .daterangepicker .drp-calendar .table-condensed tbody tr td.available:not(.off).start-date, .sui-2-12-11.sui-elements-accessible .daterangepicker .drp-calendar .table-condensed tbody tr td.available:not(.off).end-date {
+  background-color: #333333;
+  color: #FFFFFF;
+}
+.sui-2-12-11.sui-elements-accessible .daterangepicker .drp-calendar .table-condensed tbody tr td.available:not(.off).in-range:not(.end-date) {
+  color: #000000;
+  background-color: #F8F8F8;
+}
+.sui-2-12-11.sui-elements-accessible .daterangepicker.show-ranges .ranges ul li:hover, .sui-2-12-11.sui-elements-accessible .daterangepicker.show-ranges .ranges ul li:focus {
+  background-color: #DDDDDD;
+}
+.sui-2-12-11.sui-elements-accessible .daterangepicker.show-ranges .ranges ul li.active {
+  background-color: #333333;
+  color: #FFFFFF;
+}
+
 .sui-2-12-11 .sui-wrap .sui-hidden {
   display: none;
 }
@@ -15105,6 +15193,10 @@ html.sui-has-overlay {
     display: none !important;
   }
 }
+.sui-2-12-11 .sui-wrap.sui-color-accessible .sui-error {
+  color: #333333;
+}
+
 /**
 WP Admin Notices
 
@@ -17230,11 +17322,20 @@ This is used to give admin notices that are loaded outside of the .wrap but insi
 .sui-2-12-11 .sui-wrap.sui-color-accessible .sui-grade-f svg circle:last-child {
   stroke: #000000;
 }
-.sui-2-12-11 .sui-wrap.sui-color-accessible .sui-dropdown ul li {
+.sui-2-12-11 .sui-wrap.sui-color-accessible .sui-dropdown ul li,
+.sui-2-12-11 .sui-wrap.sui-color-accessible .sui-dropdown ul li button,
+.sui-2-12-11 .sui-wrap.sui-color-accessible .sui-dropdown ul li a {
   color: #000000;
 }
-.sui-2-12-11 .sui-wrap.sui-color-accessible .sui-dropdown ul li:hover {
+.sui-2-12-11 .sui-wrap.sui-color-accessible .sui-dropdown ul li:hover, .sui-2-12-11 .sui-wrap.sui-color-accessible .sui-dropdown ul li:focus, .sui-2-12-11 .sui-wrap.sui-color-accessible .sui-dropdown ul li:active,
+.sui-2-12-11 .sui-wrap.sui-color-accessible .sui-dropdown ul li button:hover,
+.sui-2-12-11 .sui-wrap.sui-color-accessible .sui-dropdown ul li button:focus,
+.sui-2-12-11 .sui-wrap.sui-color-accessible .sui-dropdown ul li button:active,
+.sui-2-12-11 .sui-wrap.sui-color-accessible .sui-dropdown ul li a:hover,
+.sui-2-12-11 .sui-wrap.sui-color-accessible .sui-dropdown ul li a:focus,
+.sui-2-12-11 .sui-wrap.sui-color-accessible .sui-dropdown ul li a:active {
   color: #000000;
+  background-color: rgba(51, 51, 51, 0.05);
 }
 .sui-2-12-11 .sui-wrap.sui-color-accessible .sui-button-icon:not(.sui-button),
 .sui-2-12-11 .sui-wrap.sui-color-accessible .sui-button {
@@ -17360,13 +17461,13 @@ This is used to give admin notices that are loaded outside of the .wrap but insi
   color: #000000;
 }
 
-.sui-2-12-11.sui-select-accessible .sui-select .sui-select-dropdown {
+.sui-2-12-11.sui-elements-accessible .sui-select .sui-select-dropdown {
   border-color: #000000 !important;
 }
-.sui-2-12-11.sui-select-accessible .select2-results__option {
+.sui-2-12-11.sui-elements-accessible .select2-results__option {
   color: #000000 !important;
 }
-.sui-2-12-11.sui-select-accessible .select2-results__option--selected {
+.sui-2-12-11.sui-elements-accessible .select2-results__option--selected {
   background-color: #000000 !important;
   color: #FFFFFF !important;
 }

dist/js/_src/accordion.js

@@ -30,9 +30,10 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
             flexItem = flexHeader.parent(),
             flexChart = flexItem.find('.sui-chartjs-animated'),
             flexParent = flexItem.parent(),
-            flexContent = flexHeader.next('.sui-accordion-item-body');
+            flexContent = flexHeader.next('.sui-accordion-item-body').find(' .sui-box');
         var tableItem = $(this),
-            tableContent = tableItem.nextUntil('.sui-accordion-item').filter('.sui-accordion-item-content');
+            tableContent = tableItem.nextUntil('.sui-accordion-item').filter('.sui-accordion-item-content'),
+            tableBox = tableContent.find('.sui-box');
         var button = $(this).find('.sui-accordion-open-indicator > .sui-screen-reader-text'),
             buttonText = button === null || button === void 0 ? void 0 : button.text(),
             dataContent = button === null || button === void 0 ? void 0 : button.data('content');
@@ -79,7 +80,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
             } else {
               tableItem.addClass('sui-accordion-item--open');
               tableContent.addClass('sui-accordion-item--open');
-              tableContent.attr('tabindex', '0').trigger('focus');
+              tableBox.attr('tabindex', '0').trigger('focus');
             }
           }
         } // Change button accessiblity content based on accordin open and close.
@@ -125,8 +126,8 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
     return this;
   };
 
-  if (0 !== $('.sui-2-12-11 .sui-accordion').length) {
-    $('.sui-2-12-11 .sui-accordion').each(function () {
+  if (0 !== $('.sui-2-12-12 .sui-accordion').length) {
+    $('.sui-2-12-12 .sui-accordion').each(function () {
       SUI.suiAccordion(this);
     });
   }

dist/js/_src/code-snippet.js

@@ -107,7 +107,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 
   SUI.suiCodeSnippet = function () {
     // Convert all code snippet.
-    $('.sui-2-12-11 .sui-code-snippet:not(.sui-no-copy)').each(function () {
+    $('.sui-2-12-12 .sui-code-snippet:not(.sui-no-copy)').each(function () {
       // backward compat of instantiate new accordion
       $(this).SUICodeSnippet({});
     });

dist/js/_src/dialog-slider.js

@@ -263,7 +263,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
     return this;
   };
 
-  $('.sui-2-12-11 .sui-slider').each(function () {
+  $('.sui-2-12-12 .sui-slider').each(function () {
     SUI.dialogSlider(this);
   });
 })(jQuery);

dist/js/_src/dropdowns.js

@@ -10,7 +10,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 
   SUI.linkDropdown = function () {
     function closeAllDropdowns($except) {
-      var $dropdowns = $('.sui-2-12-11 .sui-dropdown');
+      var $dropdowns = $('.sui-2-12-12 .sui-dropdown');
 
       if ($except) {
         $dropdowns = $dropdowns.not($except);
@@ -31,7 +31,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
       e.preventDefault();
     });
     $('body').on('mouseup', function (e) {
-      var $anchor = $('.sui-2-12-11 .sui-dropdown-anchor');
+      var $anchor = $('.sui-2-12-12 .sui-dropdown-anchor');
 
       if (!$anchor.is(e.target) && 0 === $anchor.has(e.target).length) {
         closeAllDropdowns();

dist/js/_src/password.js

@@ -9,7 +9,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
   }
 
   SUI.showHidePassword = function () {
-    $('.sui-2-12-11 .sui-form-field').each(function () {
+    $('.sui-2-12-12 .sui-form-field').each(function () {
       var $this = $(this);
 
       if (0 !== $this.find('input[type="password"]').length) {

dist/js/_src/reviews.js

@@ -31,7 +31,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
   }; // Update the reviews with the live stats.
 
 
-  $('.sui-2-12-11 .sui-reviews').each(function () {
+  $('.sui-2-12-12 .sui-reviews').each(function () {
     var review = $(this);
     $.ajax({
       url: "https://api.reviews.co.uk/merchant/reviews?store=wpmudev-org",

dist/js/_src/scores.js

@@ -20,7 +20,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
     $(el).prepend(svg).addClass('loaded').find('circle:last-child').css('animation', 'sui' + score + ' 3s forwards');
   };
 
-  $('.sui-2-12-11 .sui-circle-score').each(function () {
+  $('.sui-2-12-12 .sui-circle-score').each(function () {
     SUI.loadCircleScore(this);
   });
 })(jQuery);