Webform accessibility improvements, several field types are not optimized

(function ($, Drupal) {
Drupal.behaviors.wxtOrWetBoew = {
attach: function (context, settings) {
if (context == document) {
if (!$('body').hasClass('path-webform')) {
// Not a webform, do nothing.
console.log('Not a webform, validated by wxtOrWetBoew');
return;
}
if (WxtHelper.timeout > 0) {
console.log('timeout > 0');
WxtHelper.init();
}
}
}
};
})(jQuery, Drupal);
var WxtHelper = function() {
var errorHtml = '';
var erroredElements = [];
var erroredMessages = [];
var initialized = false;
var validationType = 'drupal';
var timeout = 200000;
function isReady() {
console.log('isReady()');
if (jQuery('.wb-frmvld').hasClass('wb-frmvld-inited') && jQuery('section.alert-danger').length > 0) {
WxtHelper.validationType = 'wet-boew';
return true;
}
else if($('.wb-frmvld').length == 0 && jQuery('section.alert-danger').length > 0 && $('.form-item--error-message').length > 0) {
WxtHelper.validationType = 'drupal';
return true;
}
console.log(WxtHelper.interval);
return false;
};
//Code you want to run when isReady conditions exist in the DOM.
function onReady() {
console.log('onReady()');
WxtHelper.validationHelper();
WxtHelper.validationWetboew();
if (WxtHelper.validationType == 'drupal') {
WxtHelper.moveAlertInsideLabel();
}
var timeout = 0;
// Make sure the event bindings do not accumulate, turn off first.
$('form.webform-submission-form').off('.wxthelper');
$('form.webform-submission-form').on('submit.wxthelper', function() {
// Re-initialize on submit.
WxtHelper.timeout = 50000;
WxtHelper.initialized = false;
WxtHelper.init();
});
};
//Contingency plan code you want to run if isReady conditions DO NOT exist in the DOM by timeout.
function opt_onTimeout() {
// Do nothing.
};
function addErrorToFieldset(item, index, arr) {
console.log('addErrorToFieldset()');
if (WxtHelper.validationType == 'drupal' && (jQuery('fieldset' + item).length || $('fieldset' + item + '--wrapper').length)) {
WxtHelper.errorHtml = '

';
if (!$('fieldset' + item + '--wrapper').find('.alert-danger').length) {
$('fieldset' + item + '--wrapper').find(item).prepend(WxtHelper.errorHtml);
}
if (!$('fieldset' + item).find('.alert-danger').length) {
$('fieldset' + item).find(item+'radios').prepend(WxtHelper.errorHtml);
}
}
}
function cleanErrorMessage(text) {
console.log('cleanErrorMessage()' + text);
const regex = /: (- |)([^]*)(field is required.|champ est requis.|field est requis.)/gm;
// Alternative syntax using RegExp constructor
const str = text;
var lang = $('html').attr('lang');
var subst = `: This $3`;
if (lang == 'fr') {
subst = `: Ce $3`;
}
// The substituted value will be contained in the result variable
var result = str.replace(regex, subst);
if (lang == 'fr' && WxtHelper.validationType == 'wet-boew') {
result = result.replace('Ce field est requis', 'Ce champ est requis');
}
return result;
}
function bruteForce() {
if ($('html').attr('lang') == 'fr') {
return 'Ce champ est requis.';
}
return 'This field is required.';
}
function moveAlertInsideLabel() {
console.log('moveAlertInsideLabel()');
var textItem = 'div[class*=form-type-text], div[class*=form-type-email],.form-type-select.form-group';
$(textItem).each(function(index, element) {
if ($(this).find('.alert-danger').length) {
var divAlert = $(this).find('.alert-danger');
var labelItem = $(this).find('label');
$(divAlert).clone().appendTo($(labelItem));
$(divAlert).remove();
}
});
var all = 'div[class*=form-type-text],div[class*=form-type],fieldset [class*=form-type],.form-type-select.form-group,fieldset.error';
$(all).each(function(index, element) {
if ($(this).find('.alert-danger').length) {
var desired = WxtHelper.bruteForce();
$(this).find('.alert-danger').text(desired);
}
});
}
function init() {
// How frequent to check for your object.
var interval = 200;
if (WxtHelper.isReady()) {
WxtHelper.onReady();
} else {
if (WxtHelper.timeout > 0) {
WxtHelper.timeout -= interval;
window.setTimeout(arguments.callee, interval);
} else {
console.log("WxtHelper.isReady() timed-out always returning false.");
}
}
}
function validationHelper() {
console.log('validationHelper()');
var allErrors = jQuery('section.alert-danger ul a').each(function(index) {
WxtHelper.erroredElements.push($(this).attr('href'));
WxtHelper.erroredMessages.push(WxtHelper.cleanErrorMessage($(this).text()));
});
WxtHelper.erroredElements.forEach(WxtHelper.addErrorToFieldset);
}
function validationWetboew() {
console.log('validationWetboew()');
if (WxtHelper.validationType == 'wet-boew') {
$('div.wb-frmvld form fieldset span.label-danger, div.wb-frmvld form > div.has-error span.label-danger').each(function(index) {
if (!$(this).hasClass('wxt-cleaned')) {
var prefixSpan = $(this).find('.prefix').prop('outerHTML');
var prefixText = $(this).find('.prefix').text();
$(this).find('span.prefix').remove();
var cleanedText = WxtHelper.cleanErrorMessage(prefixText + $(this).html());
cleanedText = cleanedText.replace(prefixText, '');
$(this).html(cleanedText);
$(this).prepend(prefixSpan);
$(this).addClass('wxt-cleaned');
}
});
}
}
return {
addErrorToFieldset: addErrorToFieldset,
bruteForce: bruteForce,
cleanErrorMessage: cleanErrorMessage,
erroredElements: erroredElements,
erroredMessages: erroredMessages,
errorHtml: errorHtml,
isReady: isReady,
init: init,
initialized: initialized,
moveAlertInsideLabel: moveAlertInsideLabel,
onReady: onReady,
timeout: timeout,
validationHelper: validationHelper,
validationWetboew: validationWetboew,
validationType: validationType,
}
}();

