[UX][A11Y] Use an ordered list for error messages

[jenlampton]

When there are multiple errors or warnings on a page, it would be beneficial to use an ordered list instead of an unordered one for the messages. That way people can easily see how many errors there are to fix.

This change is probably not necessary for info messages, or status messages.

Code for status message outut
https://docs.backdropcms.org/api/backdrop/core%21includes%21theme.inc/function/theme_status_messages/1

Note: This is a markup change that may have implications on existing websites with custom themes. Should we make this change to the seven theme only, to minimize front-end impact, and maximise UX and a11y on administrative interfaces?

We should introduce a seven_status_messages() function in core/themes/seven/template.php that overrides the above.

function seven_status_messages($variables) {
  $display = $variables['display'];
  $message_types = (empty($variables['messages'])) ? backdrop_get_messages($display) : $variables['messages'];
  $output = '';

  $status_heading = array(
    'status' => t('Status message'),
    'error' => t('Error message'),
    'warning' => t('Warning message'),
    'info' => t('Info message'),
  );

  foreach ($message_types as $type => $messages) {
    $output .= "<div class=\"messages $type\">\n";
    if (!empty($status_heading[$type])) {
      $output .= '  <h2 class="element-invisible">' . $status_heading[$type] . "</h2>\n";
    }
    if (count($messages) > 1 && $type == 'error') {
      $output .= "  <ol>\n";
      foreach ($messages as $message) {
        $output .= '    <li>' . $message . "</li>\n";
      }
      $output .= "  </ol>\n";
    }
    elseif (count($messages) > 1) {
      $output .= "  <ul>\n";
      foreach ($messages as $message) {
        $output .= '    <li>' . $message . "</li>\n";
      }
      $output .= "  </ul>\n";
    }
    else {
      $output .= reset($messages) . "\n";
    }
    if (config_get('system.core', 'messages_dismissible')) {
      // Add the 'Dismiss' library and place a 'Dismiss' link on messages.
      backdrop_add_library('system', 'backdrop.dismiss');
      $output .= '<a href="#" class="dismiss" title="' . t('Dismiss') . '"><span class="element-invisible">' . t('Dismiss') . '</span></a>' . "\n";
    }
    $output .= "</div>\n";
  }

  return $output;
}