Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

On bakerydemo, edit a page, create a single validation error (e.g. remove the title and make it a blank title)
Click save draft, the page will reload with the error count shown in the tab (e.g. Content (1)
Right-click on the red “1” in a circle on the tab and inspect it in your browser’s developer tools
Observe that the label for screen readers is “Errors Count: 1 Content”
Expected: This label should be correctly labelled for single / plural errors and be easy to read
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>