Add more specific labels for some close buttons

src/sidebar/components/HelpPanel.tsx

@@ -114,7 +114,7 @@ function HelpPanel({ session }: HelpPanelProps) {
       onActiveChanged={onActiveChanged}
       variant="custom"
     >
-      <TabHeader>
+      <TabHeader closeTitle="Close help panel">
         <Tab
           id={tutorialTabId}
           aria-controls={tutorialPanelId}

src/sidebar/components/ShareDialog/ShareDialog.tsx

@@ -39,7 +39,7 @@ export default function ShareDialog({ shareTab }: ShareDialogProps) {
       panelName="shareGroupAnnotations"
       variant="custom"
     >
-      <TabHeader>
+      <TabHeader closeTitle="Close share panel">
         {shareTab && (
           <Tab
             id="share-panel-tab"

src/sidebar/components/tabs/TabHeader.tsx

@@ -2,14 +2,16 @@ import { CloseButton, TabList } from '@hypothesis/frontend-shared';
 import classnames from 'classnames';
 import type { ComponentChildren } from 'preact';
 
+export type TabHeaderProps = {
+  children: ComponentChildren;
+  /** Title for the close button. */
+  closeTitle: string;
+};
+
 /**
  * Render a header to go above a Card, with contents in a TabList
  */
-export default function TabHeader({
-  children,
-}: {
-  children: ComponentChildren;
-}) {
+export default function TabHeader({ children, closeTitle }: TabHeaderProps) {
   return (
     <div data-testid="tab-header" className="flex items-center">
       <CloseButton
@@ -30,7 +32,7 @@ export default function TabHeader({
           // the `Tab` components rendered inside the `TabList`. See issue #6131.
           'touch:!min-h-0',
         )}
-        title="Close"
+        title={closeTitle}
         variant="custom"
         size="sm"
       />