From ab3addefc3712e4a4c6e6b2f295bc2278c41000f Mon Sep 17 00:00:00 2001
From: Linus Rath <139418639+rathlinus@users.noreply.github.com>
Date: Wed, 28 Oct 2026 04:42:36 +0100
Subject: [PATCH] fix: show the focus ring on the About card in the settings
 sidebar and name it by what it shows

---
 .../settings/__tests__/about-data-settings.test.tsx | 13 +++++++++++++
 components/settings/about-data-settings.tsx         |  8 +++++++-
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/components/settings/__tests__/about-data-settings.test.tsx b/components/settings/__tests__/about-data-settings.test.tsx
index 223a92aaa..a377d5526 100644
--- a/components/settings/__tests__/about-data-settings.test.tsx
+++ b/components/settings/__tests__/about-data-settings.test.tsx
@@ -54,3 +54,16 @@ describe('Backup & reset', () => {
     expect(alertSpy).not.toHaveBeenCalled();
   });
 });
+
+// SET-25: the About card in the settings sidebar is named by what it shows,
+// not a hard-coded English "About", and shows the focus ring.
+describe('About card', () => {
+  it('has a visible focus ring and no hard-coded English name', async () => {
+    const { AboutFooter } = await import('../about-data-settings');
+    render(<AboutFooter />);
+    const button = screen.getByTestId('settings-about').querySelector('button') as HTMLButtonElement;
+    expect(button.getAttribute('aria-label')).toBeNull();
+    expect(button.className).toContain('focus-visible:ring-2');
+    expect(button.textContent).toContain('about.title');
+  });
+});
diff --git a/components/settings/about-data-settings.tsx b/components/settings/about-data-settings.tsx
index 81bea1440..b40bb6b1d 100644
--- a/components/settings/about-data-settings.tsx
+++ b/components/settings/about-data-settings.tsx
@@ -85,7 +85,13 @@ export function AboutFooter() {
     <div data-testid="settings-about" className="px-3 py-2">
       {showGame && <SpamSiegeGame onClose={() => setShowGame(false)} />}
       <div className="flex items-center gap-3">
-        <button onClick={handleLogoClick} className="flex items-center gap-3 flex-1 min-w-0 text-start focus:outline-none group/about cursor-pointer" aria-label="About">
+        {/* Named by what it shows (app name and version), with the focus
+            ring every other stop in the sidebar has. */}
+        <button
+          type="button"
+          onClick={handleLogoClick}
+          className="flex items-center gap-3 flex-1 min-w-0 text-start rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring group/about cursor-pointer"
+        >
           <img
             src={logoLight}
             alt={branded ? appName : 'Bulwark'}