Add support for html_content in error mapping

* The `html_content` key in an error map can be used to render rich
	markup for an error message instead of the plaintext `message`
	* If present, `message` is ignored.
	* Under the hood, `applyErrorMappingToForm` calls
		`errorMessageListItemWithHTML` for an error entry if `html_content`
		evaluates to a truthy value

Author: tcannonfodder

README.md

@@ -261,7 +261,8 @@ When returning error mappings, they need to have the following format:
   {
     "container_id": "dom-id-without-#", // the ID of the error container you want to append this error message to
     "element_to_invalidate_id": "dom-id-without-#", // the ID of the input that should be marked as invalid
-    "message": "The error message to render",
+    "message": "The error message to render", // The plaintext message used for the error
+    "html_content": "<strong>Rich</strong> Markup", // an OPTIONAL HTML string that will be parsed using `DOMParser` and used as the message. If present, `message` is ignored
     "type": "error-type-key", //The identifier for what type of error this is
   },
   // ...

demo/index.html

@@ -54,6 +54,13 @@
         message: "General errors from the server-side",
         type: "general"
       },
+      {
+        container_id: "test-form-error-container",
+        element_to_invalidate_id: "test-form",
+        message: "This message content will be ignored",
+        html_content: `<strong>Richly <a href="https://example.com">rendered</a> errors!</strong>`,
+        type: "rich_error"
+      },
       {
         container_id: "random-missing-field-errors",
         element_to_invalidate_id: "random-missing-field",

src/error-mapping.js

@@ -13,6 +13,7 @@ import {
 import {
   clearErrorListsInForm,
   errorMessageListItem,
+  errorMessageListItemWithHTML,
   markErrorTypeAsVisible
 } from './rendering.js'
 
@@ -30,6 +31,7 @@ import {
  * @param {string} errors[].container_id - The ID of the container this error message should be rendered in
  * @param {string} errors[].element_id - The ID of the element to call {@link setValidityStateAttributes} with `false` for
  * @param {string} errors[].message - the error message
+ * @param {string} errors[].html_content - An optional HTML string that can be used to render rich markup in an error message. If present, `message` is ignored
  * @param {string} errors[].type - the value for `data-pf-error-type` that represents the type of error this is
  *
  * @example
@@ -74,7 +76,13 @@ export function applyErrorMappingToForm(form, errors) {
     const preservedError = getPreservedErrorForType(errorList, error.type)
     preservedError?.remove()
 
-    let listItem = errorMessageListItem(error.message, error.type)
+    let listItem
+
+    if(error.html_content){
+      listItem = errorMessageListItemWithHTML(error.html_content, error.type)
+    } else {
+      listItem = errorMessageListItem(error.message, error.type)
+    }
 
     if(shouldBePreserved) {
       markAsPreservedError(listItem)

test/error-mapping.test.js

@@ -106,6 +106,13 @@ suite('Error Mapping', async () => {
         type: `unconfirmed_error`,
         message: "Please confirm"
       },
+      {
+        container_id: `confirm-email-field-errors`,
+        element_to_invalidate_id: `confirm-email-field`,
+        type: `custom_error_with_html_content`,
+        message: "This message body should be ignored",
+        html_content: `<strong>Richly <a href="https://example.com">rendered</a> errors!</strong>`
+      }
     ]
 
     const form = container.querySelector(`form`)
@@ -145,7 +152,7 @@ suite('Error Mapping', async () => {
       document.getElementById(`email-field-errors`).querySelector(`[data-pf-error-visible][data-pf-error-type="ad_hoc_server_error_5"]`).textContent
     )
 
-    assert.equal(2, document.getElementById(`confirm-email-field-errors`).querySelectorAll(`[data-pf-error-type][data-pf-error-visible]`).length)
+    assert.equal(3, document.getElementById(`confirm-email-field-errors`).querySelectorAll(`[data-pf-error-type][data-pf-error-visible]`).length)
     assert.equal(
       "‼️ Ad-hoc server error 6",
       document.getElementById(`confirm-email-field-errors`).querySelector(`[data-pf-error-visible][data-pf-error-type="ad_hoc_server_error_6"]`).textContent
@@ -155,5 +162,12 @@ suite('Error Mapping', async () => {
       "‼️ Please confirm",
       document.getElementById(`confirm-email-field-errors`).querySelector(`[data-pf-error-visible][data-pf-error-type="unconfirmed_error"]`).textContent
     )
+
+    const richError = document.getElementById(`confirm-email-field-errors`).querySelector(`[data-pf-error-visible][data-pf-error-type="custom_error_with_html_content"]`)
+
+    assert.equal(
+      `<span>‼️</span> <span data-pf-error-message=""><strong>Richly <a href="https://example.com">rendered</a> errors!</strong></span>`,
+      richError.innerHTML
+    )
   })
 })