fix(a11y): label #online_count for AT (#7255 - "number next to the user icon")

Murphy's 2026-05-16 follow-up cut off mid-bullet ("It's not clear what the
number next to the …"). Best guess: the user-count badge in the showusers
toolbar button. Currently it exposes a bare digit to AT — "5" with no
context — because the visible badge text is also the entire accessible
content.

Append a localized aria-label generated from a new pad.userlist.onlineCount
key (plural macro for one / other) whenever the count updates, so AT
announces "5 connected users" instead of the bare digit. Add role=status
and aria-live=polite so the count change is announced inline without
forcing the user to refocus the button.

Visible badge digit unchanged. html10n.get is null-safe (falls back to
an English template so AT never gets back "undefined" before the locale
bundle has loaded).

Adds a Playwright spec verifying role/aria-live and that the aria-label
contains "connected user".

Refs #7255

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: JohnMcLear

src/locales/en.json

@@ -401,6 +401,7 @@
   "pad.savedrevs.timeslider": "You can see saved revisions by visiting the timeslider",
   "pad.userlist.entername": "Enter your name",
   "pad.userlist.unnamed": "unnamed",
+  "pad.userlist.onlineCount": "{[ plural(count) one: {{count}} connected user, other: {{count}} connected users ]}",
   "pad.editbar.clearcolors": "Clear authorship colors on entire document? This cannot be undone",
 
   "pad.impexp.importbutton": "Import Now",

src/static/js/pad_userlist.ts

@@ -354,7 +354,12 @@ const paduserlist = (() => {
       self.setMyUserInfo(myInitialUserInfo);
 
       if ($('#online_count').length === 0) {
-        $('#editbar [data-key=showusers] > a').append('<span id="online_count">1</span>');
+        // role="status" + aria-live="polite" announces the count when it
+        // changes; the localized aria-label (set in updateNumberOfOnlineUsers)
+        // turns the bare badge digit into "N connected users" so AT users
+        // get context, not a stray "5". See ether/etherpad#7255.
+        $('#editbar [data-key=showusers] > a').append(
+            '<span id="online_count" role="status" aria-live="polite">1</span>');
       }
 
       $('#otheruserstable tr').remove();
@@ -547,7 +552,15 @@ const paduserlist = (() => {
         localStorage.setItem('recentPads', JSON.stringify(recentPadsList));
       }
 
-      $('#online_count').text(online);
+      // Set both visible text (the badge digit) and the accessible name in
+      // one place so they can't drift. html10n.get returns undefined if the
+      // locale bundle hasn't loaded yet — fall back to an English template
+      // so AT never reads back "undefined".
+      const $count = $('#online_count');
+      $count.text(online);
+      const label = html10n.get('pad.userlist.onlineCount', {count: online})
+          || `${online} connected user${online === 1 ? '' : 's'}`;
+      $count.attr('aria-label', label);
 
       return online;
     },

src/tests/frontend-new/specs/a11y_dialogs.spec.ts

@@ -196,6 +196,25 @@ test('toolbar <li>/<a> wrappers are presentational (Lighthouse listitem rule, #7
   }
 });
 
+test('online_count badge has a localized accessible label (#7255)', async ({page}) => {
+  // The user-count badge in the showusers toolbar button used to expose a
+  // bare digit ("5") to AT, with no clue it was a user count. Now the badge
+  // carries an aria-label generated from pad.userlist.onlineCount that
+  // updates whenever the count changes. role=status + aria-live=polite
+  // means AT announces the change without the user having to refocus.
+  const badge = page.locator('#online_count');
+  await expect(badge).toHaveAttribute('role', 'status');
+  await expect(badge).toHaveAttribute('aria-live', 'polite');
+  // toHaveText polls so the assertion survives the initial userlist update
+  // that pad_userlist.ts schedules after the connection completes.
+  await expect(badge).toHaveText(/^\d+$/);
+  const label = await badge.getAttribute('aria-label');
+  expect(label).toBeTruthy();
+  // English plural form contains "connected user" — covers both singular
+  // and plural without baking the exact count into the test.
+  expect(label).toMatch(/connected user/);
+});
+
 test('linemetricsdiv is hidden from screen readers (#7255)', async ({page}) => {
   // The "Ether X" announcement in the issue's a11y-inspector screenshot was
   // the outer iframe (titled "Ether") plus a single "x" text leaf from