fixing edge case for required checkbox, still more work to do here.

Now focusing on pure drupal and wxt with webform version 6.1.4

This js has not been tested with the wet-boew .wb-frmvld mechanism. It has been tested without wet-boew .wb-frmvld

This way all conditionals work all the time. I'll improve this to make it be optimized either way.

tested vs wxt 4.4.2 vanilla

Fix Error label for french.

fieldset twig, seems to improve things.

refactored js to allow the webform module to specify the message.
'#required_error': 'This field is required.'

This js does however add the prefix to the message as follows:

"Error 1: Blah blah blah"

"Error 2: Blah blah blah blah"

and so on and so forth.

In french
"Erreur 1: Test test test"

Fixing last update, pasted from wrong window

Extended basic support for all field types, next I'm going to test this against a vanilla wxt, I am about to run another test of this against a vanilla wxt 4.4.2, make sure it's still generic enough.

One line css addition with big improvement.

Updated css/js, this time make the errors go under the H1 , this only affects mode not using wb-frmvld, this is 'drupal' mode validation type

see screenshot

Minor change, still tests ok on wxt 4.4.2 vanilla

Hi @joseph.olstad
I listed the findings below. Could you please improve the JS and CSS to meet the requirements. Thanks

css change, see screenshot, now label black color, in brackets (required) is red

I'll need to push up a new patch for this to replace patch 20.
new css and js, still some cleanup to do but so far testing well.

css changes

small css change

couple small changes

This fixes radios other and checkboxes other label alignment

last one was radios and checkboxes other, this time radios-other fix

Simplified and cleaned up the css approach which fixes alignment issues and also a supports section wrapper. As generic as possible with clean alignment.

Regression fix for the submit button (and previous next button) alignment.