Report tab count changes to screen readers

In the new search UI there is no longer a status message which tries to describe
the search result counts in detail. Instead we rely on the existing counts that
are displayed on tab titles.

Add a hidden status message with `role="status", aria-live="polite"` to
communicate changes in these counts to assistive technology users.

Part of https://github.com/hypothesis/client/issues/6006

src/sidebar/components/SelectionTabs.tsx

@@ -125,6 +125,18 @@ function SelectionTabs({
 
   const showNotesUnavailableMessage = selectedTab === 'note' && noteCount === 0;
 
+  const tabCountsSummaryPieces = [];
+  if (annotationCount > 0) {
+    tabCountsSummaryPieces.push(`${annotationCount} annotations`);
+  }
+  if (noteCount > 0) {
+    tabCountsSummaryPieces.push(`${noteCount} notes`);
+  }
+  if (orphanCount > 0) {
+    tabCountsSummaryPieces.push(`${orphanCount} orphans`);
+  }
+  const tabCountsSummary = tabCountsSummaryPieces.join(', ');
+
   return (
     <div
       className={classnames(
@@ -132,6 +144,9 @@ function SelectionTabs({
         'space-y-3 pb-[9px]',
       )}
     >
+      <div aria-live="polite" role="status" className="sr-only">
+        {tabCountsSummary}
+      </div>
       <div className="flex gap-x-6 theme-clean:ml-[15px]" role="tablist">
         <Tab
           count={annotationCount}

src/sidebar/components/test/SelectionTabs-test.js

@@ -307,6 +307,49 @@ describe('SelectionTabs', () => {
     assert.notCalled(fakeStore.selectTab);
   });
 
+  [
+    {
+      tabCounts: {
+        annotation: 2,
+        note: 0,
+        orphan: 0,
+      },
+      message: '2 annotations',
+    },
+    {
+      tabCounts: {
+        annotation: 0,
+        note: 3,
+        orphan: 0,
+      },
+      message: '3 notes',
+    },
+    {
+      tabCounts: {
+        annotation: 0,
+        note: 0,
+        orphan: 4,
+      },
+      message: '4 orphans',
+    },
+    {
+      tabCounts: {
+        annotation: 2,
+        note: 3,
+        orphan: 4,
+      },
+      message: '2 annotations, 3 notes, 4 orphans',
+    },
+  ].forEach(({ tabCounts, message }) => {
+    it('reports annotation count to screen readers', () => {
+      const wrapper = createComponent({
+        tabCounts,
+      });
+      const status = wrapper.find('[role="status"]');
+      assert.equal(status.text(), message);
+    });
+  });
+
   it(
     'should pass a11y checks',
     checkAccessibility({