.screen-reader-response does not exists

Where can we see the website in question?

@takayukister

Currently, unfortunately, not at all, as we had to solve the problem ourselves in index.js. The page is used by a customer. Here, unfortunately, I can not send test data.

It only needs to be checked here in the code if .screen-reader-response [role=”status”] exists before working with .innertext. In general, you should always check if something exists before working with it – according to my understanding.

Hello,

we had the exact same issue. A javascript error, that innerText of null cannot be changed for .screen-reader-response [role=”status”].
As apparently there was no fix available, we patched out the .screen-reader-response part in index.js. It looks like this now: https://gist.github.com/qSebastiaNp/801dba970784f2ebcde23abaac42ef76

This of course breaks functionality of screenreaders, but a working contact form was more important.

Hi everyone , I was facing the same issue, the solution I have found is to add a div with a screen-reader-response class between the div role=”form” and the form tag

<div role=”form” class=”wpcf7″ id=”wpcf7-f115-o1″ lang=”es-ES” dir=”ltr”>

<div class=”screen-reader-response”><p role=”status” aria-live=”polite” aria-atomic=”true”></p>

</div>

<form action=”” method=”post” class=”wpcf7-form” novalidate=”novalidate” name =”formx” id=”formx”>

@lairinys the problem is not the entire div, but only the <p role=”status”> that doesn’t exists.

I’ve put this code and it worked:

jQuery(function(){

if (jQuery(‘.screen-reader-response [role=”status”]’)[0] == undefined) jQuery(‘.screen-reader-response’).append(‘<p role=”status” aria-live=”polite” aria-atomic=”true”></p>’);

});