Form errors are not always linked to correct working elements

Problem/Motivation

The from errors coming from inline_form_errors module do not always get linked to the correct field or group - particularly faulty with paragraph elements or media reference elements.

There are two issues:

1. The id attribute extracted by the erroneous form element is not valid or consistent. Form error handler method uses $form_element['#id'] for but this sometimes does not match with $form_element['#attributes']['id'] which is identical to DOM HTML id when present.
2. When a paragraph reference element is left blank (where required paragraph elements aren't added yet to the form), the error link still targets a missing element that's not added to the form yet, hence doesn't go anywhere on click. But this should instead use the id from the 'table' or the 'fieldset' element that gets rendered for showing the paragraph top header. This may be because the 'table' element ID that gets passed to the tabledrag library via Drupal settings isn't available for the validation form handler.



Steps to reproduce

• Add a couple of paragraph types with required fields.
• Add a paragraph reference field for those paragraph types from a node type.
• Make the paragraph reference field required.
• Submit the node create form leaving the paragraph reference field fully blank.
• Check the error message that show up at the top of the node form and click on the error link.
• Make sure inline_form_errors is enabled.

Proposed resolution

• For issue 1 reported above, I have submitted a patch here - https://www.drupal.org/project/drupal/issues/3254758#comment-14577822.
• Issue 2 still has to be resolved. I have a temporary workaround in my project with Javascript:

    (function ($, Drupal) {
  'use strict';
  Drupal.behaviors.inLineFormErrorFix = {
    attach (context) {
      const $errorMessages = $('[data-drupal-messages] .messages--error a', context);
      if ($errorMessages !== undefined && $errorMessages.length) {
        // Iterate through each error link and
        // look for non-working hashes.
        $errorMessages.each(function () {
          let $errorLink = $(this);
          let href = $errorLink.attr('href');
          if (href !== undefined && href.length && href.indexOf('#') === 0) {
            if ($(href) === undefined || !$(href).length) {
              let id = href.substring(1);

              // When a non-working hash is found,
              // check for a potential available element
              // by matching the hash by an attribute.
              let $potentialElement = $('[data-drupal-selector=' + id + ']');
              if ($potentialElement !== undefined && $potentialElement.length) {

                // Add a fake element with the id
                // for the error link to go to.
                $('<span id="' + id + '"></span>').prependTo($potentialElement);
              }
            }
          }
        });
      }
    },
  };
})(jQuery, Drupal);