fix(frontend): add accessible names to icon-only buttons (#2504)

* fix(frontend): add accessible names to icon-only buttons

Icon-only buttons (refresh, delete ACL, open user actions, go back, clear
filter, refresh topics/tasks) were announced as a bare 'button' to screen
readers (WCAG 4.1.2 Name, Role, Value). Add aria-label to the cited sites in
transcripts, security tabs, shadow links, and rp-connect, matching the
existing sr-only/aria-label precedent (audit A11Y-02).

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

* fix(frontend): give per-row icon buttons unique accessible names

Address @claude review: the Delete ACL and user-actions buttons render once
per table row with an identical aria-label, so screen-reader users can't tell
which principal each targets. Include the principal/user name, matching the
roles-tab.tsx convention (`Delete role ${entry.name}`).

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

---------

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: malinskibeniamin

frontend/src/components/pages/rp-connect/pipeline/index.tsx

@@ -984,7 +984,7 @@ function PipelinePageContent() {
       ) : null}
       {mode === 'view' && !pipeline ? (
         <div className="flex items-center gap-2">
-          <Button className="-ml-3.5 shrink-0" onClick={handleCancel} size="icon" variant="ghost">
+          <Button aria-label="Go back" className="-ml-3.5 shrink-0" onClick={handleCancel} size="icon" variant="ghost">
             <ArrowLeftIcon className="h-5 w-5" />
           </Button>
           <Skeleton variant="text" width="md" />

frontend/src/components/pages/security/tabs/acls-tab.tsx

@@ -214,7 +214,13 @@ const AclsTabContent: FC = () => {
                   return (
                     <DropdownMenu>
                       <DropdownMenuTrigger asChild>
-                        <Button className="deleteButton" onClick={() => {}} size="icon-sm" variant="destructive-ghost">
+                        <Button
+                          aria-label={`Delete ACL for ${record.principalName}`}
+                          className="deleteButton"
+                          onClick={() => {}}
+                          size="icon-sm"
+                          variant="destructive-ghost"
+                        >
                           <TrashIcon className="h-4 w-4" />
                         </Button>
                       </DropdownMenuTrigger>

frontend/src/components/pages/security/tabs/users-tab.tsx

@@ -251,7 +251,7 @@ const UserActions = ({ user }: { user: PrincipalEntry }) => {
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
           <Button asChild className="deleteButton" size="icon-sm" variant="ghost">
-            <button type="button">
+            <button aria-label={`Open actions for ${user.name}`} type="button">
               <MoreHorizontalIcon className="h-4 w-4" />
             </button>
           </Button>

frontend/src/components/pages/shadowlinks/details/shadow-topics-table.tsx

@@ -229,11 +229,17 @@ export const ShadowTopicsTable: React.FC<ShadowTopicsTableProps> = ({
                 />
               </div>
               {Boolean(topicNameFilter) && (
-                <Button onClick={() => onTopicNameFilterChange?.('')} size="sm" variant="ghost">
+                <Button
+                  aria-label="Clear filter"
+                  onClick={() => onTopicNameFilterChange?.('')}
+                  size="sm"
+                  variant="ghost"
+                >
                   <X className="h-4 w-4" />
                 </Button>
               )}
               <Button
+                aria-label="Refresh topics"
                 data-testid="refresh-topics-button"
                 disabled={isFetching}
                 onClick={onRefresh}

frontend/src/components/pages/shadowlinks/details/tasks-table.tsx

@@ -75,7 +75,14 @@ export const TasksTable = ({ tasks, onRefresh, dataUnavailable }: TasksTableProp
         <CardTitle>Tasks</CardTitle>
         {Boolean(onRefresh) && (
           <CardAction>
-            <Button data-testid="refresh-tasks-button" onClick={onRefresh} size="icon" type="button" variant="ghost">
+            <Button
+              aria-label="Refresh tasks"
+              data-testid="refresh-tasks-button"
+              onClick={onRefresh}
+              size="icon"
+              type="button"
+              variant="ghost"
+            >
               <RefreshCw className="h-5 w-5" />
             </Button>
           </CardAction>

frontend/src/components/pages/transcripts/components/transcript-filter-bar.tsx

@@ -427,7 +427,14 @@ export const TranscriptFilterBar: FC<TranscriptFilterBarProps> = ({
         </Select>
 
         {/* Refresh button */}
-        <Button className="h-8 w-8" disabled={isLoading} onClick={onRefresh} size="icon" variant="outline">
+        <Button
+          aria-label="Refresh"
+          className="h-8 w-8"
+          disabled={isLoading}
+          onClick={onRefresh}
+          size="icon"
+          variant="outline"
+        >
           <RefreshCw className={`h-3.5 w-3.5 ${isLoading ? 'animate-spin' : ''}`} />
         </Button>
       </div>