wagtail: Tab nav link error count is not correctly pluralised for screen readers

Issue Summary

While investigating https://github.com/wagtail/wagtail/issues/9497 it seems there is a similar issue on the Tab nav link (the tab buttons) that does not correctly pluralise the error counts.

Steps to Reproduce

1. On bakerydemo, edit a page, create a single validation error (e.g. remove the title and make it a blank title)
2. Click save draft, the page will reload with the error count shown in the tab (e.g. Content (1)
3. Right-click on the red “1” in a circle on the tab and inspect it in your browser’s developer tools
4. Observe that the label for screen readers is “Errors Count: 1 Content”
5. Expected: This label should be correctly labelled for single / plural errors and be easy to read
6. Actual: It uses errors not error and actually is confusing as it seems like the error is with Content but Content here refers to the tab.

• I have confirmed that this issue can be reproduced as described on a fresh Wagtail project: (no)

Potential solution

In the file - https://github.com/wagtail/wagtail/blob/main/wagtail/admin/templates/wagtailadmin/shared/tabs/tab_nav_link.html

• We should reverse the DOM order so that the {{ title }} is before the error count div - this will help with readability and also honours the visual styling where the number is shown after the tab title.
• The data-tabs-errors-count could be changed to be the visual representation only (via aria-hidden or similar)
• I would think we should not be using Count as a proper noun and instead have a lowercase c for count. Maybe not even Errors, this is probably just a grammar typo.
• We can then use a different translation mechanism for the error count - see https://docs.djangoproject.com/en/4.1/topics/i18n/translation/#std:templatetag-blocktrans so that the label for screen readers contains the whole thing.

Something like the following could be a good start, but this will read “Content 1 error” and “Content 3 errors” - we should be careful with assuming the value of the tab and trying to put that in the sentence. Maybe an easy way around this is to wrap the error label in brackets instead.

<a id="tab-label-{{ tab_id }}" href="#tab-{{ tab_id }}" class="w-tabs__tab {{ classes }}" role="tab" aria-selected="false" tabindex="-1">
    {{ title }}
    <div data-tabs-errors class="w-tabs__errors {% if errors_count %}!w-flex{% endif %}">
        <span data-tabs-errors-count aria-hidden="true">{{ errors_count }}</span>
        <span class="w-sr-only">{% blocktrans trimmed count errors_count=errors_count %}1 error{% plural %}{{ errors_count }} errors{% endblocktranslate %}</span>
    </div>
</a>

Technical details

• Python version: 3.0
• Django version: 4.1
• Wagtail version: 4.2a (in development)
• Browser version: Firefox 106