From b670add7e3bdcc843f23e56cbc75133eba62370c Mon Sep 17 00:00:00 2001
From: ManasBagul23 <bagulmanas23@gmail.com>
Date: Sun, 4 Oct 2026 12:20:21 +0530
Subject: [PATCH 1/2] fix(frontend): give the share-mode radio buttons an
 enclosing radiogroup

ShareAlbumDialog's local-network/internet toggle buttons declare
role="radio" but their wrapping div has no role="radiogroup", which
WAI-ARIA 1.2 requires for role="radio" to be valid. Screen readers
announce the buttons as unlinked controls instead of a mutually
exclusive group with position context ("1 of 2").

Fixes #1529
---
 frontend/src/components/Albums/ShareAlbumDialog.tsx    |  6 +++++-
 .../Albums/__tests__/ShareAlbumDialog.test.tsx         | 10 ++++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/Albums/ShareAlbumDialog.tsx b/frontend/src/components/Albums/ShareAlbumDialog.tsx
index 52d59395a..84328f403 100644
--- a/frontend/src/components/Albums/ShareAlbumDialog.tsx
+++ b/frontend/src/components/Albums/ShareAlbumDialog.tsx
@@ -476,7 +476,11 @@ export const ShareAlbumDialog: React.FC<ShareAlbumDialogProps> = ({
             <div className="grid gap-4 py-4">
               {/* Full width, because this is the decision the rest of the form
                   hangs off rather than one setting among several. */}
-              <div className="bg-muted grid w-full grid-cols-2 gap-1 rounded-lg p-1">
+              <div
+                role="radiogroup"
+                aria-label="Share mode"
+                className="bg-muted grid w-full grid-cols-2 gap-1 rounded-lg p-1"
+              >
                 {MODE_OPTIONS.map((option) => (
                   <button
                     key={option.value}
diff --git a/frontend/src/components/Albums/__tests__/ShareAlbumDialog.test.tsx b/frontend/src/components/Albums/__tests__/ShareAlbumDialog.test.tsx
index 836331172..72c15bc6c 100644
--- a/frontend/src/components/Albums/__tests__/ShareAlbumDialog.test.tsx
+++ b/frontend/src/components/Albums/__tests__/ShareAlbumDialog.test.tsx
@@ -86,6 +86,16 @@ describe('ShareAlbumDialog', () => {
     mockOpenUrl.mockResolvedValue(undefined);
   });
 
+  it('groups the share-mode radios under an accessible radiogroup', () => {
+    renderDialog();
+
+    const group = screen.getByRole('radiogroup', { name: /share mode/i });
+    expect(group).toContainElement(internetToggle());
+    expect(group).toContainElement(
+      screen.getByRole('radio', { name: /this network/i }),
+    );
+  });
+
   describe('internet mode', () => {
     it('shares on the local network unless asked otherwise', async () => {
       const user = userEvent.setup();

From 90b19746a89e98638bc3284b3e18e54ae4f2f260 Mon Sep 17 00:00:00 2001
From: ManasBagul23 <bagulmanas23@gmail.com>
Date: Sun, 4 Oct 2026 13:43:11 +0530
Subject: [PATCH 2/2] fix(frontend): use the Radix RadioGroup primitive for the
 share-mode toggle

The plain role="radio" buttons gave the right ARIA shape once wrapped in
a radiogroup, but arrow-key navigation between them still didn't work -
keyboard users could only tab between the two options instead of using
arrow keys like every other radio group. Swapped the manual role/
aria-checked wiring for RadioGroupPrimitive.Root/Item (the same Radix
primitive the dialog's own 'Keep sharing' expiry selector already uses),
rendering the existing pill button as the Item's child via asChild so
the visuals are unchanged.
---
 .../components/Albums/ShareAlbumDialog.tsx    | 38 ++++++++++---------
 1 file changed, 21 insertions(+), 17 deletions(-)

diff --git a/frontend/src/components/Albums/ShareAlbumDialog.tsx b/frontend/src/components/Albums/ShareAlbumDialog.tsx
index 84328f403..e2836f5d6 100644
--- a/frontend/src/components/Albums/ShareAlbumDialog.tsx
+++ b/frontend/src/components/Albums/ShareAlbumDialog.tsx
@@ -25,6 +25,7 @@ import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Switch } from '@/components/ui/switch';
 import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import { Separator } from '@/components/ui/separator';
 import { usePictoMutation, type BackendRes } from '@/hooks/useQueryExtension';
 import { createShare, revokeShare } from '@/api/api-functions';
@@ -476,30 +477,33 @@ export const ShareAlbumDialog: React.FC<ShareAlbumDialogProps> = ({
             <div className="grid gap-4 py-4">
               {/* Full width, because this is the decision the rest of the form
                   hangs off rather than one setting among several. */}
-              <div
-                role="radiogroup"
+              <RadioGroupPrimitive.Root
+                value={mode}
+                onValueChange={(value) => handleModeChange(value as ShareMode)}
                 aria-label="Share mode"
                 className="bg-muted grid w-full grid-cols-2 gap-1 rounded-lg p-1"
               >
                 {MODE_OPTIONS.map((option) => (
-                  <button
+                  <RadioGroupPrimitive.Item
                     key={option.value}
-                    type="button"
-                    role="radio"
-                    aria-checked={mode === option.value}
-                    onClick={() => handleModeChange(option.value)}
-                    className={cn(
-                      'flex items-center justify-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors',
-                      mode === option.value
-                        ? 'bg-background text-foreground shadow-sm'
-                        : 'text-muted-foreground hover:text-foreground',
-                    )}
+                    value={option.value}
+                    asChild
                   >
-                    <option.icon className="h-4 w-4" />
-                    {option.label}
-                  </button>
+                    <button
+                      type="button"
+                      className={cn(
+                        'flex items-center justify-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors',
+                        mode === option.value
+                          ? 'bg-background text-foreground shadow-sm'
+                          : 'text-muted-foreground hover:text-foreground',
+                      )}
+                    >
+                      <option.icon className="h-4 w-4" />
+                      {option.label}
+                    </button>
+                  </RadioGroupPrimitive.Item>
                 ))}
-              </div>
+              </RadioGroupPrimitive.Root>
 
               {mode === 'internet' && (
                 <div className="border-destructive/40 bg-destructive/5 grid gap-1.5 rounded-md border p-3">