Review ElementErrors and tie up any loose ends

[romaricpascal]

What

Review the MissingElementError work (tracked here: #3478) and tie up any loose ends before a content review.

• Skip Link
• Exit this page
• Header
• Radios & Checkboxes
• Character Count
• Tabs
• Accordion

Why

This is part of our work to have our components throw rather than silently return during initialisation.

Who needs to work on this

Developers

Who needs to review this

Developers

Done when

• Review the list of affected components for consistency, functionality and any other concerns
• Ensure errors are ready for content review
• Review and guard all missing fields/attributes #4323

[romaricpascal]

Let's divide this issue into smaller ones (attached to #3478), in order of complexity:

• Skip Link
• Exit this page
• Header
• Radios & Checkboxes
• Character Count
• Tabs
• Accordion
• Review any loose ends (keep this issue)

[domoscargin]

From a discussion on slack:

We may want to look at removing the element param from the ElementError and just tell the error what's missing or invalid. We're using it like a boolean, and often just pass in null.

[romaricpascal]

Maybe it's a sign that we need to have the ElementError just accept a generic string message and move the formatting to separate helper functions rather than pass that boolean-ish first param: missingElementMessage and missingOrMistypedElementMessage.

I'd like to propose something like the following (the passing of the componentName being a parallel concern as it affects multiple errors, we can always add in an extra options parameter to the constructor anyway or with a componentErrorMessage function to wrap other message).

class ElementError extends Error {
  name = 'ElementError'
}

function missingMessage(identifier) {
  return `${identifier} is missing`  
}

// Two little updates here:
// - identifier as first param to keep in line with the `missingElementMessage
//
function missingOrMistypedMessage(identifier, {value, expectedType = HTMLElement.name}) {
  if (!value) return missingElementMessage(identifier)

  return `${identifier} is not of the type ${expectedType}`
}

throw new ElementError(missingMessage('button'));
throw new ElementError(missingOrMistypedMessage('input', {value: $input});

Depends on how we want to word things for #4072, and is an internal refactoring so could wait if necessary.