React Hidden area component causing issue rending third party payment button.

Question

Hello Everyone, i am trying to show snapFinance payment button but for some reason it was not showing on the screen but sdk does get load when page mount. later after debugging I come to know there is a peice of code is causing the issue that is AreaHiddenComponent,
here is my app.tsx code.

<Provider store={store}>
        <SSROutset persistor={persistStore(store)}>
          {getLayout(
            <QueryClientProvider client={queryClient}>
              <Hydrate state={pageProps.dehydratedState}>
                <Component {...pageProps} />
              </Hydrate>
            </QueryClientProvider>
          )}
        </SSROutset>
      </Provider>

inside the SSROutset component there is one more component which is called "VisuallyHidden".

import dynamic from 'next/dynamic';
import { Persistor } from 'redux-persist';
import VisuallyHidden from './visually-hidden';

type Props = {
  children: React.ReactNode | React.ReactNode[];
  persistor: Persistor;
};

const PersistGateComponent = dynamic(() =>
  import('redux-persist/integration/react').then((mod) => mod.PersistGate)
);

const SSROutset = ({ children, persistor }: Props) => {
  if (typeof window !== 'undefined') {
    return (
      <PersistGateComponent persistor={persistor}>
        {children}
      </PersistGateComponent>
    );
  }
  return <VisuallyHidden>{children}</VisuallyHidden>;
};

export default SSROutset;

so when I remove the VisualyHiddent component the payment button shows on screen but when this componetn is there,it does not show the payment button.

Gazami crab · Answer

This is the code of VisuallyHiddenn component code.

/**
 * Welcome to @reach/visually-hidden!
 *
 * Provides text for screen readers that is visually hidden.
 * It is the logical opposite of the `aria-hidden` attribute.
 *
 * @see https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 * @see https://a11yproject.com/posts/how-to-hide-content/
 * @see Docs     https://reach.tech/visually-hidden
 * @see Source   https://github.com/reach/reach-ui/tree/main/packages/visually-hidden
 */

import * as React from "react";

/**
 * VisuallyHidden
 *
 * Provides text for screen readers that is visually hidden.
 * It is the logical opposite of the `aria-hidden` attribute.
 */
const VisuallyHidden = React.forwardRef<any, any>(function VisuallyHidden(
  { as: Comp = "div", style = {}, ...props },
  ref
) {
  return (
    <Comp
      ref={ref}
      style={{
        top: 0,
        left: 0,
        border: 0,
        clip: "rect(0 0 0 0)",
        height: "1px",
        margin: "-1px",
        overflow: "hidden",
        padding: 0,
        position: "absolute",
        width: "1px",
        // https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
        whiteSpace: "nowrap",
        wordWrap: "normal",
        ...style,
      }}
      {...props}
    />
  );
});
VisuallyHidden.displayName = "VisuallyHidden";

/**
 * @see Docs https://reach.tech/visually-hidden#visuallyhidden-props
 */
interface VisuallyHiddenProps {
  /**
   * @see Docs https://reach.tech/visually-hidden#visuallyhidden-children
   */
  children: React.ReactNode;
}



export type { VisuallyHiddenProps };
export default VisuallyHidden;

what should I do now, please as this visualy component is required for some SEO work as per previous developer
please help

React Hidden area component causing issue rending third party payment button.

1 Reply