Extension card should not be clickable: a11y issue and causes accidental toggles

[nickytonline]

Describe the bug

The ExtensionItem component in the UI has accessibility issues due to nested interactive elements. The Card component (a div) has an onClick handler that toggles the extension, while also containing a Switch and a settings button (Gear icon) that are independently clickable. This creates several problems:

This is an accessibility issue and creates a poor user experience because:

• The Card shouldn't be clickable - that's what the Switch toggle is for and divs shouldn't contain click events
• Users accidentally click the card area (I do this all the time 😅) when trying to read extension details, unintentionally toggling the extension
• Having both the card and the switch toggle is confusing and unnecessary

---

To Reproduce
Steps to reproduce the behavior:

1. Navigate to Settings → Extensions in the Goose Desktop app
2. Use keyboard navigation (Tab key) to move through extension cards
3. Observe that focus indicators and interaction expectations are unclear
4. Use a screen reader to navigate the extensions list
5. Notice the lack of clear semantic information about interactive elements

---

Expected behavior

The Card itself should not be clickable. Only the interactive controls within it (the Switch and optional Settings button) should respond to user interaction. Each interactive element should have:

• Proper ARIA labels describing its purpose
• Clear focus indicators for keyboard navigation
• Semantic HTML that communicates functionality to assistive technologies
• No nested click handlers requiring event propagation management

---

Proposed Solution

Remove the onClick handler from the <Card /> component and remove the onClick={(e) => e.stopPropagation()} from the <CardAction /> component. Add proper ARIA labels to the Switch and Settings button. Remove hover:cursor-pointer from the Card since it's no longer clickable.

---

Please provide the following information

• OS & Arch: [All platforms]
• Interface: UI
• Version: [Current version]
• Component: ui/desktop/src/components/settings/extensions/ExtensionItem.tsx

---

Additional context

It doesn't affect keyboard navigation as the div is not focusable by default.

[nickytonline]

This would be a good first issue. It's a two line change.

ExtensionItem.tsx

export default function ExtensionItem({
  extension,
  onToggle,
  onConfigure,
  isStatic,
  isPendingActivation = false,
}: ExtensionItemProps) {
// ...

  return (
    <Card
      id={`extension-${kebabCase(extension.name)}`}
      className="transition-all duration-200 hover:shadow-default hover:cursor-pointer min-h-[120px] overflow-hidden"
-      onClick={() => handleToggle(extension)}
+
    >
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          {getFriendlyTitle(extension)}
          {isPendingActivation && (
            <span
              className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-400 border border-amber-300 dark:border-amber-700"
              title="Extension will be activated when you start a new chat session"
            >
              Pending
            </span>
          )}
        </CardTitle>
-        <CardAction onClick={(e) => e.stopPropagation()}>
+        <CardAction>
          <div className="flex items-center justify-end gap-2">
            {editable && (
              <button
                className="text-textSubtle hover:text-textStandard"
                onClick={() => (onConfigure ? onConfigure(extension) : () => {})}
              >
                <Gear className="h-4 w-4" />
              </button>
            )}
            <Switch
              checked={(isToggling && visuallyEnabled) || extension.enabled}
              onCheckedChange={() => handleToggle(extension)}
              disabled={isToggling}
              variant="mono"
            />
          </div>
        </CardAction>
      </CardHeader>
      <CardContent className="px-4 text-sm text-text-muted overflow-hidden break-words">
        {renderSubtitle()}
      </CardContent>
    </Card>
  );
}

[techwithbhavya]

@angiejones @nickytonline I would like to work on this issue.

[DOsinga]

Yup I agree. I misclick this all the time. I could imagine making the card click map on config if there is one, which is usually what I intent. but of course not all extensions have that. @techwithbhavya go for it, though just implementing the suggestion should be fast enough