@blaze-cms/react-page-builder 0.146.0-alpha.0 → 0.146.0-alpha.2

package/src/components/BackToTop/BackToTop.js

@@ -1,12 +1,9 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { FaArrowUp } from 'react-icons/fa';
-import Wrapper from '../Wrapper';
-import { getClassModifiers } from '../../utils';
 
-const BackToTop = ({ type, showAfterPixels, ...otherProps }) => {
+const BackToTop = ({ type, showAfterPixels }) => {
   const [goToTop, setGoToTop] = useState(false);
-  const modifiers = getClassModifiers(type, otherProps);
 
   useEffect(
     () => {
@@ -17,23 +14,21 @@ const BackToTop = ({ type, showAfterPixels, ...otherProps }) => {
     [showAfterPixels]
   );
 
-  const handleBackToTop = () => {
+  const handleBackToTop = event => {
+    event.preventDefault();
     window.scroll({
       top: 0,
       left: 0,
       behavior: 'smooth'
     });
-    setGoToTop(false);
   };
 
   return (
     <>
       {goToTop && (
-        <Wrapper className={type} modifiers={modifiers} onClick={handleBackToTop}>
-          <i>
-            <FaArrowUp />
-          </i>
-        </Wrapper>
+        <a href="#top" className={type} onClick={handleBackToTop} aria-label="Back to top">
+          <FaArrowUp />
+        </a>
       )}
     </>
   );

package/src/components/Card/Card.js

@@ -51,7 +51,8 @@ const Card = ({
   const router = useRouter();
   const { imageSrc, shouldDisplayThumbnail, altText } = getImageDefinedProps({
     image,
-    displayThumbnail
+    displayThumbnail,
+    name
   });
 
   const modifiers = getInitialModifiers({ modifier, style, otherProps });
@@ -265,10 +266,10 @@ const getCategoryDefinedProps = ({
   return { publishedListingPage, preHeader, label, headline };
 };
 
-const getImageDefinedProps = ({ image, displayThumbnail }) => {
+const getImageDefinedProps = ({ image, displayThumbnail, name }) => {
   const { url: imageSrc, data } = image || {};
   const shouldDisplayThumbnail = displayThumbnail && imageSrc;
-  const altText = (data && data.altText) || '';
+  const altText = (data && data.altText) || name;
   return { imageSrc, shouldDisplayThumbnail, altText };
 };
 

package/src/components/Carousel/CarouselImage/CarouselImage.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { useGetImages } from '../../../hooks';
 import { getImageData } from '../../../utils';
 import LazyImage from '../../LazyImage';
+import { CAROUSEL_DEFAULT_ALT } from './constants';
 
 const CarouselImage = ({ imageId, enableLightbox, toggleModal, handleSelectedImage, priority }) => {
   const { data, loading, error } = useGetImages(imageId);
@@ -14,6 +15,7 @@ const CarouselImage = ({ imageId, enableLightbox, toggleModal, handleSelectedIma
   };
 
   const { altText } = getImageData({}, imageData);
+  const alt = altText || CAROUSEL_DEFAULT_ALT;
 
   const handleEnableLightbox = () => {
     if (!enableLightbox) return;
@@ -28,7 +30,7 @@ const CarouselImage = ({ imageId, enableLightbox, toggleModal, handleSelectedIma
       ) : (
         <LazyImage
           src={imageUrl}
-          alt={altText}
+          alt={alt}
           sizeKey="carousel"
           onClick={handleEnableLightbox}
           role="button"

package/src/components/Carousel/CarouselImage/constants.js

@@ -0,0 +1 @@
+export const CAROUSEL_DEFAULT_ALT = 'Carousel image';

package/src/components/CarouselWrapper/DefaultCarousel.js

@@ -91,6 +91,7 @@ const DefaultCarousel = ({
           <button
             type="button"
             className="cards-carousel--button-back icon-button icon"
+            aria-label="Scroll left"
             onClick={() => {
               setShouldAutoScroll(false);
               handleButtonNavigation();
@@ -105,6 +106,7 @@ const DefaultCarousel = ({
           <button
             type="button"
             className="cards-carousel--button-forward icon-button icon"
+            aria-label="Scroll right"
             onClick={() => {
               setShouldAutoScroll(false);
               handleButtonNavigation(true);

package/src/components/ContentGroup/ContentGroupTabs.js

@@ -29,12 +29,10 @@ const ContentGroupTabs = ({ name, contentType, groupSections, sectionsData, Vari
         {groupSections.map((_, index) => {
           const [sectionName, sectioLabel] = sectionsData[index];
           const tabId = `${TAB}-${sectionName}`;
-          const panelId = `${PANEL}-${sectionName}`;
           const isSelected = selectedTab === tabId;
           const buttonClassName = `${CONTENT_GROUP}-${contentClassame}__button${
             isSelected ? '--is-active' : ''
           }`;
-
           return (
             <button
               id={tabId}
@@ -43,7 +41,7 @@ const ContentGroupTabs = ({ name, contentType, groupSections, sectionsData, Vari
               type="button"
               role="tab"
               aria-selected={isSelected}
-              aria-controls={panelId}
+              aria-controls={sectionName}
               onClick={() => {
                 const baseUrl = asPath.split('#')[0];
                 const newUrl = `${baseUrl}#${sectionName}`;

package/src/components/Image/GlobalLightbox/GlobalLightbox.js

@@ -46,7 +46,7 @@ const GlobalLightbox = ({ images, onClose, selectedImage, metaTitle, parentName
     value: caption
   });
 
-  // depreciated: imageCredits is depreciated. This code is to handle legacy data. check before changing/removing
+  // deprecated: imageCredits is deprecated. This code is to handle legacy data. check before changing/removing
   const shouldDisplayCredits = shouldShowProperty({
     isDisplayed: areImageCreditsDisplayed,
     value: credits || imageCredits
@@ -105,7 +105,7 @@ const GlobalLightbox = ({ images, onClose, selectedImage, metaTitle, parentName
                         handleAction={handlePrevious}
                         show={showPrevious}
                         modifier="previous"
-                        aria-label="Previous Image"
+                        ariaLabel="Previous Image"
                       />
 
                       <div className="slider slider--gallery">
@@ -138,7 +138,7 @@ const GlobalLightbox = ({ images, onClose, selectedImage, metaTitle, parentName
                       </div>
 
                       <NavButton
-                        aria-label="Next Image"
+                        ariaLabel="Next Image"
                         handleAction={handleNext}
                         show={showNext}
                         modifier="next"

package/src/components/Image/GlobalLightbox/NavButton.js

@@ -1,13 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const NavButton = ({ handleAction, show, modifier }) => (
+const NavButton = ({ handleAction, show, modifier, ariaLabel }) => (
   <>
     {show && (
       <div
         role="button"
         className={`slider__button slider__button--gallery slider__button--${modifier}`}
-        onClick={handleAction}>
+        onClick={handleAction}
+        aria-label={ariaLabel}>
         <div
           className={`arrow arrow--${modifier === 'next' ? 'right' : 'left'}`}
           data-testid={`navButton-${modifier}`}
@@ -20,7 +21,8 @@ const NavButton = ({ handleAction, show, modifier }) => (
 NavButton.propTypes = {
   handleAction: PropTypes.func.isRequired,
   show: PropTypes.bool.isRequired,
-  modifier: PropTypes.string.isRequired
+  modifier: PropTypes.string.isRequired,
+  ariaLabel: PropTypes.string.isRequired
 };
 
 export default NavButton;

package/src/components/Image/Image.js

@@ -106,6 +106,7 @@ const Image = ({
         <div
           className="image__button image__button--count"
           role="button"
+          aria-label="Show more images"
           onClick={handleEnableLightbox}>
           <p>{countMessage}</p>
           <div className="arrow arrow--right" />

package/src/components/ItemList/ItemListNew/ItemListNew.js

@@ -32,10 +32,7 @@ const ItemListNew = ({ listName, modifier, text }) => {
   };
 
   return (
-    <BlazeButton
-      className={`item-list-new ${modifier}`}
-      onClick={handleClick}
-      aria-label={`Create new ${listName}`}>
+    <BlazeButton className={`item-list-new ${modifier}`} onClick={handleClick}>
       {text}
     </BlazeButton>
   );

package/src/components/List/components/Cards/CardsRender.js

@@ -38,7 +38,9 @@ const CardsRender = ({
   const propsToDisplayModifiers = getPropsToDisplayModifiers(propsToDisplay);
   const imageIds = itemsToDisplay.map(({ imageId }) => imageId).filter(Boolean);
   const { data: imagesData, loading: imagesLoading } = useGetImages(imageIds, true);
+
   if (imagesLoading) return '';
+
   const updatedListWithImages = appendImages(imagesData, orderedListData, itemsToDisplay);
   const WrapperToUse = omitWrappers ? Fragment : Wrapper;
 

package/src/components/List/components/Full/FullRender.js

@@ -16,9 +16,10 @@ const FullRender = ({
   graphqlEntityMap,
   ...props
 }) => {
+  const { parent, entity, propsToDisplay, banner, hasBanner } = props;
+
   const contextProps = useContext(MainContext);
   const pageBuilderID = uuid();
-  const { parent, entity, propsToDisplay, banner, hasBanner } = props;
   const bannerProps = banner
     ? { hasBanner, parent, entity, propsToDisplay, ...banner, type: BANNER }
     : null;

package/src/components/Menu/Menu.js

@@ -63,7 +63,7 @@ const Menu = ({
               <BlazeButton
                 className={`menu--mobile-button ${mobileButtonModifier}`}
                 onClick={() => setShowMobileMenu(!showMobileMenu)}
-                aria-label={showMobileMenu ? 'Close mobile menu' : 'Open mobile menu'}>
+                label={showMobileMenu ? 'Close mobile menu' : 'Open mobile menu'}>
                 <i>
                   {showMobileMenu ? (
                     <MdClose className={closeIconModifier} />

package/src/components/MenuItem/MenuItem.js

@@ -33,25 +33,18 @@ const MenuItem = ({ children, eventType, text, modifier, url }) => {
   const hasValidChildren = hasChildren(children);
 
   return (
-    <li
-      className={modifier}
-      onMouseEnter={handleItemEvent}
-      onMouseLeave={handleItemEvent}
-      aria-label={text}>
+    <li className={modifier} onMouseEnter={handleItemEvent} onMouseLeave={handleItemEvent}>
       <div className="menu--item--link">
         {url ? (
           <BlazeLink href={url}>{text}</BlazeLink>
         ) : (
-          <span role="button" onClick={handleItemEvent} aria-label={text}>
+          <span role="button" onClick={handleItemEvent}>
             {text}
           </span>
         )}
         {hasValidChildren && (
           <i
             role="button"
-            aria-label={
-              displayChildren ? `Collapse ${text} menu items` : `Expand ${text} menu items`
-            }
             className="menu--item--link--icon"
             onClick={() => setDisplayChildren(!displayChildren)}>
             {displayChildren ? <FaChevronUp /> : <FaChevronDown />}

package/src/components/SearchFilter/SearchFilter/FiltersList.js

@@ -38,6 +38,7 @@ const FiltersList = ({
             />
           </div>
         );
+
       case CHECKBOX:
         return (
           <div
@@ -56,6 +57,7 @@ const FiltersList = ({
             />
           </div>
         );
+
       case SELECT:
         return (
           <div
@@ -74,6 +76,7 @@ const FiltersList = ({
             />
           </div>
         );
+
       case RANGE:
         return (
           !!areAggregationsAvailable && (

package/src/components/SearchFilter/SearchFilter/MobileFormToolbar.js

@@ -9,7 +9,7 @@ const MobileFormToolbar = ({ formId, handleReset }) => (
       data-testid="reset-button"
       role="button"
       onClick={handleReset}
-      aria-label="Reset Filters">
+      aria-label="Reset search filters">
       {RESET}
     </div>
 

package/src/components/SearchFilter/SearchFilter/ResetDesktopForm.js

@@ -10,13 +10,14 @@ const ResetDesktopForm = ({ handleReset }) => (
       className="icon-button icon-button--reset"
       title="reset--button"
       data-testid="reset-icon"
-      onClick={handleReset}>
+      onClick={handleReset}
+      aria-label="Reset search filters">
       <i>
         <FaRedoAlt />
       </i>
     </button>
 
-    <div role="button" onClick={handleReset} data-testid="reset-button" aria-label="Reset Filters">
+    <div role="button" onClick={handleReset} data-testid="reset-button">
       {RESET}
     </div>
   </div>

package/src/components/SearchFilter/SearchFilter/SearchFilter.js

@@ -152,6 +152,11 @@ const SearchFilter = ({
                         data-testId="search-filter-desktop-toggler"
                         className={moreFiltersDesktopTogglerClass}
                         type="button"
+                        aria-label={
+                          moreFiltersDesktopCollapsed
+                            ? 'Show more search filters'
+                            : 'Show less search filters'
+                        }
                         onClick={() =>
                           setMoreFiltersDesktopCollapsed(!moreFiltersDesktopCollapsed)
                         }>
@@ -206,11 +211,11 @@ const SearchFilter = ({
 
       {isCollapsedOnResponsive &&
         !displaySearchFilter && (
-          <div className="filter__refine filter__refine--mobile-close" data-testid="refine-mobile">
-            <div
-              role="button"
-              onClick={() => setDisplaySearchFilter(true)}
-              aria-label="Toggle Search Filter">
+          <div
+            className="filter__refine filter__refine--mobile-close"
+            data-testid="refine-mobile"
+            aria-label="Toggle Search Filter">
+            <div role="button" onClick={() => setDisplaySearchFilter(true)}>
               {REFINE}
             </div>
           </div>

package/src/components/SearchFilter/components/Checkbox.js

@@ -84,7 +84,9 @@ const Checkbox = ({
           role="button"
           className="see-more"
           onClick={handleCheckboxOptions}
-          aria-label={shouldDisplayMore ? `See ${MORE} options` : `See ${LESS} options`}>
+          aria-label={
+            shouldDisplayMore ? `See ${MORE} ${label} options` : `See ${LESS} ${label} options`
+          }>
           {shouldDisplayMore ? (
             <>
               <i>

package/src/components/SearchFilter/components/TextSearch.js

@@ -22,6 +22,7 @@ const TextSearch = ({ label, searchValue, updateFilterValues, elementTitle }) =>
         <button
           type="button"
           className="icon-button icon-button--search"
+          aria-label="Search"
           onClick={e => {
             e.preventDefault();
             updateFilterValues({ [SEARCH_TERM]: searchValue }, true);

package/src/components/Video/providers/Vimeo/VimeoProvider.js

@@ -51,7 +51,6 @@ const VimeoProvider = ({ url, autoplay, loop, imageData }) => {
       role="button"
       className={VIDEO_WRAPPER_CLASS_NAME}
       style={videoStyle}
-      aria-label="Open video"
       onClick={() => !shouldRenderVideo && setShouldRenderVideo(true)}>
       {shouldRenderVideo && !videoError && wrappedCode}
       {videoError && videoError.message}

package/tests/unit/src/components/BackToTop/BackToTop.test.js

@@ -1,19 +1,23 @@
 /**
  * @jest-environment jsdom
  */
+import React from 'react';
 import '@testing-library/jest-dom/extend-expect';
-import { render } from '@blaze-cms/tools/test-helpers/test-functions';
+import { render, screen } from '@testing-library/react';
 import BackToTop from '../../../../../src/components/BackToTop';
 
-describe('Breadcrumb component', () => {
+describe('BackToTop component', () => {
   it('should be a function', () => {
     expect(typeof BackToTop).toEqual('function');
   });
 
   it('should render without throwing an error and match snapshot', () => {
-    const { asFragment } = render(BackToTop, {
-      showAfterPixels: 500
-    });
+    const { asFragment } = render(<BackToTop showAfterPixels={500} />);
     expect(asFragment()).toMatchSnapshot();
   });
+
+  it('should not render the button initially', () => {
+    render(<BackToTop showAfterPixels={500} />);
+    expect(screen.queryByRole('link', { name: /back to top/i })).not.toBeInTheDocument();
+  });
 });

package/tests/unit/src/components/BackToTop/__snapshots__/BackToTop.test.js.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Breadcrumb component should render without throwing an error and match snapshot 1`] = `<DocumentFragment />`;
+exports[`BackToTop component should render without throwing an error and match snapshot 1`] = `<DocumentFragment />`;

package/tests/unit/src/components/Carousel/CarouselImage/__snapshots__/CarouselImage.test.js.snap

@@ -5,7 +5,7 @@ exports[`Carousel image component should match snapshot 1`] = `
   className="carousel__slide"
 >
   <img
-    alt=""
+    alt="Carousel image"
     aria-label="View Image"
     data-testid="lazy-image-mock"
     onClick={[Function]}

package/tests/unit/src/components/Carousel/__snapshots__/Carousel.test.js.snap

@@ -66,7 +66,7 @@ exports[`Carousel component should render priority images and match snapshot 1`]
         >
           <span>
             <img
-              alt=""
+              alt="Carousel image"
               aria-label="View Image"
               role="button"
               src="test-url"

package/tests/unit/src/components/ContentGroup/__snapshots__/ContentGroupTabs.test.js.snap

@@ -11,7 +11,7 @@ exports[`ContentGroupTabs component should match snapshot and render sidepanel c
       role="tablist"
     >
       <button
-        aria-controls="panel-section-one"
+        aria-controls="section-one"
         aria-selected="true"
         class="content-group-sidepanel__button--is-active"
         id="tab-section-one"
@@ -21,7 +21,7 @@ exports[`ContentGroupTabs component should match snapshot and render sidepanel c
         sectionOne
       </button>
       <button
-        aria-controls="panel-section-two"
+        aria-controls="section-two"
         aria-selected="false"
         class="content-group-sidepanel__button"
         id="tab-section-two"
@@ -57,7 +57,7 @@ exports[`ContentGroupTabs component should match snapshot and render tabs conten
       role="tablist"
     >
       <button
-        aria-controls="panel-section-one"
+        aria-controls="section-one"
         aria-selected="true"
         class="content-group-tabs__button--is-active"
         id="tab-section-one"
@@ -67,7 +67,7 @@ exports[`ContentGroupTabs component should match snapshot and render tabs conten
         sectionOne
       </button>
       <button
-        aria-controls="panel-section-two"
+        aria-controls="section-two"
         aria-selected="false"
         class="content-group-tabs__button"
         id="tab-section-two"

package/tests/unit/src/components/ItemList/__snapshots__/ItemListNew.test.js.snap

@@ -3,7 +3,6 @@
 exports[`ItemListNew component should match snapshot and render without throwing an error 1`] = `
 <DocumentFragment>
   <button
-    aria-label="Create new list_name"
     class="item-list-new button"
     type="button"
   >
@@ -19,7 +18,6 @@ exports[`ItemListNew component should not render if list not found 1`] = `<Docum
 exports[`ItemListNew component should render using listId from query 1`] = `
 <DocumentFragment>
   <button
-    aria-label="Create new QUERY-LIST-ID"
     class="item-list-new button"
     type="button"
   >

package/tests/unit/src/components/MenuItem/__snapshots__/MenuItem.test.js.snap

@@ -3,7 +3,6 @@
 exports[`MenuItem component should render link if url is passed 1`] = `
 <DocumentFragment>
   <li
-    aria-label="Item 1"
     class="menu-item-mod"
   >
     <div
@@ -16,7 +15,6 @@ exports[`MenuItem component should render link if url is passed 1`] = `
         Item 1
       </a>
       <i
-        aria-label="Expand Item 1 menu items"
         class="menu--item--link--icon"
         role="button"
       >
@@ -52,20 +50,17 @@ exports[`MenuItem component should render link if url is passed 1`] = `
 exports[`MenuItem component should render without throwing an error and match snapshot 1`] = `
 <DocumentFragment>
   <li
-    aria-label="Item 1"
     class="menu-item-mod"
   >
     <div
       class="menu--item--link"
     >
       <span
-        aria-label="Item 1"
         role="button"
       >
         Item 1
       </span>
       <i
-        aria-label="Expand Item 1 menu items"
         class="menu--item--link--icon"
         role="button"
       >

package/tests/unit/src/components/SearchFilter/SearchFilter/__snapshots__/MobileFormToolbar.test.js.snap

@@ -6,7 +6,7 @@ exports[`MobileFormToolbar component should render without throwing error and ma
     class="filter__refine filter__refine--mobile-open"
   >
     <div
-      aria-label="Reset Filters"
+      aria-label="Reset search filters"
       class="reset"
       data-testid="reset-button"
       role="button"

package/tests/unit/src/components/SearchFilter/SearchFilter/__snapshots__/ResetDesktopForm.test.js.snap

@@ -6,6 +6,7 @@ exports[`ResetDesktopForm component should render without throwing error and mat
     class="filter__reset"
   >
     <button
+      aria-label="Reset search filters"
       class="icon-button icon-button--reset"
       data-testid="reset-icon"
       title="reset--button"
@@ -28,7 +29,6 @@ exports[`ResetDesktopForm component should render without throwing error and mat
       </i>
     </button>
     <div
-      aria-label="Reset Filters"
       data-testid="reset-button"
       role="button"
     >