如何让我的react-dropzone-uploader上传组件支持无障碍访问？

问题原因 #

react-dropzone-uploader 默认的拖拽上传容器为普通div元素，未内置可聚焦属性与键盘交互逻辑，因此无法通过Tab键聚焦，也不支持键盘触发上传操作。

可行解决方案 #

这里提供两种无需修改组件源码、兼容原有功能的实现方式：

方案1：自定义输入容器，内置无障碍属性

直接修改inputContent参数，给展示容器添加可聚焦属性、语义化角色与键盘事件监听：

import { useRef } from 'react'

// 组件内部逻辑
const uploaderRef = useRef(null)

const handleKeyDown = (e) => {
  // 回车或空格触发文件选择器
  if (e.key === 'Enter' || e.key === ' ') {
    e.preventDefault()
    uploaderRef.current?.open()
  }
}

// 渲染逻辑
<div className="form-input--dropzone-uploader">
  <Controller
    control={control}
    name="profileImage"
    render={({ field: { onChange } }) => {
      return (
        <Uploader
          ref={uploaderRef}
          onFileChange={(files) => onChange(files[0])}
          accept="image/*"
          inputContent={
            <div 
              tabIndex={0}
              role="button"
              aria-label="点击或拖拽上传头像，按回车或空格可打开文件选择器"
              onKeyDown={handleKeyDown}
              style={{ width: '100%', height: '100%', cursor: 'pointer' }}
            >
              Click or Drag to Upload Profile Picture
            </div>
          }
          multiple={false}
          maxFiles={1}
        />
      );
    }}
  />
</div>

方案2：补充独立隐藏触发按钮（兼容性更好）

如果不想修改原有拖拽区域的展示逻辑，可新增一个仅对无障碍设备可见的触发按钮，不会影响普通用户的视觉体验：

import { useRef } from 'react'

const uploaderRef = useRef(null)

<div className="form-input--dropzone-uploader" style={{ position: 'relative' }}>
  {/* 视觉隐藏、可被Tab聚焦和屏幕阅读器识别的触发按钮 */}
  <button 
    onClick={() => uploaderRef.current?.open()}
    aria-label="上传头像"
    style={{
      position: 'absolute',
      width: '1px',
      height: '1px',
      padding: 0,
      margin: '-1px',
      overflow: 'hidden',
      clip: 'rect(0, 0, 0, 0)',
      border: 0
    }}
  />
  <Controller
    control={control}
    name="profileImage"
    render={({ field: { onChange } }) => {
      return (
        <Uploader
          ref={uploaderRef}
          onFileChange={(files) => onChange(files[0])}
          accept="image/*"
          inputContent={'Click or Drag to Upload Profile Picture'}
          multiple={false}
          maxFiles={1}
        />
      );
    }}
  />
</div>

两种方案均符合WCAG无障碍标准，支持Tab键聚焦、键盘触发上传、屏幕阅读器正确识别操作提示。

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