fix(frontend): make inbound forms accessible to screen readers (#7025)

Expose selectable options and selected values, associate validation guidance with controls, and contain keyboard focus in inbound dialogs. Preserve create and edit serialization and add Chromium keyboard and accessibility checks.
2026-11-10 23:25:02 +03:00 · 2026-11-05 20:38:49 +03:30
parent dbb6212988
commit f4030c889c
29 changed files with 875 additions and 110 deletions
@@ -0,0 +1,121 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { expect, within, waitFor } from 'storybook/test';
+import { Button } from 'antd';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+import { AntdRootConfig } from '@/i18n/AntdRootConfig';
+import { DBInbound } from '@/models/dbinbound';
+import { ThemeProvider } from '@/hooks/useTheme';
+import { setDatepicker } from '@/hooks/useDatepicker';
+
+import InboundFormModal from './InboundFormModal';
+
+const meta = {
+  title: 'Inbounds/InboundFormModal',
+  component: InboundFormModal,
+  tags: ['autodocs'],
+  beforeEach: () => {
+    setDatepicker('gregorian');
+  },
+  args: {
+    open: false,
+    mode: 'add',
+    dbInbound: null,
+    dbInbounds: [],
+    onClose: () => {},
+    onSaved: () => {},
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'The real inbound form. Exercise named options, keyboard navigation, validation and modal focus here; verify TalkBack/Chrome and NVDA separately before claiming screen-reader compatibility.',
+      },
+    },
+  },
+} satisfies Meta<typeof InboundFormModal>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function InboundDemo({ edit = false }: { edit?: boolean }) {
+  const [open, setOpen] = useState(false);
+  const [queryClient] = useState(
+    () => new QueryClient({ defaultOptions: { queries: { retry: false } } }),
+  );
+  const [inbound] = useState(
+    () =>
+      new DBInbound({
+        id: 41,
+        protocol: 'shadowsocks',
+        enable: true,
+        port: 14443,
+        settings: {
+          method: 'chacha20-ietf-poly1305',
+          password: 'example-password',
+          network: 'tcp,udp',
+          clients: [],
+        },
+        streamSettings: { network: 'tcp', security: 'none', tcpSettings: {} },
+      }),
+  );
+  return (
+    <QueryClientProvider client={queryClient}>
+      <AntdRootConfig>
+        <ThemeProvider>
+          <Button onClick={() => setOpen(true)}>{edit ? 'Edit inbound' : 'Add inbound'}</Button>
+          <InboundFormModal
+            open={open}
+            mode={edit ? 'edit' : 'add'}
+            dbInbound={edit ? inbound : null}
+            dbInbounds={[]}
+            availableNodes={[]}
+            onClose={() => setOpen(false)}
+            onSaved={() => {}}
+          />
+        </ThemeProvider>
+      </AntdRootConfig>
+    </QueryClientProvider>
+  );
+}
+
+export const Create: Story = {
+  render: () => <InboundDemo />,
+};
+
+export const SelectableOptions: Story = {
+  ...Create,
+  play: async ({ canvas, canvasElement, userEvent }) => {
+    const page = within(canvasElement.ownerDocument.body);
+    const opener = canvas.getByRole('button', { name: 'Add inbound' });
+    await userEvent.click(opener);
+    const dialog = await page.findByRole('dialog', { name: 'Add Inbound' });
+    const protocol = within(dialog).getByRole('combobox', { name: 'Protocol' });
+    await userEvent.selectOptions(
+      protocol,
+      within(protocol).getByRole('option', { name: 'shadowsocks' }),
+    );
+    await expect(protocol).toHaveDisplayValue('shadowsocks');
+    await expect(protocol).toHaveFocus();
+    await userEvent.click(within(dialog).getByRole('tab', { name: 'Protocol' }));
+    const cipher = within(dialog).getByRole('combobox', { name: 'Encryption method' });
+    await userEvent.selectOptions(
+      cipher,
+      within(cipher).getByRole('option', { name: 'chacha20-ietf-poly1305' }),
+    );
+    await userEvent.click(within(dialog).getByRole('tab', { name: 'Stream' }));
+    const transport = within(dialog).getByRole('combobox', { name: 'Transmission' });
+    await userEvent.selectOptions(
+      transport,
+      within(transport).getByRole('option', { name: 'WebSocket' }),
+    );
+    await expect(within(dialog).getByRole('textbox', { name: 'Path' })).toHaveValue('/');
+    await userEvent.click(within(dialog).getAllByRole('button', { name: 'Close' })[0]);
+    await waitFor(() => expect(opener).toHaveFocus());
+  },
+};
+
+export const Edit: Story = {
+  render: () => <InboundDemo edit />,
+};