Fix pluralisation for Tab error count shown to screen readers

Fixes #9521

CHANGELOG.txt

@@ -35,6 +35,7 @@ Changelog
  * Fix: Support text resizing in workflow steps cards (Ivy Jeptoo)
  * Fix: Ignore images added via fixtures when using `WAGTAILIMAGES_FEATURE_DETECTION_ENABLED` to avoid errors for images that do not exist (Aman Pandey)
  * Fix: Restore ability to perform JSONField query operations against StreamField when running against the Django 4.2 development branch (Sage Abdullah)
+ * Fix: Ensure there is correct grammar and pluralisation for Tab error counts shown to screen readers (Aman Pandey)
  * Docs: Add custom permissions section to permissions documentation page (Dan Hayden)
  * Docs: Add documentation for how to get started with contributing translations for the Wagtail admin (Ogunbanjo Oluwadamilare)
  * Docs: Officially recommend `fnm` over `nvm` in development documentation (LB (Ben) Johnston)

client/src/entrypoints/admin/page-editor.js

@@ -1,6 +1,7 @@
 import $ from 'jquery';
 import { cleanForSlug } from '../../utils/text';
 import { inlinePanel } from '../../includes/inlinePanel';
+import { ngettext } from '../../utils/gettext';
 
 window.InlinePanel = inlinePanel;
 window.cleanForSlug = cleanForSlug;
@@ -41,8 +42,7 @@ function initErrorDetection() {
   const errorSections = {};
 
   // first count up all the errors
-  // eslint-disable-next-line func-names
-  $('.error-message,.help-critical').each(function () {
+  $('.error-message,.help-critical').each(function collectError() {
     const parentSection = $(this).closest('section[role="tabpanel"]');
 
     if (!errorSections[parentSection.attr('id')]) {
@@ -54,14 +54,28 @@ function initErrorDetection() {
   });
 
   // now identify them on each tab
-  // eslint-disable-next-line guard-for-in
-  for (const index in errorSections) {
-    $('[data-tabs] a[href="#' + index + '"]')
-      .find('[data-tabs-errors]')
+  Object.entries(errorSections).forEach(([sectionId, errorCount]) => {
+    const tabErrorsElement = $(`[data-tabs] a[href="#${sectionId}"]`).find(
+      '[data-tabs-errors]',
+    );
+
+    // show and add error count
+    tabErrorsElement
       .addClass('!w-flex')
       .find('[data-tabs-errors-count]')
-      .text(errorSections[index]);
-  }
+      .text(errorCount);
+
+    // update label for screen readers
+    tabErrorsElement
+      .find('[data-tabs-errors-statement]')
+      .text(
+        ngettext(
+          '({errorCount} error)',
+          '({errorCount} errors)',
+          errorCount,
+        ).replace('{errorCount}', errorCount),
+      );
+  });
 }
 
 window.initErrorDetection = initErrorDetection;

docs/releases/4.2.md

@@ -47,6 +47,7 @@ depth: 1
  * Support text resizing in workflow steps cards (Ivy Jeptoo)
  * Ignore images added via fixtures when using `WAGTAILIMAGES_FEATURE_DETECTION_ENABLED` to avoid errors for images that do not exist (Aman Pandey)
  * Restore ability to perform JSONField query operations against StreamField when running against the Django 4.2 development branch (Sage Abdullah)
+ * Ensure there is correct grammar and pluralisation for Tab error counts shown to screen readers (Aman Pandey)
 
 ### Documentation
 

wagtail/admin/templates/wagtailadmin/shared/tabs/tab_nav_link.html

@@ -7,13 +7,12 @@
     - `title` - {string} Text that the tab button will display
     - `active` - {boolean?} Force this to be active
     - `classes` - {string?} Extra css classes to pass to this component
-    - `errors_count` - {number?} Show above the tab for errors count
 {% endcomment %}
 
 <a id="tab-label-{{ tab_id }}" href="#tab-{{ tab_id }}" class="w-tabs__tab {{ classes }}" role="tab" aria-selected="false" tabindex="-1">
-    <div data-tabs-errors class="w-tabs__errors {% if errors_count %}!w-flex{% endif %}">
-        <span class="w-sr-only">{% trans 'Errors Count: ' %}</span>
-        <span data-tabs-errors-count>{{ errors_count }}</span>
-    </div>
     {{ title }}
+    <div data-tabs-errors class="w-tabs__errors">
+        <span data-tabs-errors-count aria-hidden="true"></span>
+        <span data-tabs-errors-statement class="w-sr-only"></span>
+    </div>
 </a>