Add annotation counts to `aria-label` for tab selection (#2190)

Co-authored-by: Kyle Keating <kkeating@hypothes.is>

src/sidebar/components/selection-tabs.js

@@ -27,6 +27,8 @@ function Tab({
     }
   };
 
+  const title = count > 0 ? `${label} (${count} available)` : label;
+
   return (
     <button
       className={classnames('selection-tabs__type', {
@@ -39,8 +41,8 @@ function Tab({
       onMouseDown={selectTab}
       role="tab"
       tabIndex="0"
-      title={label}
-      aria-label={label}
+      title={title}
+      aria-label={title}
       aria-selected={isSelected.toString()}
     >
       {children}

src/sidebar/components/test/selection-tabs-test.js

@@ -106,18 +106,32 @@ describe('SelectionTabs', function () {
       assert.equal(tabs.length, 2);
     });
 
-    it('should render `title` and `aria-label` attributes for tab buttons', () => {
+    it('should render `title` and `aria-label` attributes for tab buttons, with counts', () => {
       fakeStore.orphanCount.returns(1);
       const wrapper = createComponent({});
 
       const tabs = wrapper.find('button');
 
-      assert.equal(tabs.at(0).prop('aria-label'), 'Annotations');
-      assert.equal(tabs.at(0).prop('title'), 'Annotations');
+      assert.equal(
+        tabs.at(0).prop('aria-label'),
+        'Annotations (123 available)'
+      );
+      assert.equal(tabs.at(0).prop('title'), 'Annotations (123 available)');
+      assert.equal(tabs.at(1).prop('aria-label'), 'Page notes (456 available)');
+      assert.equal(tabs.at(1).prop('title'), 'Page notes (456 available)');
+      assert.equal(tabs.at(2).prop('aria-label'), 'Orphans (1 available)');
+      assert.equal(tabs.at(2).prop('title'), 'Orphans (1 available)');
+    });
+
+    it('should not render count in `title` and `aria-label` for page notes tab if there are no page notes', () => {
+      fakeStore.noteCount.returns(0);
+
+      const wrapper = createComponent({});
+
+      const tabs = wrapper.find('button');
+
       assert.equal(tabs.at(1).prop('aria-label'), 'Page notes');
       assert.equal(tabs.at(1).prop('title'), 'Page notes');
-      assert.equal(tabs.at(2).prop('aria-label'), 'Orphans');
-      assert.equal(tabs.at(2).prop('title'), 'Orphans');
     });
 
     it('should show the clean theme when settings contains the clean theme option', function () {