如何在Svelte中自动化无障碍（A11y）事件处理？

针对你需要避免重复编写on:keyDown事件来满足无障碍要求的需求，这里提供几种可行的方案，按推荐程度排序：

一、Svelte自定义指令（原生推荐） #

利用Svelte的自定义指令能力，可以全局注册一个指令，自动为绑定了点击事件的元素添加键盘支持（回车/空格触发），同时补全无障碍属性。

1. 注册全局指令 #

在项目入口文件（如src/main.js或根布局组件）中添加：

import { directive } from 'svelte/compiler';

directive('clickable', (node, clickHandler) => {
  // 添加键盘事件处理
  const handleKeyDown = (e) => {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      clickHandler(e);
    }
  };

  node.addEventListener('keydown', handleKeyDown);
  node.setAttribute('tabindex', '0'); // 允许元素获取焦点
  node.setAttribute('role', 'button'); // 语义化角色

  return {
    destroy() {
      node.removeEventListener('keydown', handleKeyDown);
      node.removeAttribute('tabindex');
      node.removeAttribute('role');
    }
  };
});

2. 组件中使用 #

无需重复写on:click和on:keyDown，直接用指令绑定回调：

<div use:clickable={clickEvent1} />
<div use:clickable={clickEvent2} />
<div use:clickable={clickEvent3} />

如果想保留原有的on:click写法，可修改指令逻辑自动检测已绑定的点击事件：

directive('clickable', (node) => {
  const clickListeners = getEventListeners(node).click || [];
  if (clickListeners.length === 0) return;

  const handleKeyDown = (e) => {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      clickListeners.forEach(listener => listener.handler(e));
    }
  };

  node.addEventListener('keydown', handleKeyDown);
  node.setAttribute('tabindex', '0');
  node.setAttribute('role', 'button');

  return { destroy() { node.removeEventListener('keydown', handleKeyDown); } };
});

使用时只需给带on:click的元素加指令：

<div on:click={clickEvent1} use:clickable />
<div on:click={clickEvent2} use:clickable />
<div on:click={clickEvent3} use:clickable />

二、Rollup编译时插件（自动化注入） #

通过自定义Rollup插件，在编译阶段自动为所有带on:click的元素注入on:keydown事件，无需修改组件代码。

1. 创建插件文件 #

新建rollup-plugin-svelte-a11y-keydown.js：

import { parse, generate } from 'svelte/compiler';

export default function svelteA11yAutoKeydown() {
  return {
    name: 'svelte-a11y-auto-keydown',
    transform(code, id) {
      if (!id.endsWith('.svelte')) return;

      try {
        const ast = parse(code);
        
        function traverse(node) {
          if (node.type === 'Element') {
            // 检查是否有on:click指令
            const clickDirective = node.attributes.find(
              attr => attr.type === 'Directive' && attr.name === 'on:click'
            );
            if (!clickDirective) return;

            // 跳过已存在on:keydown的元素
            if (node.attributes.some(attr => attr.name === 'on:keydown')) return;

            // 构建keydown指令逻辑
            const keydownDirective = {
              ...clickDirective,
              name: 'on:keydown',
              expression: {
                type: 'ArrowFunctionExpression',
                params: [{ type: 'Identifier', name: 'e' }],
                body: {
                  type: 'BlockStatement',
                  body: [
                    {
                      type: 'IfStatement',
                      test: {
                        type: 'LogicalExpression',
                        operator: '||',
                        left: {
                          type: 'BinaryExpression',
                          operator: '===',
                          left: { type: 'MemberExpression', object: { name: 'e' }, property: { name: 'key' } },
                          right: { type: 'Literal', value: 'Enter' }
                        },
                        right: {
                          type: 'BinaryExpression',
                          operator: '===',
                          left: { type: 'MemberExpression', object: { name: 'e' }, property: { name: 'key' } },
                          right: { type: 'Literal', value: ' ' }
                        }
                      },
                      consequent: {
                        type: 'BlockStatement',
                        body: [
                          {
                            type: 'ExpressionStatement',
                            expression: {
                              type: 'CallExpression',
                              callee: { type: 'MemberExpression', object: { name: 'e' }, property: { name: 'preventDefault' } },
                              arguments: []
                            }
                          },
                          clickDirective.expression
                        ]
                      }
                    }
                  ]
                }
              }
            };
            node.attributes.push(keydownDirective);
          }
          node.children?.forEach(traverse);
        }

        traverse(ast.html.children[0]);
        const { code: transformed } = generate(ast);
        return transformed;
      } catch (err) {
        console.error('Svelte A11y Plugin Error:', err);
        return code;
      }
    }
  };
}

2. 配置Rollup #

在rollup.config.js中引入插件：

import svelte from 'rollup-plugin-svelte';
import svelteA11yAutoKeydown from './rollup-plugin-svelte-a11y-keydown.js';

export default {
  plugins: [
    svelte(),
    svelteA11yAutoKeydown()
  ]
};

编译时插件会自动处理所有带on:click的元素，注入键盘事件逻辑。

三、封装通用可点击组件（快速实现） #

如果不想折腾指令或插件，直接封装一个内置无障碍支持的组件：

<script>
  export let onClick;
  function handleKeyDown(e) {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      onClick(e);
    }
  }
</script>

<div 
  on:click={onClick}
  on:keydown={handleKeyDown}
  tabindex="0"
  role="button"
  {...$$restProps}
>
  <slot />
</div>

使用时替换原有的可点击元素：

<Clickable onClick={clickEvent1} />
<Clickable onClick={clickEvent2} />
<Clickable onClick={clickEvent3} />

内容的提问来源于stack exchange，提问作者Takyo