iframe onLoad jsx-a11y/no-noninteractive-element-interactions error

[claramunt]

Im getting error on iframes when setting onLoad eventhandler.
It was fixed in https://github.com/evcohen/eslint-plugin-jsx-a11y/pull/281 but with last version its failing again

[ljharb]

Since we still have test cases, can you provide the code it’s warning on?

[claramunt]

I think the test about iframe onLoad event is no longer.
The code that is warning on is this

              <iframe
                    name="embeddedExternalPayment"
                    ref="embeddedExternalPayment"
                    style={iframeStyle}
                    onLoad={this.handleLoadIframe}
               />

[ljharb]

That code passes when I add a test case for it.

Can you provide the full text of the warning, and the full code it's warning on?

[claramunt]

this is the message I get:

[eslint] Non-interactive elements should not be assigned mouse or keyboard event listeners. (jsx-a11y/no-noninteractive-element-interactions)

over the iframe on the code I posted.
this is the full code:

    handleLoadIframe = () => {
        this.setState({isLoadingIframe: false});
    };

    render() {
        const {currentBalance, topupAmount, termsUrl, externalPaymentUrl, externalPaymentFields} = this.props;
        const topup = {
            amount: topupAmount,
            termsUrl,
        };

        const iframeHeight = this.state.iframeHeight || 800;
        const iframeStyle = {
            width: '100%',
            height: `${iframeHeight}px`,
        };

        return (
            <React.Fragment>
                {this.state.isLoadingIframe ? (
                    <div style={{height: '300px'}}>
                        <BigCenteredSpinner />
                    </div>
                ) : (
                    <PurchaseTopupSummary currentBalance={currentBalance} topup={topup} />
                )}
                <form
                    id="externalPayment"
                    ref="externalPayment"
                    method="post"
                    name="frmSolicitudPago"
                    target="embeddedExternalPayment"
                    action={externalPaymentUrl}
                >
                    {Object.entries(externalPaymentFields).map(([fieldKey, fieldValue]) => (
                        <input type="hidden" key={fieldKey} name={fieldKey} value={fieldValue} />
                    ))}
                </form>
                <iframe
                    name="embeddedExternalPayment"
                    ref="embeddedExternalPayment"
                    style={iframeStyle}
                    onLoad={this.handleLoadIframe}
                />
                <input type="hidden" id="paymentResult" name="paymentResult" value="" />
                {!this.isLoadingIframe && (
                    <ExitLink trackingEventCategory={TOPUP_DETAILS} style={exitLinkStyle} />
                )}
            </React.Fragment>
        );
    }

[ljharb]

what is “[eslint]” from? Where are you getting this warning, and can you try on the command line?

It’s possible that being inside a Fragment affects it but I’m not sure how it could - if you change the fragment to a div, what happens?

[claramunt]

I copy/pasted from visual studio, but from command line I get the same.

158:17  error  Non-interactive elements should not be assigned mouse or keyboard event listeners  jsx-a11y/no-noninteractive-element-interactions

When I change the fragment to a div, I still get the same error

[ljharb]

did you figure it out?

[claramunt]

Sorry, I must have closed by mistake. Still no clue

[beefancohen]

@claramunt has this been resolved?

[claramunt]

@claramunt has this been resolved?

Still getting the same error

[beefancohen]

what version are you using?

[claramunt]

I was using 6.1.1, but also tried with 6.1.2

[d9su]

Can confirm. Using v6.1.1 and it fails on image onLoad. For example:

<img src={currentPhoto.imageUrl} onLoad={this.handleImageLoad} alt="for review" />

[chrisworfolksky]

+1. I'm using 6.2.0 and I'm getting warnings for img tags with an onLoad.

<img
  ref={this.ref}
  className="c-responsive-image-placeholder__image"
  src={src}
  alt={alt}
  data-test-id="test-id"
  onLoad={this.fetchCompleteImage}
/>

[thedaviddias]

Is this still a bug? onLoad seems valid on img and iframes but the "no-noninteractive-element-interactions" rule says it's not. Any insights?

[V2dha]

I think this is resolved as all the code above are passing with img and iframe with onLoad in version 6.6.0