Custom Form - error count doesn't work in Accessible Format

[askas]

Matrix Version: 5.4.7.0
Hi,

To alert the screen reader users that there were errors in a form I use:

    <div role="alert" class="formerrors" aria-labelledby="error-message" tabindex="-1">
    <h2 id="error-message" class="errornote">
        There were  %form_errors^xpathe:count(//li)% errors in this form. Please correct the listed fields and submit again:
    </h2>

Then there is a list of errors with a link to an appropriate field. It suits well both sighted and screen reader users.

The issue is when I would like to use Accessible Format – Yes, from the Formatting section on the Form Contents screen.

%form_errors^xpathe:count(//li)% doesn’t work in Accessible Format. Is it a bug or should I use something else?

[JohnGill]

%form_errors% doesn’t get populated with any data when the form is using Accessible Format.

As far as I can tell, the easiest way to replicate this behaviour would be to use SSJS. Unfortunately you’ll need to maintain a list of all the error keywords manually.

<script runat="server">
var errors = [
"%question_error_570_q1%",
"%question_error_570_q2%",
"%question_error_570_q3%",
"%question_error_570_q4%"
];

var actual = [];
errors.forEach(function(err,i) {
    if (err.length > 0 && err[0] != '%') actual.push(err);
})

if(actual.length > 0) {
    print('<div role="alert" class="formerrors" aria-labelledby="error-message" tabindex="-1">    <h2 id="error-message" class="errornote">There were ');
    print(actual.length);
    print('errors in this form. Please correct the listed fields and submit again: </h2><ul>');
    actual.forEach(function(err) {
    	print('<li>',err,'</li>');
    });
    print('</ul></div>');
}
</script>

The test to see if an error is empty or not checks for % because it seems that at the time the SSJS runs, the empty errors still contain the keyword which later gets replaced with blank.

[serger]

SSJS

It looks like SSJS doesn’t work on our server. I added this line as a TEST

And it doesn’t show in the inspector / source. Is there a setting for SSJS somewhere we have to enable?

[JohnGill]

SSJS does need to be enabled, and it requires at least 5.4.

In this instance, I think SSJS is enabled but you’ve got some errors in that JS so it’s not working. Where you’ve added the extra error lines, you haven’t added a comma between them so the array is malformed.

Debugging SSJS is a giant pain because when you’ve got an error it just vanishes. If you append ?SQ_DISABLE_SERVER_JS to the end of the URL is stops the SSJS from running so it will run in your browser instead so you might be able to see errors. https://matrix.squiz.net/manuals/concepts/chapters/server-side-javascript#disabling-ssjs

[serger]

Oh wasn’t my code underneath, I didn’t notice the missing commas, thanks for the pointer.

Shame there isn’t a log file for the errors … surely that would go to stderr?

@Bart would it be possible to add the stderr output of the SSJS to a new log file within Matrix?

Under one of those …

[askas]

Thank you John and Serge. All errors are mine.
The script is working great now both when the Accessible Format is turned on and off.

I made some changes to the script as I would like to display the links to the appropriate fields. I couldn’t work out how to replace the section_id and field_id in %question_id_<parent_id>_<question_id>% . %question_id_section_asset_assetid_question_asset_assetid% - didn’t work for me. I wanted to change this piece of the code:

Unfortunately, the result was e.g.:

So I decided to go with another solution and this work great both for the sighted users and the screen reader users.

Thank you once again for your help!

[Bart]

SSJS errors are always logged under the Matrix Error log, for example:

Is that what you mean?