How to use the @shopgate/engage/a11y.broadcastLiveMessage function in @shopgate/engage

To help you get started, we’ve selected a few @shopgate/engage examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github shopgate / pwa / libraries / common / components / ProductCharacteristics / index.jsx View on Github external
return true;
    }

    const filteredValues = Object.keys(characteristics).filter(key => !!characteristics[key]);
    const selected = !!((filteredValues.length === variants.characteristics.length) && variantId);

    if (!selected) {
      const firstUnselected = this.findUnselectedCharacteristic();

      if (firstUnselected) {
        const ref = this.refsStore[firstUnselected.id];

        // Focus the item for screen readers and broadcast a related live message.
        ref.current.focus();
        const option = ref.current.innerText;
        broadcastLiveMessage('product.pick_option_first', {
          params: { option },
        });

        ref.current.scrollIntoView({ behavior: 'smooth' });
        this.setState({ highlight: firstUnselected.id });
      }
    }

    return selected;
  }
github shopgate / pwa / themes / theme-gmd / pages / Product / components / Options / components / TextOption / index.jsx View on Github external
checkInput = () => {
    if (!this.props.required) {
      return true;
    }
    if (this.props.value) {
      return true;
    }

    broadcastLiveMessage('product.fill_out_required_input_first');
    this.ref.scrollIntoView({ behavior: 'smooth' });
    this.setState({ highlight: true });
    return false;
  }
github shopgate / pwa / themes / theme-ios11 / pages / Product / components / AddToCartBar / index.jsx View on Github external
this.props.conditioner.check().then((fullfilled) => {
      if (!fullfilled) {
        return;
      }

      this.setState({ clicked: true });

      this.props.addToCart({
        productId: this.props.productId,
        options: this.props.options,
        quantity: this.context.quantity,
      });

      broadcastLiveMessage('product.adding_item', {
        params: { count: this.context.quantity },
      });

      if (this.moreButtonRef.current) {
        this.moreButtonRef.current.focus();
      }

      setTimeout(this.resetClicked, 250);
    });
  }
github shopgate / pwa / themes / theme-gmd / pages / Favorites / subscriptions.js View on Github external
subscribe(favoritesWillAddItem$, () => {
    broadcastLiveMessage('favorites.added');
  });
}
github shopgate / pwa / themes / theme-ios11 / pages / Favorites / components / FavoritesList / components / Item / components / CTAButtons / index.jsx View on Github external
handleAddToCart = () => {
    if (this.props.isBaseProduct && this.props.hasVariety) {
      this.props.showVariantModal(this.props.productId);
      return;
    }

    const productData = {
      productId: this.props.productId,
      quantity: 1,
    };

    this.props.addToCart(productData);

    broadcastLiveMessage('product.adding_item', {
      params: { count: 1 },
    });
  };
github shopgate / pwa / themes / theme-gmd / pages / Product / components / Header / components / CTAButtons / components / CartButton / index.jsx View on Github external
this.props.conditioner.check().then((fulfilled) => {
      if (!fulfilled) {
        return;
      }

      this.setState({ clicked: true });

      this.props.addToCart({
        productId: this.props.productId,
        options: this.props.options,
        quantity: this.context.quantity,
      });

      broadcastLiveMessage('product.adding_item', {
        params: { count: this.context.quantity },
      });
    });
  }