Fix tabs being shifted down by sr-only element

Move the screen-reader only summary element outside of the container with
spacing between elements, as this caused the tab titles to shift down.

src/sidebar/components/SelectionTabs.tsx

@@ -146,86 +146,88 @@ function SelectionTabs({
   const tabCountsSummary = tabCountsSummaryPieces.join(', ');
 
   return (
-    <div
-      className={classnames(
-        // 9px balances out the space above the tabs
-        '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}
-          isWaitingToAnchor={isWaitingToAnchorAnnotations}
-          isSelected={selectedTab === 'annotation'}
-          label="Annotations"
-          onSelect={() => selectTab('annotation')}
-        >
-          Annotations
-        </Tab>
-        <Tab
-          count={noteCount}
-          isWaitingToAnchor={isWaitingToAnchorAnnotations}
-          isSelected={selectedTab === 'note'}
-          label="Page notes"
-          onSelect={() => selectTab('note')}
-        >
-          Page Notes
-        </Tab>
-        {orphanCount > 0 && (
+      <div
+        className={classnames(
+          // 9px balances out the space above the tabs
+          'space-y-3 pb-[9px]',
+        )}
+      >
+        <div className="flex gap-x-6 theme-clean:ml-[15px]" role="tablist">
           <Tab
-            count={orphanCount}
+            count={annotationCount}
             isWaitingToAnchor={isWaitingToAnchorAnnotations}
-            isSelected={selectedTab === 'orphan'}
-            label="Orphans"
-            onSelect={() => selectTab('orphan')}
+            isSelected={selectedTab === 'annotation'}
+            label="Annotations"
+            onSelect={() => selectTab('annotation')}
           >
-            Orphans
+            Annotations
           </Tab>
-        )}
-      </div>
-      {selectedTab === 'note' && settings.enableExperimentalNewNoteButton && (
-        <div className="flex justify-end">
-          <Button
-            data-testid="new-note-button"
-            onClick={() => annotationsService.createPageNote()}
-            variant="primary"
-            style={applyTheme(['ctaBackgroundColor'], settings)}
+          <Tab
+            count={noteCount}
+            isWaitingToAnchor={isWaitingToAnchorAnnotations}
+            isSelected={selectedTab === 'note'}
+            label="Page notes"
+            onSelect={() => selectTab('note')}
           >
-            <PlusIcon />
-            New note
-          </Button>
+            Page Notes
+          </Tab>
+          {orphanCount > 0 && (
+            <Tab
+              count={orphanCount}
+              isWaitingToAnchor={isWaitingToAnchorAnnotations}
+              isSelected={selectedTab === 'orphan'}
+              label="Orphans"
+              onSelect={() => selectTab('orphan')}
+            >
+              Orphans
+            </Tab>
+          )}
         </div>
-      )}
-      {!isLoading && showNotesUnavailableMessage && (
-        <Card data-testid="notes-unavailable-message" variant="flat">
-          <CardContent classes="text-center">
-            There are no page notes in this group.
-          </CardContent>
-        </Card>
-      )}
-      {!isLoading && showAnnotationsUnavailableMessage && (
-        <Card data-testid="annotations-unavailable-message" variant="flat">
-          <CardContent
-            // TODO: Remove !important spacing class after
-            // https://github.com/hypothesis/frontend-shared/issues/676 is addressed
-            classes="text-center !space-y-1"
-          >
-            <p>There are no annotations in this group.</p>
-            <p>
-              Create one by selecting some text and clicking the{' '}
-              <AnnotateIcon
-                className="w-em h-em inline m-0.5 -mt-0.5"
-                title="Annotate"
-              />{' '}
-              button.
-            </p>
-          </CardContent>
-        </Card>
-      )}
-    </div>
+        {selectedTab === 'note' && settings.enableExperimentalNewNoteButton && (
+          <div className="flex justify-end">
+            <Button
+              data-testid="new-note-button"
+              onClick={() => annotationsService.createPageNote()}
+              variant="primary"
+              style={applyTheme(['ctaBackgroundColor'], settings)}
+            >
+              <PlusIcon />
+              New note
+            </Button>
+          </div>
+        )}
+        {!isLoading && showNotesUnavailableMessage && (
+          <Card data-testid="notes-unavailable-message" variant="flat">
+            <CardContent classes="text-center">
+              There are no page notes in this group.
+            </CardContent>
+          </Card>
+        )}
+        {!isLoading && showAnnotationsUnavailableMessage && (
+          <Card data-testid="annotations-unavailable-message" variant="flat">
+            <CardContent
+              // TODO: Remove !important spacing class after
+              // https://github.com/hypothesis/frontend-shared/issues/676 is addressed
+              classes="text-center !space-y-1"
+            >
+              <p>There are no annotations in this group.</p>
+              <p>
+                Create one by selecting some text and clicking the{' '}
+                <AnnotateIcon
+                  className="w-em h-em inline m-0.5 -mt-0.5"
+                  title="Annotate"
+                />{' '}
+                button.
+              </p>
+            </CardContent>
+          </Card>
+        )}
+      </div>
+    </>
   );
 }