Cornerstone update 5.3.0 (#46)

* BCTHEME-160: add valid ARIA role for Related Products tab (bigcommerce#1782) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * fix(storefront): BCTHEME-35 Cornerstone - Cart link not visible on mobile Chrome depending on swatch image size (bigcommerce#1793) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * fix(storefront): BCTHEME-143 Improper heading hierarchy on PLPs (bigcommerce#1779) * fix(storefront): BCTHEME-161 ARIA attributes on Write Review modal need valid values (bigcommerce#1790) * feat(storefront): BCTHEME-122 Add labels to swatches (bigcommerce#1761) * fix(storefront): BCTHEME-67 Cart icon quantity should have appropriate link text (bigcommerce#1765) * feature(storefront): BCTHEME-130 Carousel links should have discernible text (bigcommerce#1789) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * feat(storefront): BCTHEME-135 Missing tooltip for close button on change modal (bigcommerce#1773) * Eslint fix * fix(storefront):fix product Images don't change on click in IE11 (bigcommerce#1748) * fix(storefront):Product Images don't change on click in IE11 * fix eslint errors Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * fix(storefront): BCTHEME-194 Review link in quick modal focused twice (bigcommerce#1797) * Releasing 4.10.0-rc.1 * fix(storefront): BCTHEME-211 Cross icon on close button missalignment * BCTHEME-191 Incorrect styles for focused buttons in grid card product item * BCTHEME-196 Create unified focus styling in Cornerstone * Releasing 4.10.0-rc.2 * fix(storefront): BCTHEME-230 Quick search query param needs to be fixed while navigating to search page * fix(storefront): STRF-8599 Drop Jquery: Replaced event's current target to the element passed from utils(on hook) * Releasing 4.10.0-rc.3 * fix(storefront): STRF-8607 Unified browsers list that we support * fix(storefront): BCTHEME-265 Return heading to product card * Releasing 4.10.0-rc.4 * Fixed quick search data attribute accroding to external hook api requirement * Releasing 4.10.0-rc.5 * Fixed slick issue with cloning slides * Releasing 4.10.0-rc.6 * Fix * Releasing 4.10.0-rc.7 * Refactor GitHub action for Bundle Test (bigcommerce#1852) Making a few improvements to the GitHub action which does a test bundle. * Better docs/comments * Better name * Support "master" or "main" branch as new forks will use `main` * https://www.zdnet.com/article/github-to-replace-master-with-main-starting-next-month/ * https://github.com/github/renaming * Add both a ruby gem cache as well as an npm cache to speed things up (CLI install is most of the time spent currently) * Update Test Badge in README.md * Upload bundled .zip file on PRs for easy testing * Releasing 4.10.0 * Cornerstone 4.10 changelog update * fix(storefront): BCTHEME-171 State of search link not announced (bigcommerce#1798) * fix(storefront): BCTHEME-198 Face accessibility standards with social links on PDP's page (bigcommerce#1809) * fix(storefront): BCTHEME-215 Delete item button in cart cut off from right side when in focus (bigcommerce#1823) * fix(storefront): BCTHEME-169 Subscription notification not announced (bigcommerce#1813) * feat(storefront)bctheme-203: add sufficient contrast on checkboxes within faceted search (bigcommerce#1815) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * fix(storefront): BCTHEME-167 Focus not visible on logo element (bigcommerce#1800) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * feat(storefront):BCTHEME-168: addcontrast for email address input according to AA standard (bigcommerce#1804) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * feat(storefront):BCTHEME-174 add contrast on product ratings in Quick View (bigcommerce#1799) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * feat(storefront):bctheme-173: add color for carousel arrows AA standard (bigcommerce#1814) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * feat(storefront)bctheme-220: add sufficient contrast to button border color (bigcommerce#1817) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * BCTHEME-229 Product carousel with related products - arrows not working (bigcommerce#1828) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * fix(storefront)BCTHEME170: fix empty cart notification (bigcommerce#1846) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * feat(cornerstone):BCTHEME-201: add expanded/collapsed state on add-info button (bigcommerce#1844) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * fix(storefront)bctheme-223: fix voiceover focus not sync in faceted search (bigcommerce#1826) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * feat(storefront)BCTHEME75: add keyboard focus on write-a-review modal (bigcommerce#1835) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * fix(storefront)bctheme-225:fix filter top outline on focus (bigcommerce#1829) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * fix(storefront)BCTHEME-224: change role for sort by select (bigcommerce#1837) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * fix(storefront):bctheme-212 fix rating icons focus border (bigcommerce#1819) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * fix(storefront)BCTHEME-216: fix outline styles for breadcrumbs on focus (bigcommerce#1824) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * Fixed merge conflict * feat(content): MERC-7162 Add header bottom global region * Removed broken import from tools.scss file * BCTHEME-213 Add Info and Add Coupon forms on Cart Page tabbable when hidden (bigcommerce#1820) * Releasing 4.11.0-rc.1 * Update GitHub Action to use Node 12 Node 12 is now supported for Stencil CLI, so we'll use it for this action going forward. * Add examples of useful GitHub Actions for theme development * Releasing 4.11.0 * fix(payments): INT-3211 Change width size for apple pay button * Update Changelog * feat(storefront): STRF-8630 update cornerstone to be compatible with handlebars v4 * fix(storefront): BCTHEME-197 Logo focus of voice over has wrong (100% of the screen) width (bigcommerce#1831) * fix(storefront): BCTHEME-222 Rating and Other filter sections are not accessible by keyboard (bigcommerce#1838) * BCTHEME-210 Carousel hidden when one or more of its images not found (bigcommerce#1816) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * BCTHEME-214 Wishlist first option has no bottom outline when in focus (bigcommerce#1825) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * fix(storefront): BCTHEME-217 Product link has incorrect voice over focus on Cart Page (bigcommerce#1830) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * fix(storefront): BCTHEME-172 Card content truncated on zooming browser to 400% (bigcommerce#1803) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * BCTHEME-185 Sort By dropdowns need visual focus border (bigcommerce#1833) * BCTHEME-188 Product cards should link to products (bigcommerce#1842) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * BCTHEME-184 Options on change modal need focus border (bigcommerce#1839) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * BCTHEME-199 Zooming and scaling must not be disabled (bigcommerce#1843) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * BCTHEME-202 Notification of number of products not announced (bigcommerce#1845) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * BCTHEME-190 Content should not scroll in two directions when zoomed (bigcommerce#1853) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * feat(storefront)BCTHEME-205: add filter reset announcement (bigcommerce#1858) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * feat(storefront) BCTHEME-206: add announcement fot filtered result on Shop-by-price (bigcommerce#1854) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * fix(storefront)BCTHEME-164: fix image in modal for IE11 (bigcommerce#1840) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * fix(storefront): BCTHEME-279 fix logo displaying (bigcommerce#1865) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * feat(storefront):add to cart notification (bigcommerce#1860) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * BCTHEME-44 Cornerstone quick view (bigcommerce#1857) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * fix(storefront): BCTHEME-277 Certain Special Characters not rendering under Wishlists (bigcommerce#1873) * fix(storefront): BCTHEME-219 Social icons not clickable in modal after reopening (bigcommerce#1874) * fix(storefront): BCTHEME-282 Fix aria-labels for collapsibleFactory elements (bigcommerce#1868) * BCTHEME-269 Remove layout shifts to improve CLS indicator from Lighthouse performance report (bigcommerce#1869) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * fix(storefront): BCTHEME-233 Cornerstone - Unable to Compare Products from Recently Viewed Items (bigcommerce#1877) * feat(storefront): BCTHEME-290 add aria labelwith price for product list item (bigcommerce#1878) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * BCTHEME-209 Search result not notified by screen reader (bigcommerce#1867) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * fix(storefront): BCTHEME-289 Add aria label with price to Product Grid Item (bigcommerce#1875) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * fix(storefront): BCTHEME-268 Update carousel images to improve LCP indicator from Lighthouse performance report (bigcommerce#1876) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * feat(storefront): BCTHEME-187 improve localization and add default and fallback messages (bigcommerce#1850) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * fix(storefront): BCTHEME-297 Cornerstone 4.11.0 - Product Image Carousel Becomes Unresponsive on Product Page (bigcommerce#1879) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * Resolved issues after merging PRs for 4.12 release * Releasing 4.12.0-rc.1 * Reduce lodash usage in compare-products.js and image-gallery.js * Releasing 4.12.0-rc.2 * Releasing 4.12.0-rc.3 * Releasing 4.12.0-rc.4 * Upload bundle analysis as part of github action * feat(search): ES-1590 display error message if search fails * feat: (STRF-8747) add new stencil config files to .gitignore * Releasing 4.12.0 * Revert "Releasing 4.12.0" * feat(storefront): BCTHEME-299 update changelog for release 4.12 * Releasing 4.12.0 * Updated CHANGELOG.md before 4.12 release * Reverting cornerstone version to 4.12-rc.4 * Releasing 4.12.0 * Reverting 4.12 changes * Releasing 4.12.0 * Reverted 4.12 release commit and updated package.json versions * Releasing 4.12.0 * Revert fix(storefront): BCTHEME-219 Social icons not clickable in modal * Don't load social icons in quick view * Bump stencil-utils * fix(storefront): BCTHEME-305 Price Lists - Price in the cart is not updated when changing currency on mobile * fix(storefront): BCTHEME-314 ccount >Payment Methods throws Server Error when using Cornerstone theme (bigcommerce#1898) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * fix(storefront): BCTHEME-315 Write a Review modal cause TypeError (bigcommerce#1899) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * Releasing 4.12.1 * feat(payments): PAYPAL-712 Checkout page - Smart Payment Button styli… (bigcommerce#1866) feat(payments): PAYPAL-712 Checkout page - Smart Payment Button styling (Cornerstone) * feat(storefront): BCTHEME-116 move tax field after grand total when tax inclusive (bigcommerce#1903) * fix(storefront): BCTHEME-105 Cornerstone - Body text size above 14px is cut off on cart shipping dropdowns (bigcommerce#1881) * feat(storefront): BCTHEME-69 Add tooltips for carousel bullets (buttons) (bigcommerce#1889) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * fix(storefront): BCTHEME-319 Write a review modal extra executions (bigcommerce#1902) (bigcommerce#1902) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * fix(storefront): BCTHEME-232 Faceted search filters are hidden from screen readers (bigcommerce#1897) * fix(storefront): BCTHEME-292 Social icon tooltip displaying should be fixed (bigcommerce#1907) * BCTHEME-293 Product list item Quick view button is not tabbable (bigcommerce#1900) (bigcommerce#1900) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * fix(storefront): BCTHEME-273 fix contrast ratio for Skip to Main Content element (bigcommerce#1880) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * feat(storefront): BCTHEME-275 add upsell banner contrast (bigcommerce#1891) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * fix(storefront): BCTHEME-274 fix contranst ratio for brand name (bigcommerce#1882) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * fix(storefront): BCTHEME-288 Shoppers are not anchor-linked to reviews on PDPs if product description tabs are enabled (bigcommerce#1883) * fix(storefront): BCTHEME-308 HTML Entity displayed as is via system/error message on a Storefront (bigcommerce#1888) * STRF-8769 Moved zoomSize and productSize to the upper level, cause product.js is not availabe on the Quick View (bigcommerce#1884) * Bump versions of Ruby (bigcommerce#1905) To fix issue bigcommerce#1904 * Changelog update * fix(storefront): BCTHEME-104 Selecting product options doesn't update image on PDP in Internet Explorer (bigcommerce#1913) * fix(storefront): BCTHEME-11 hide product options that are out of stock on cart (bigcommerce#1911) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * fix(storefront): BCTHEME-301 Header content placed out of the header block on mobile (bigcommerce#1908) (bigcommerce#1908) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * fix(storefront): BCTHEME-85 “Sort by” dropdown selection not reflected on search results page for News and Information tab (bigcommerce#1910) (bigcommerce#1910) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * fix(storefront): BCTHEME-86 Cornerstone - Text hover color does not change when Dropdown menu display mode is set to Alternative (bigcommerce#1918) (bigcommerce#1918) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * fix(storefront): BCTHEME-321 fix social icon tooltip overlaying (bigcommerce#1914) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * Resolving eslint error after merging * fix(storefront): BCTHEME-30 fix misaligned tooltip for required product option (bigcommerce#1915) Co-authored-by: yurytut1993 <66325265+yurytut1993@users.noreply.github.com> * fix(storefront): BCTHEME-87 Product images squashed in Category view in AMP (bigcommerce#1921) (bigcommerce#1921) * fix(storefront): BCTHEME-313 Parse HTML entities in jsContext (bigcommerce#1917) * Added Changelog item for BCTHEME-313 * Releasing 5.0.0-rc.1 * feat(payments): PAYPAL-823 Add new banner on the cart page (bigcommerce#1901) * Releasing 5.0.0-rc.2 * Releasing 5.0.0 * feat(storefront): BCTHEME-304 add pagination for wishlists (bigcommerce#1906) * fix(storefront): BCTHEME-341 fix placeholder contrast ratio (bigcommerce#1933) * fix(storefront): BCTHEME-37 Cornerstone - Image Zoom Does Not Work on Internet Explorer (bigcommerce#1923) (bigcommerce#1923) * feat(storefront): BCTHEME-306 show price range on option selection (bigcommerce#1924) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * fix(storefront): BCTHEME-16 Cornerstone - loading of thumbnail image delayed on cart page (bigcommerce#1925 (bigcommerce#1925) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * fix(storefront): BCTHEME-193 fix not being able to change product qty with keyboard multiple times (bigcommerce#1927) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * fix(storefront): BCTHEME-345 define a main region on pages (bigcommerce#1929) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * fix(storefront): BCTHEME-346 add announcement for shipping estimator error messages (bigcommerce#1932) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> * feat(storefront): BCTHEME-343 No tooltips provided for carousel buttons (bigcommerce#1934) (bigcommerce#1934) * feature(storefront): Empty cart message not read by screen reader (bigcommerce#1935) (bigcommerce#1935) * feat(storefront): BCTHEME-344 Carousel buttons do not receive focus (bigcommerce#1937) (bigcommerce#1937) * fix(storefront): BCTHEME-155 fix recaptcha announcement for hidden content (bigcommerce#1943) * fix(storefront): BCTHEME-379 fix non-text contrast on add to cart button (bigcommerce#1946) * fix(storefront): BCTHEME-369 fix announcement on adding to cart by screen reader (bigcommerce#1950) * feat(storefront): BCTHEME-373 Alt text not provided for ratings (bigcommerce#1949) * feat(storefront): BCTHEME-78 Add Play/Pause button to carousel (bigcommerce#1944) * fix(storefront): BCTHEME-366 Error message on PLPs not announced by screen reader (bigcommerce#1956) * fix(storefront): BCTHEME-361 fix subscription message announcement (bigcommerce#1952) * feat(payments): PAYPAL-903 Product Page Banners (Cornerstone) - creat… (bigcommerce#1948) * feat(payments): PAYPAL-903 Product Page Banners (Cornerstone) - create custom price event * feat(payments): PAYPAL-903 Product Page Banners (Cornerstone) - create custom price event - CR fixes Co-authored-by: Alex Saiannyi <67792608+bc-alexsaiannyi@users.noreply.github.com> * BCTHEME-327: PDP - Empty "Description" is Hiding All Tabs When in Tab View (bigcommerce#1947) * feat(storefront): BCTHEME-388 Dots on carousel should have similar colours as other slider controls (bigcommerce#1958) * fix(storefront): BCTHEME-384 When default option is out of stock add to cart button does not populate for in stock options (bigcommerce#1955) * fix(storefront): BCTHEME-383 Selecting certain option types pushes window view to the bottom of the page (bigcommerce#1959) * Fixed merge conflict * STRF-8898 'Show More' gives no additional options when filter clicked (bigcommerce#1945) * Releasing 5.1.0-rc.1 * BCTHEME-387: Updates Cornerstone variants to meet the updated verticals outlined in BCTHEME-387. (bigcommerce#1962) Co-authored-by: Dante Muñoz <dante.munoz@c02v90c0htdh.lan> * Releasing 5.1.0-rc.2 * Releasing 5.1.0 * feat(storefront): STRF-8948 Fix Sort By on Search Page (bigcommerce#1971) * fix(storefront): BCTHEME-368 fix announcement for shop by price filter selection (bigcommerce#1966) * fix(storefront): BCTHEME-207 fix focus on sort by (bigcommerce#1964) * fix(storefront): BCTHEME-385 move a phrase from html to en.json (bigcommerce#1972) * feat(storefront): BCTHEME-390 Integrate accessibility scripts to product images slider on PDP (bigcommerce#1965) * fix(storefront): BCTHEME-354 If multiple Pick List Options are applied, customers cannot select 'none' on both (bigcommerce#1975) * fix(storefront): BCTHEME-356 Required checkbox message blocks the checkbox (bigcommerce#1963) * Updated Changelog PR link for BCTHEME-212 Fixed review rating icons focus border. * feat(storefront): BCTHEME-391 Move focus on filter items Modal after show more button was clicked and accessibility refactoring (bigcommerce#1977) * feat(storefront) BCTHEME-381 add suffient text for swatch option (bigcommerce#1976) * fix(storefront): BCTHEME-398 Make every product option group id unique (bigcommerce#1979) * fix(storefront): BCTHEME-264 fix update discount banner on PDP (bigcommerce#1974) * fix(storefront): BCTHEME-372 Error message not announced automatically (bigcommerce#1983) * fix(storefront): BCTHEME-400 If product options are not required, the 'None' option will remain selected even if another option is chosen (bigcommerce#1980) * fix(storefront): BCTHEME-334 Add alt attribute for no image placeholders (bigcommerce#1984) * fix(storefront): BCTHEME-401 Category pages are creating alt attribute within the span tag (bigcommerce#1987) * fix(storefront): BCTHEME-362 fix cut off cart button on zooming 400 (bigcommerce#1988) * Releasing 5.2.0-rc.1 * Releasing 5.2.0 * Reverting 5.2.0 to 5.2.0-rc.1 * Releasing 5.2.0 * Revert "Releasing 5.2.0" * Releasing 5.2.0 * Revert "Releasing 5.2.0" 2nd time * Releasing 5.2.0 * feat(storefront): BCTHEME-200 add notifications announcement on carousel change (bigcommerce#1986) * fix(storefront): BCTHEME-392 fixed line breaks on Dropdown Menu (bigcommerce#1996) * fix(storefront): BCTHEME-347 Add unique identifiers to product cards (bigcommerce#1999) * fix(storefront): BCTHEME-409 Update focus trap in Modal (bigcommerce#1998) * fix(search): ES-2031 add error message for when star search is not availabble in facted search * feat(search): ES-1590 render error msg for brand page * fix(search): ES-2031 make search error more generic * feat(search): ES-2031 add change to changelog * feat(storefront): BCTHEME-322 add sold-out badges for products on PLP (bigcommerce#2003) * BCTHEME-426: Insufficient link text for "Read More" links (bigcommerce#2012) * BCTHEME-422: Announce email field as mandatory (bigcommerce#2011) * BCTHEME-420: 'Skip to main content' is not visible (bigcommerce#2010) * fix(storefront): BCTHEME-427 Insufficient button label on cart page (bigcommerce#2013) * feat(storefront): BCTHEME-231 Add placeholder for failed to load carousel images and update scalability (bigcommerce#2009) * fix(storefront): BCTHEME-429 Unlabelled edit fields on cart page (bigcommerce#2016) * fix(storefront): BCTHEME-428 Insufficient link text on cart page (bigcommerce#2014) * fix(storefront): BCTHEME-424 Alt text should include product name for ratings (bigcommerce#2015) * fix(storefront): IE11 - Clicking on Search Does Not Display Search Bar (bigcommerce#2017) * Releasing 5.3.0-rc.1 * Fixing 'Skip to main' content mobile display * Releasing 5.3.0-rc.2 * Releasing 5.3.0 --------- Co-authored-by: Alex Saiannyi <67792608+bc-alexsaiannyi@users.noreply.github.com> Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com> Co-authored-by: yurytut1993 <66325265+yurytut1993@users.noreply.github.com> Co-authored-by: Juned Kazi <junedkazi@users.noreply.github.com> Co-authored-by: Tymur Biedukhin <tymur.biedukhin@bigcommerce.com> Co-authored-by: Yurii Zusik <yurii.zusik@bigcommerce.com> Co-authored-by: Jairo Panduro <jairo.panduro@bigcommerce.com> Co-authored-by: Nathan Booker <bookernath@users.noreply.github.com> Co-authored-by: Erik Christensen <erik.christensen@bigcommerce.com> Co-authored-by: Nathan Booker <nathan.booker@bigcommerce.com> Co-authored-by: Marco Loyo <marco.loyo@bigcommerce.com> Co-authored-by: Pascal Zajac <pascalzajac@hotmail.com> Co-authored-by: sacr3dc0w <mshettles@gmail.com> Co-authored-by: alex.saiannyi <alexander.saiannyi@bigcommerce.com> Co-authored-by: Kevin Wang <kwang30@gmail.com> Co-authored-by: MaxGenash <max.henash@bigcommerce.com> Co-authored-by: David Huynh <david.huynh@bigcommerce.com> Co-authored-by: Andrii Fetisov <54856617+bc-fetisov@users.noreply.github.com> Co-authored-by: jairo-bc <68893868+jairo-bc@users.noreply.github.com> Co-authored-by: Andrew A. Barber <hello@andrewbarber.me> Co-authored-by: Brian Davenport <bdav87@gmail.com> Co-authored-by: Olga Lashkul <32959076+helga1507@users.noreply.github.com> Co-authored-by: Dante Munoz <35115108+DanteMunoz@users.noreply.github.com> Co-authored-by: Dante Muñoz <dante.munoz@c02v90c0htdh.lan> Co-authored-by: Nataliya Solyanik <nataliya.solyanik@bigcommerce.com>
sacred-art · Sep 28, 2023 · 045eddd · 045eddd
1 parent 9d8cb89
commit 045eddd
Show file tree

Hide file tree

Showing 57 changed files with 814 additions and 494 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,23 @@
 
 ## Draft
 
+## 5.3.0 (03-24-2021)
+- IE11 - Clicking on Search Does Not Display Search Bar. [#2017](https://github.com/bigcommerce/cornerstone/pull/2017)
+- Alt text should include product name for ratings. [#2015](https://github.com/bigcommerce/cornerstone/pull/2015)
+- Changed insufficient "Change" link text on cart page. [#2014](https://github.com/bigcommerce/cornerstone/pull/2014)
+- Added labeling for edit fields on cart page. [#2016](https://github.com/bigcommerce/cornerstone/pull/2016)
+- Add placeholder for failed to load carousel images and update scalability. [#2009](https://github.com/bigcommerce/cornerstone/pull/2009)
+- Fixed insufficient button label on cart page from action controls. [#2013](https://github.com/bigcommerce/cornerstone/pull/2013)
+- "Skip to main content" now is visible when top banned is absent. [#2010](https://github.com/bigcommerce/cornerstone/pull/2010)
+- Announce subscribing email field as mandatory. [#2011](https://github.com/bigcommerce/cornerstone/pull/2011)
+- Changed insufficient link text for "Read More" links. [#2012](https://github.com/bigcommerce/cornerstone/pull/2012)
+- Added sold out badge on products within PLP. [#2003](https://github.com/bigcommerce/cornerstone/pull/2003)
+- Update focus trap in Modal. [#1998](https://github.com/bigcommerce/cornerstone/pull/1998)
+- Added unique identifiers to product cards on product list pages. [#1999](https://github.com/bigcommerce/cornerstone/pull/1999)
+- Fixed line breaks on Dropdown menu display mode. [#1996](https://github.com/bigcommerce/cornerstone/pull/1996)
+- Added notifications on Carousel's content cahnge through 'Next/Prev' buttons. [#1986](https://github.com/bigcommerce/cornerstone/pull/1986)
+- Add error message when faceted search fails on search, category, brand pages [#2005](https://github.com/bigcommerce/cornerstone/pull/2005)
+
 ## 5.2.0 (02-22-2021)
 - Fixed cut off on Cart button when Zooming up to 400%. [#1988](https://github.com/bigcommerce/cornerstone/pull/1988)
 - Category pages are creating alt attribute within the span tag. [1987](https://github.com/bigcommerce/cornerstone/pull/1987)

diff --git a/assets/img/hero-carousel-image-load-error.svg b/assets/img/hero-carousel-image-load-error.svg
diff --git a/assets/js/theme/cart.js b/assets/js/theme/cart.js
@@ -157,7 +157,7 @@ export default class Cart extends PageManager {
 
             this.bindGiftWrappingForm();
 
-            modal.setupFocusableElements(modalTypes.CART_CHANGE_PRODUCT);
+            modal.setupFocusTrap();
         });
 
         utils.hooks.on('product-option-change', (event, currentTarget) => {

diff --git a/assets/js/theme/common/carousel/index.js b/assets/js/theme/common/carousel/index.js
@@ -1,67 +1,84 @@
 import 'slick-carousel';
 
 import {
+    activatePlayPauseButton,
+    arrowAriaLabling,
     dotsSetup,
-    tooltipSetup,
+    getActiveSlideIdxAndSlidesQuantity,
+    handleImageAspectRatio,
+    handleImageLoad,
     setTabindexes,
-    arrowAriaLabling,
-    heroCarouselSetup,
-    getRealSlidesQuantityAndCurrentSlide,
+    tooltipSetup,
+    updateTextWithLiveData,
 } from './utils';
 
-export const onCarouselChange = (event, carousel) => {
+/**
+ * returns activeSlideIdx and slidesQuantity
+ * based on provided carousel settings
+ * @param {Object} $slickSettings
+ * @returns {Object}
+ */
+const extractSlidesDetails = ({
+    slideCount, $slides, options: { slidesToShow, slidesToScroll },
+}) => getActiveSlideIdxAndSlidesQuantity(
+    slideCount,
+    slidesToShow,
+    slidesToScroll,
+    $slides,
+);
+
+export const onUserCarouselChange = ({ data }, context, $slider) => {
+    const $activeSlider = $slider || data;
+    const $parentContainer = $activeSlider.hasClass('productView-thumbnails') ? $('.productView-images') : $activeSlider;
+    const { activeSlideIdx, slidesQuantity } = extractSlidesDetails($activeSlider[0].slick);
+    const $carouselContentElement = $('[data-carousel-content-change-message]', $parentContainer);
+    const carouselContentAnnounceMessage = updateTextWithLiveData(context.carouselContentAnnounceMessage, (activeSlideIdx + 1), slidesQuantity);
+
+    $carouselContentElement.text(carouselContentAnnounceMessage);
+};
+
+export const onSlickCarouselChange = (e, carousel, context) => {
     const {
-        options: { prevArrow, nextArrow },
-        currentSlide,
-        slideCount,
-        $prevArrow,
-        $nextArrow,
         $dots,
         $slider,
-        breakpointSettings,
-        activeBreakpoint,
+        $prevArrow,
+        $nextArrow,
     } = carousel;
 
-    const { actualSlideCount, actualSlide } = getRealSlidesQuantityAndCurrentSlide(
-        breakpointSettings,
-        activeBreakpoint,
-        currentSlide,
-        slideCount,
-        $slider.data('slick').slidesToScroll,
-    );
-
-    const $prevArrowNode = $prevArrow || $slider.find(prevArrow);
-    const $nextArrowNode = $nextArrow || $slider.find(nextArrow);
-
-    const dataArrowLabel = $slider.data('arrow-label');
-    if (dataArrowLabel) {
-        $prevArrowNode.attr('aria-label', dataArrowLabel);
-        $nextArrowNode.attr('aria-label', dataArrowLabel);
-        $slider.data('arrow-label', false);
-    }
+    const { activeSlideIdx, slidesQuantity } = extractSlidesDetails(carousel);
 
-    dotsSetup($dots, actualSlide, actualSlideCount, $slider.data('dots-labels'));
-    setTabindexes($slider.find('.slick-slide'), $prevArrowNode, $nextArrowNode, actualSlide, actualSlideCount);
-    arrowAriaLabling($prevArrowNode, $nextArrowNode, actualSlide, actualSlideCount);
-    tooltipSetup($prevArrowNode, $nextArrowNode, $dots);
+    dotsSetup($dots, activeSlideIdx, slidesQuantity, context);
+    arrowAriaLabling($prevArrow, $nextArrow, activeSlideIdx, slidesQuantity, context.carouselArrowAndDotAriaLabel);
+    setTabindexes($slider.find('.slick-slide'));
+    tooltipSetup($prevArrow, $nextArrow, $dots);
+    activatePlayPauseButton(carousel, slidesQuantity, context);
 };
 
-export default function () {
-    const $carouselCollection = $('[data-slick]');
-
-    if ($carouselCollection.length === 0) return;
-
-    $carouselCollection.each((index, carousel) => {
+export default function (context) {
+    $('[data-slick]').each((idx, carousel) => {
         // getting element using find to pass jest test
         const $carousel = $(document).find(carousel);
+        $carousel.on('init afterChange', (e, carouselObj) => onSlickCarouselChange(e, carouselObj, context));
+        $carousel.on('click', '.slick-arrow, .slick-dots', $carousel, e => onUserCarouselChange(e, context));
+        $carousel.on('swipe', (e, carouselObj) => onUserCarouselChange(e, context, carouselObj.$slider));
 
-        $carousel.on('init', onCarouselChange);
-        $carousel.on('afterChange', onCarouselChange);
+        if ($carousel.hasClass('heroCarousel')) {
+            $carousel.on('init afterChange', handleImageLoad);
+            $carousel.on('swipe', handleImageAspectRatio);
+            $carousel.on('click', '.slick-arrow, .slick-dots', $carousel, handleImageAspectRatio);
+
+            // Alternative image styling for IE, which doesn't support objectfit
+            if (typeof document.documentElement.style.objectFit === 'undefined') {
+                $carousel.find('.heroCarousel-slide').each((index, slide) => {
+                    $(slide).addClass('compat-object-fit');
+                });
+            }
+        }
 
         const isMultipleSlides = $carousel.children().length > 1;
         const customPaging = isMultipleSlides
             ? () => (
-                '<button type="button"></button>'
+                '<button data-carousel-dot type="button"></button>'
             )
             : () => {};
 
@@ -72,6 +89,4 @@ export default function () {
             dots: isMultipleSlides,
         });
     });
-
-    heroCarouselSetup($carouselCollection.filter('.heroCarousel'));
 }
diff --git a/assets/js/theme/common/carousel/utils/activatePlayPauseButton.js b/assets/js/theme/common/carousel/utils/activatePlayPauseButton.js
@@ -0,0 +1,50 @@
+import { throttle } from 'lodash';
+
+const PLAY_ACTION = 'slickPlay';
+const PAUSE_ACTION = 'slickPause';
+const IS_ACTIVATED_DATA_ATTR = 'is-activated';
+
+export default (carousel, slidesQuantity, context) => {
+    const { $slider, $dots, speed } = carousel;
+    const $playPauseButton = $slider.find('[data-play-pause-button]');
+
+    if ($playPauseButton.length === 0) return;
+
+    $playPauseButton.css('display', slidesQuantity < 2 ? 'none' : 'block');
+
+    if ($playPauseButton.data(IS_ACTIVATED_DATA_ATTR)) return;
+
+    const {
+        carouselPlayPauseButtonPlay,
+        carouselPlayPauseButtonPause,
+        carouselPlayPauseButtonAriaPlay,
+        carouselPlayPauseButtonAriaPause,
+    } = context;
+
+    const updateLabels = action => {
+        $playPauseButton
+            .text(action === PLAY_ACTION
+                ? carouselPlayPauseButtonPause : carouselPlayPauseButtonPlay)
+            .attr('aria-label', action === PLAY_ACTION
+                ? carouselPlayPauseButtonAriaPause : carouselPlayPauseButtonAriaPlay);
+    };
+
+    const onPlayPauseClick = () => {
+        const action = carousel.paused ? PLAY_ACTION : PAUSE_ACTION;
+
+        $slider.slick(action);
+        updateLabels(action);
+    };
+
+    // for correct carousel controls focus order
+    if ($dots) {
+        $playPauseButton.insertBefore($dots);
+    } else $slider.append($playPauseButton);
+
+    $playPauseButton.on('click', throttle(onPlayPauseClick, speed, { trailing: false }));
+    $playPauseButton.data(IS_ACTIVATED_DATA_ATTR, true);
+
+    if (carousel.breakpoints.length) {
+        $slider.on('breakpoint', () => updateLabels(PLAY_ACTION));
+    }
+};
diff --git a/assets/js/theme/common/carousel/utils/arrowAriaLabling.js b/assets/js/theme/common/carousel/utils/arrowAriaLabling.js
@@ -1,26 +1,17 @@
-const NUMBER = '[NUMBER]';
-const integerRegExp = /[0-9]+/;
-const lastIntegerRegExp = /(\d+)(?!.*\d)/;
+import updateTextWithLiveData from './updateTextWithLiveData';
 
-export default ($prevArrow, $nextArrow, actualSlide, actualSlideCount) => {
-    if (actualSlideCount < 2) return;
-    if ($prevArrow.length === 0 || $nextArrow.length === 0) return;
+export default ($prevArrow, $nextArrow, activeSlideIdx, slidesQuantity, ariaLabel) => {
+    if (slidesQuantity < 2 || !$prevArrow || !$nextArrow) return;
 
-    const arrowAriaLabelBaseText = $prevArrow.attr('aria-label');
+    const activeSlideNumber = activeSlideIdx + 1;
 
-    const isInit = arrowAriaLabelBaseText.includes(NUMBER);
-    const valueToReplace = isInit ? NUMBER : integerRegExp;
-    const currentSlideNumber = actualSlide + 1;
+    const prevSlideNumber = activeSlideIdx === 0 ? slidesQuantity : activeSlideNumber - 1;
+    const arrowLeftText = updateTextWithLiveData(ariaLabel, prevSlideNumber, slidesQuantity);
 
-    const prevSlideNumber = actualSlide === 0 ? actualSlideCount : currentSlideNumber - 1;
-    const arrowLeftText = arrowAriaLabelBaseText
-        .replace(valueToReplace, prevSlideNumber)
-        .replace(lastIntegerRegExp, actualSlideCount);
     $prevArrow.attr('aria-label', arrowLeftText);
 
-    const nextSlideNumber = actualSlide === actualSlideCount - 1 ? 1 : currentSlideNumber + 1;
-    const arrowRightText = arrowAriaLabelBaseText
-        .replace(valueToReplace, nextSlideNumber)
-        .replace(lastIntegerRegExp, actualSlideCount);
+    const nextSlideNumber = activeSlideIdx === slidesQuantity - 1 ? 1 : activeSlideNumber + 1;
+    const arrowRightText = updateTextWithLiveData(ariaLabel, nextSlideNumber, slidesQuantity);
+
     $nextArrow.attr('aria-label', arrowRightText);
 };
diff --git a/assets/js/theme/common/carousel/utils/dotsSetup.js b/assets/js/theme/common/carousel/utils/dotsSetup.js
@@ -1,21 +1,20 @@
-export default ($dots, actualSlide, actualSlideCount, dotLabels) => {
+import updateTextWithLiveData from './updateTextWithLiveData';
+
+export default ($dots, activeSlideIdx, slidesQuantity, { carouselArrowAndDotAriaLabel, carouselActiveDotAriaLabel }) => {
     if (!$dots) return;
 
-    if (actualSlideCount === 1) {
+    if (slidesQuantity < 2) {
         $dots.css('display', 'none');
         return;
     }
 
     $dots.css('display', 'block');
 
-    const { dotAriaLabel, activeDotAriaLabel } = dotLabels;
+    $dots.children().each((idx, dot) => {
+        const dotLabelText = updateTextWithLiveData(carouselArrowAndDotAriaLabel, idx + 1, slidesQuantity);
+        const dotSlideStatusText = idx === activeSlideIdx ? `, ${carouselActiveDotAriaLabel}` : '';
+        const dotAriaLabel = `${dotLabelText}${dotSlideStatusText}`;
 
-    $dots.children().each((index, dot) => {
-        const $dot = $(dot);
-        const dotSlideNumber = index + 1;
-        const dotAriaLabelComputed = index === actualSlide
-            ? `${dotAriaLabel} ${dotSlideNumber}, ${activeDotAriaLabel}`
-            : `${dotAriaLabel} ${dotSlideNumber}`;
-        $dot.find('button').attr('aria-label', dotAriaLabelComputed);
+        $(dot).find('[data-carousel-dot]').attr('aria-label', dotAriaLabel);
     });
 };