SOLVED: Bricks form accessibility issues - Radio and Checkbox

Bugs
8

I’ve the same problem with Bricks 1.12.3
Also the Honeypot Field shows a problem with Axe Dev Tools.

Fixed both with a JS Snippet below the form:

// Function to modify the aria-labelledby attribute and remove autocomplete="nope"
function modifyAttributes() {
  // Part 1: Modify aria-labelledby attributes
  // Find all elements in the document with an aria-labelledby attribute
  const labelledElements = document.querySelectorAll('[aria-labelledby^="label-"]');
  
  let labelledCount = 0;
  // Iterate through all found elements
  labelledElements.forEach(element => {
    // Get the current value
    const currentValue = element.getAttribute('aria-labelledby');
    
    // Replace "label-" with "form-field-" and append "-0" if not already present
    let newValue = currentValue.replace('label-', 'form-field-');
    if (!newValue.endsWith('-0')) {
      newValue = newValue + '-0';
    }
    
    // Set the new value
    element.setAttribute('aria-labelledby', newValue);
    
    labelledCount++;
  });
  
  // Part 2: Remove autocomplete="nope" from ALL text fields (it's added automatically to Honeypot fields)
  const textInputs = document.querySelectorAll('input[type="text"]');
  
  let autocompleteCount = 0;
  // Iterate through all found text inputs
  textInputs.forEach(input => {
    // Only remove if autocomplete="nope"
    if (input.getAttribute('autocomplete') === 'nope') {
      // Remove the autocomplete attribute
      input.removeAttribute('autocomplete');
      
      autocompleteCount++;
    }
  });
  
}

// Execute the function
modifyAttributes();